深入了解CSS級聯和繼承的使用

 1.在HTML中使用CSS樣式表的三種方式：

（1）內聯的樣式表。

eg：LIN

（2）嵌入式樣式表。

即在head>標籤內嵌入

（3）外部連結的樣式表。

2.級聯的順序

（1）

首先要根據起源（origin）將規則分類。

具體優先順序如下：

頁面作者（author）設定的規則> 使用者（user）規則> 瀏覽器（browser）規則

（2）

接著是基於選擇符和特殊性的規則排序：

　　　　1.內聯樣式表的優先級最高。

　　　　2.id選擇符，當有多個id選擇符時，具有id選擇符多的規則勝出。

　　　　3.如果沒有id選擇符，或者數量相同，那麼規則中有最多類別或偽類的規則有較高優先級。

　　　　4.如果類別（或是沒有類別），那麼規則中有最多元素數量的，優先順序較高。

　　　　5.如果id，class，和元素數量都相同，則最近宣告的原則有最高優先權。

（3）嵌入式樣式表和外部連結樣式表的優先級，當其他權重相當時，最近聲明的規則優先級高。

即

標籤中，link標籤與style標籤的先後順序，第二個宣告的優先順序高。

3.級聯和HTML屬性

    HTML中的align，color，face，vlink，background也會影響頁面的外觀。

標籤的 align 屬性定義了影像相對於周圍元素的水平和垂直對齊方式。

HTML 4.01 不建議使用 align 屬性，XHTML 1.0 Strict DTD 不支援該屬性，同時 HTML 5 也不再支援該屬性。

color 屬性規定 font 元素中文字的顏色。

在 HTML 4.01 中，不贊成使用 font 元素的 color 屬性；在 XHTML 1.0 Strict DTD 中，不支援 font 元素的 color 屬性。

請使用 CSS 代替。

CSS 語法：

[

規定文字的字型、字型尺寸、字型顏色。

eg:This is some text!

This is some text!

This is some text!

在HTML 4.01 中，font 元素不被贊成使用。

在 XHTML 1.0 Strict DTD 中，font 元素不被支援。

]

face 屬性規定 font 元素中文字的字型。

eg:This is some text!

在HTML 4.01 中，不贊成使用font 元素的face 屬性；在XHTML 1.0 Strict DTD 中，不支援font 元素的face 屬性。

請使用 CSS 代替。

CSS 語法：

vlink 屬性文件中已被存取連結的顏色。

eg：

在HTML 4.01 中，不贊成使用body 元素的vlink 屬性；在XHTML 1.0 Strict DTD 中，不支援body 元素的vlink 屬性。

請使用 CSS 代替。

CSS 語法（在

部分）：

#這些屬性與css規則相衝突時，總是被css規則覆蓋。

4.在規則中使用！ important

用！ important 指定的規則比其他規則都重要。

eg： em { color ：bule ！ important；}

注意：用戶首創的！ important規則優先於作者的規則。

        使用者定義的樣式表應該宣告是！ important。

5. @import規則，匯入檔案。

eg：h1 {color：red;}

##     @import url（「style.css」）;

    /*style.css*/

   h1{color：green；}

以上程式碼，最終h1為紅色。因為預設使用匯入的樣式表出現在原始樣式表規則之前。

6.

繼承

（1）注意display，border，margin，padding屬性是不繼承的。

（2）background-color不是繼承，在沒有設定時，它的預設值是特別值transparent。

（3）繼承相對值時，在傳遞給子代之前，先計算該值。

（4）指定繼承：inherit特殊值

eg：p .standout{ border :1px solid blue ;}

      p .standout{ border:inhert;}#:inhert;}

注意：css 1發行時，作者的！ important樣式優先於使用者的！ important樣式。

        css2中，使用者的！ important樣式優先於作者的！ important樣式。

以上是深入了解CSS級聯和繼承的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！