CSS語法架構

CSS 架構規則有 2主要部份: 選擇子(Selector) 及其對應一組的宣告

CSS 選擇子(Selector) 與id與class:

  1. HTML碼中的元素選擇子: H1 是 選擇子(Selector) ,用大括弧 跟隨一組宣告例如 { color:red; font-size:18px; }
  2. 自定id選擇子(Selector) : #myid1 是 選擇子(Selector) ,用大括弧 跟隨一組宣告例如 { color:red; font-size:18px; }
  3. 自定class選擇子(Selector) : .myclass1 是 選擇子(Selector) ,用大括弧 跟隨一組宣告例如 { color:blue; font-size:18px; }

說明 : 宣告區(即大括弧內),可多個宣告,宣告之間用分號區隔 ,然後屬性:值 ,例如P { 顏色: 紅色; 文字大小:12號字; } /*這只是解說用,實際不會是中文*/

CSS中 怎麼加入註解呢?

用斜線與星號寫成 /* 註解文字 */ ,這些註解文字就不會被顯示在網頁上,在樣式表內適當加入註解輔助您記下CSS用途。


CSS id 與 class 的使用時機

聰明的你是否心理有疑問? id 與 class都可定義樣式屬性為何要分id 與 class ?

P { color:red;}
不需再對HTML裡的P元素做設定 ,就可對P元素產生作用

#myid1 { color:red; }
<p id="myid1">P元素要與樣式對應同id名才有作用</p>

.myclass1 { color:red; }
<p class="myclass1">P元素要與樣式對應同class名才有作用</p>

範例: