Css 基本使用

CSS的構成與規則

CSS(Cascading Style Sheets) 使用方式如下

選取器 { 屬性 : 值;}

說明

1. 選取器 : 使用在html 中的地方，ex : class 、 id 、object

2. 屬性 : 設定哪個屬性，ex： 背景、大小、寬度

3. 值 : 設定什麼值，ex : #ddd ， px，1s

選取器

Class 選取器

範例

HTML

    <div class="content">
      <h1 class="title-1">H1</h1>
      <h2 class="title-2">H2</h2>
      <h3 class="title-3">H3</h3>
    </div>

CSS

ID 選取器

HTML

   <div class="content">
      <h1 id="Title-1">H1</h1>
      <h2 id="Title-2">H2</h2>
      <h3 id="Title-3">H3</h3>
    </div>

CSS

後代 選取器

HTML

  <ul class="list1">
    <li>list-1</li>
    <li>list-2</li>
    <li>list-3</li>
  </ul>
  <ul class="list2">
    <li>list-1</li>
    <li>list-2</li>
    <li>list-3</li>
  </ul>
  <ul class="list3">
    <li>list-1</li>
    <li>list-2</li>
    <li>list-3</li>
  </ul>

CSS

屬性選取器

Html

 <div class="img-inner">
   <img class="img-resp" src="images/reason1"  >
   <img class="img-resp" src="images/reason2" alt="" >
   <img class="img-resp" src="images/reason3"  >
 </div>

CSS

擬態選取器

Html

 <a href="javascript:;">link</a>

CSS

動作	內容
:link	未被點選連結樣式，或是一般載入時的連結
:visited	已經被點閱過的連結
:hover	游標滑入超連結文字時呈現效果
:active	在超連結文字上並按下不放時候呈現的效果
:focus	焦點時的狀態