CSS 結構和規則

文章目錄

• 規則
• 組合
• 繼承
• 註解
• 定位錨偽類
• 首行虛擬元素
• 首個字母虛擬元素

• 基本文法規則選擇符

  任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如，

  P { text-indent: 3em }

  當中的選擇符是P。

  類選擇符

  單一個選擇符能有不同的CLASS(類)，因而允許同一元素有不同樣式。例如，一個網頁製作者也許希望視其語言而定，用不同的顏色顯示代碼 :

  code.html { color: #191970 }code.css  { color: #4b0082 }

  以上的例子建立了兩個類，css和html，供HTML的CODE元素使用。CLASS屬性是用於在HTML中以指明元素的類，例如，

  <P class="warning">每個選擇符只允許有一個類。例如，code.html.proprietary是無效的。</p>

  類的聲明也可以無須相關的元素:

  .note { font-size: small }

  在這個例子，名為note的類可以被用於任何元素。

  一個良好的習慣是在命名類的時候，根據它們的功能而不是根據它們的外觀。上述例子中的note類也可以命名為small，但如果網頁製作者決定改變這個類的樣式，使得它不再是小字型的話，那麼這個名字就變得毫無意義了。

  ID 選擇符

  ID 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用，因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如，ID選擇符可以指定如下:

  #svp94O { text-indent: 3em }

  這點可以參考HTML中的ID屬性:

  <P ID=svp94O>文本縮排3em</P>

  關聯選擇符

  關聯選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字串。這些選擇符可以指定一般屬性，而且因為層疊順序的規則，它們的優先權比單一的選擇符大。例如， 以下的上下文選擇符

  P EM { background: yellow }

  是P EM。這個值表示段落中的強調文本會是黃色背景；而標題的強調文本則不受影響。

  聲明屬性

  一個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字型。

  值

  聲明的值是一個屬性接受的指定。例如，屬性顏色能接受值red。

  組合

  為了減少樣式表的重複聲明，組合的選擇符聲明是允許的。例如，文檔中所有的標題可以通過組合給出相同的聲明:

  H1, H2, H3, H4, H5, H6 {  color: red;  font-family: sans-serif }

  繼承

  實際上，所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值，除非另外更改。例如，一個BODY定義了的顏色值也會應用到段落的文本中。

  有些情況是內部選擇符不繼承周圍的選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性是不會繼承的；直覺上，一個段落不會有同文檔BODY一樣的上邊界值。

  註解

  樣式表裡面的註解使用C語言編程中一樣的約定方法去指定。CSS1註解的例子如以下格式:

  /* COMMENTS CANNOT BE NESTED */

  偽類和虛擬元素

  偽類和虛擬元素是特殊的類和元素，能自動地被支援CSS的瀏覽器所識別。偽類區別開不同種類的元素(例如，visited links(已訪問的串連)和active links(可啟用串連)描述了兩個定位錨(anchors)的類型)。虛擬元素指元素的一部分，例如段落的第一個字母。

  偽類或虛擬元素規則的形式如

  選擇符:偽類 { 屬性: 值 }

  或

  選擇符:虛擬元素 { 屬性: 值 }

  偽類和虛擬元素不應用HTML的CLASS屬性來指定。一般的類可以與偽類和虛擬元素一起使用，如下:

  選擇符.類: 偽類 { 屬性: 值 }

  或

  選擇符.類: 虛擬元素 { 屬性: 值 }

  定位錨偽類

  偽類可以指定A元素以不同的方式顯示串連(links)、已訪問串連(visited links)和可啟用串連(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問串連可以定義為不同顏色的顯示，甚至不同字型大小和風格。

  一個有趣的效果是使當前(或“可啟用”)串連以不同顏色、更大的字型顯示。然後，當網頁的已訪問串連被重選時，又以不同顏色、更小字型顯示。這個樣式表的樣本如下:

  A:link    { color: red }A:active  { color: blue; font-size: 125% }A:visited { color: green; font-size: 85% }

  首行虛擬元素

  通常在報紙上的文章，例如Wall Street Journal中的，文本的首行都會以粗印體而且全部大寫地展示。CSS1包括了這個功能，將其作為一個虛擬元素。首行虛擬元素可以用於任何區塊層級元素(例如P、H1等等)。以下是一個首行虛擬元素的例子:

  P:first-line {  font-variant: small-caps;  font-weight: bold }

  首個字母虛擬元素

  首個字母虛擬元素用於加大(drop caps)和其他效果。含有已指定值選擇符的文本的首個字母會按照指定的值展示。一個首個字母虛擬元素可以用於任何區塊層級元素。例如:

  P:first-letter { font-size: 300%; float: left }

  會比普通字型加大三倍。

  層疊順序

  當使用了多個樣式表，樣式表需要爭奪特定選擇符的控制權。在這些情況下，總會有樣式表的規則能獲得控制權。以下的特性將決定互相對立的樣式表的結果。

  1. ! important

     規則可以用指定的! important 特指為重要的。一個特指為重要的樣式會淩駕於與之對立的其它相同權重的樣式。同樣地，當網頁製作者和讀者都指定了重要規則時，網頁製作者的規則會超越讀者的。以下是! important 聲明的例子:

     BODY { background: url(bar.gif) white;       background-repeat: repeat-x ! important }

  2. Origin of Rules (Author's vs. Reader's)

     正如以前所提及的，網頁製作者和讀者都有能力去指定樣式表。當兩者的規則發生衝突，網頁製作者的規則會淩駕於讀者的其它相同權重的規則。而網頁製作者和讀者的樣式表都超越瀏覽器的內建樣式表。

     網頁製作者應該小心地使用! important 規則，因為它們會超越使用者任何的! important 規則。例如，一個使用者由於視覺關係，會要求大字型或指定的顏色，而且這樣的使用者會有可能聲明確定的樣式規則為! important，因為這些樣式對於使用者閱讀網頁是極為重要的。任何的! important 規則會超越一般的規則，所以建議網頁製作者使用一般的規則以確保有特殊樣式需要的使用者能閱讀網頁。

  3. 選擇符規則: 計算特性

     基於它們的特性層級，樣式表也可以超越與之衝突的樣式表，一個較高特性的樣式永遠都淩駕於一個較低特性的樣式。這隻不過是計算選擇符的指定個數的一個統計遊戲。

     1. 統計選擇符中的ID屬性個數。
     2. 統計選擇符中的CLASS屬性個數。
     3. 統計選擇符中的HTML標記名格式。

     最後，按正確的順序寫出三個數字，不要加空格或逗號，得到一個三位元。( 注意，你需要將數字轉換成一個以三個數字結尾的更大的數。)相應於選擇符的最終數字列表可以很容易確定較高數字特性淩駕於較低數位。以下是一個按特性分類的選擇符的列表:

     #id1         {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */LI.red       {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */LI           {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */

  4. 特性的順序

     為了方便使用，當兩個規則具同樣權重時，取後面的那個。

 

 

以下內容轉自：http://www.cssk8.com/html/css_Tutorial/201007/21-2425.html　　

如果同個元素有兩個或以上衝突的CSS規則，瀏覽器有一些基本的規則來決定哪一個非常特殊而勝出。 它可能不像其它那麼重要，大部分案例你不需要擔心衝突，但大型而且複雜的CSS檔案，或有很多CSS檔案組成的，可能產生衝突。 選取器一樣的情況下後面的會覆蓋前面的屬性。比如： p { color: red; } p { color: blue; } p元素的元素將是藍色，因為遵循後面的規則。 然而，你不可能經常用相同的選取器衝突達到目的，當你使用嵌套選取器，合理的衝突來了。比如： div p { color: red; } p { color: blue; } 也許你看起來p元素在div元素裡面的顏色是藍色，就像後面p元素的規則，但是第一個選取器的特性卻是紅色。基本上，一個選取器越多特性，樣式衝突的時候將顯示它的樣式。 一組嵌套選取器的實際特性可以計算出來。基本的，使用ID選取器的值是100，使用class選取器的值是10，每個html選取器的值是1。它們加起來就可以計算出特性的值。 p的特性是1（一個html選取器） div p的特性是2（兩個html選取器） .tree的特性是10（1個class選取器） div p.tree的特性是1+1+10=12，（兩個html選取器，一個class選取器） #baobab的特性是100（1個ID選取器） body #content .alternative p的特性是112（兩個html選取器，一個ID選取器，一個類別選取器） 按照上面的規則，div p.tree的特性比div p高，body #content .alternative p又比它們兩個都高。 css優先順序的四大原則：寫點我自己的總結： 原則一： 繼承不如指定 如果某樣式是繼承來的永遠不如具體指定的優先順序高。 例子1： CODE:

我是多大字型大小？ 運行結果：.class3{ font-size: 12px; } 例子2： CODE:

我是多大字型大小？

運行結果：.class3{ font-size: 12px; } 注意：後面的幾大原則都是建立在“指定”的基礎上的。 原則二： #ID >.class >標籤選擇符 例子： CODE:

我是多大字型大小？ 運行結果：#id3 { font-size: 25px; } 原則三：越具體越強大。 解釋：當對某個元素的CSS選擇符樣式定義的越具體，層級越明確，該定義的優先順序就越高。 CODE:

我是多大字型大小？

運行結果：.class1 .class2 .class3{font-size: 25px;} 原則四：標籤#id >#id ; 標籤.class >.class 上面這條原則大家應該也都知道，看例子 CODE:

我是多大字型大小？ 我是多大字型大小？ 運行結果：span#id3{font-size:18px} | span.class3{font-size:18px} 很多人會有這樣的疑問，為什麼不把這個原則四歸入原則一形成： 【 標籤#ID >#ID >標籤.class >.class >標籤選擇符 >萬用字元 】 呢？或者將 “標籤.class” 看作多更為具體的 “.class” 從而歸入原則二呢？後面我將解答各位的疑惑，這就涉及到CSS的解析規律———這四大原則間也是有優先順序的，是不是有些糊塗了？別急，繼續 看。 *四大原則的權重 相信很多人都知道上面的四大原則，不要以為知道了這四大原則就能分辨css中那條代碼是起作用的，不信？那你5秒內能肯定的知道下面這段代碼，測試中的文字的字型大小嗎？ CODE:

我是多大字型大小？

為了大家方便閱讀，我去掉了一些代碼。 四大原則的權重就是: 原則一 >原則二 >原則三 >原則四 解釋： 首先遵循原則一 有指定開始使用下面的原則，無指定則繼承離他最近的定義。 然後開始原則二 1、比較最高優先順序的選擇符 例子： CODE:

我是多大字型大小？

運行結果：#id3{font-size:18px} 刪掉上面CSS中的前兩行可以得出，如果沒有最進階別的#ID會尋找.class 即使後面的CSS按照“原則二” 描述的再具體也無法突破原則一。 2、如果兩條CSS的如果最高選擇符優先順序一樣，則比較他們的數量 例子： CODE:

我是多大字型大小？

運行結果:.class1 .class2 #id3{font-size:14px} 3、如果最高選擇符層級和數量都一樣，則按照原則二比較他們下一級，以此類推。 例子1： CODE:

我是多大字型大小？

[color=Orange] 運行結果:#id1 .class2 .class3{font-size:14px} [/color] *最進階選擇符的位置沒有高下之分，論證：[code]CODE:

我是多大字型大小？

上例中更換3條CSS的先後可以得出，哪條位於最後，哪條起作用。說明他們的層級一樣，後面的將覆蓋前面的。 *將原則四歸入原則二的不合理性，論證： CODE:

我是多大字型大小？

#id1 .class2 .class3{font-size:12px} 可以看到span#id3並不比#id1高出一個層級。 無結果開始原則三 如果比較結果，選擇符從最進階開始都對應，層級上的數量也相同，則開始比較誰更具體。 例子： CODE:

我是多大字型大小？

#id1 .class2 span{font-size:14px} 當然也可以理解為在原則二層層比較中“少一個層級的樣式”，缺少的那個層級沒有“層級較多的樣式”多出的那個層級的層級高。（繞口令） *將原則四歸入原則三的不合理性，論證： CODE:

我是多大字型大小？

上例中可以看出，如果將原則四併入原則三，將span.class3看作兩層，那麼應該和.class2 .class3層級一樣多，那麼應該顯示12px,而事實不是這樣。 最終對決原則四 如果還分不出結果，則開始原則四的比較： 例子1： CODE:

我是多大字型大小？

.class1 p.class2 .class3{font-size:14px} 先看是否描述到該元素，再看最進階別的等級和數量（#id>class，html#id>#id），同級層級&數量一致時，再看下一級屬性。