溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“CSS中級聯和繼承的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS中級聯和繼承的示例分析”這篇文章吧。
1.在HTML中使用CSS樣式表的三種方式：
（1）內聯的樣式表。
eg：<em style="background-white">LIN</em>
（2）嵌入式樣式表。
即在<head>標簽內嵌入<style>標簽及具體的樣式設置內容。
（3）外部鏈接的樣式表。
2.級聯的順序
（1）
首先要根據起源（origin）將規則分類。
具體優先順序如下：
頁面作者（author）設置的規則 > 用戶（user）規則 > 瀏覽器（browser）規則
（2）
然后是基于選擇符和特殊性的規則排序：
1.內聯樣式表的優先級最高。
2.id選擇符，當有多個id選擇符時，具有id選擇符多的規則勝出。
3.如果沒有id選擇符，或者數量相同，那么規則中有最多類或偽類的規則有較高優先級。
4.如果類（或是沒有類），那么規則中有最多元素數量的，優先級較高。
5.如果id，class，和元素數量都相同，則最近聲明的原則有最高優先級。
（3）嵌入式樣式表和外部鏈接樣式表的優先級，當其他權重相當時，最近聲明的規則優先級高。
即<head>標簽中，link標簽與style標簽的先后順序，第二個聲明的優先級高。
3.級聯和HTML屬性
HTML中的align，color，face，vlink，background也會影響頁面的外觀。
<img> 標簽的 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 語法：<p style="color:red">
[
<font> 規定文本的字體、字體尺寸、字體顏色。
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:<font >This is some text!</font>
在 HTML 4.01 中，不贊成使用 font 元素的 face 屬性；在 XHTML 1.0 Strict DTD 中，不支持 font 元素的 face 屬性。
請使用 CSS 代替。
CSS 語法：<p style="font-family: verdana">
vlink 屬性文檔中已被訪問鏈接的顏色。
eg：<body >
在 HTML 4.01 中，不贊成使用 body 元素的 vlink 屬性；在 XHTML 1.0 Strict DTD 中，不支持 body 元素的 vlink 屬性。
請使用 CSS 代替。
CSS 語法（在 <head> 部分）：<style>a:visited {color: #FF0000}</style>
這些屬性與css規則相沖突時，總是被css規則覆蓋。
4.在規則中使用！important
用！important 指定的規則比其他規則都重要。
eg： em { color ：bule ！important；}
注意：用戶首創的！important規則優先于作者的規則。
用戶定義的樣式表應該聲明是！important。
5. @import規則，導入文件。
eg：h2 {color：red；}
@import url（“style.css”）;
h2{color：green；}
以上代碼，最終h2為紅色。因為默認使用導入的樣式表出現在原始樣式表規則之前。
6.繼承
（1）注意display，border，margin，padding屬性是不繼承的。
（2）background-color不是繼承，在沒有設置時，它的默認值是特別值transparent。
（3）繼承相對值時，在傳遞給子代之前，首先計算該值。
（4）指定繼承：inherit特殊值
eg：div .standout{ border :1px solid blue ;}
div .standout{ border:inhert;}
注意：css 1發行時，作者的！important樣式優先于用戶的！important樣式。
css2中，用戶的！important樣式優先于作者的！important樣式。
以上是“CSS中級聯和繼承的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
