css那些事兒（3）樣式優先級和樣式表的管理

1.樣式覆蓋

1 p {
2     color:#0000FF; /* 將文字定義爲藍色 */
3 }
4 p {
5     color:#FF0000;
6 }

同一選擇器，同一屬性，後面定義的會覆蓋前面定義的。

2.樣式繼承

1 body {
2     font-size:12px;
3 }
4 p {
5     color:#FF0000;
6 }

p也將用body定義的文字屬性。

3.根據樣式定義的優先級

網頁中定義樣式分爲四種，按優先順序排序：

• html標籤中style屬性，
• 開發者寫的css文件（包括.css文件和<style></style>標籤兩種形式）
• 使用瀏覽器瀏覽網頁的用戶定義的樣式，
• 瀏覽器默認的樣式。

另外，容許開發者（用戶）對樣式有更多的控制力，可使用!important關鍵字對屬性設置聲明，其優先級高於以上四種。

!imoprtant的使用方式：

1 p {
2     color:blue !important;
3 }

 

4.根據選擇器的優先級

• 標籤選擇器、僞類及僞對象：優先積分1
• 類選擇器、屬性選擇器：優先積分10
• ID選擇器：優先積分100
• 其餘選擇器（通配符等）：0

根據以上優先積分，統計樣式表中出現的每一個選擇器的個數，再相加，最終得出的分數就是某個選擇器的優先級別。

例如：

p = 1

p.myColor = 1+10 = 11

.myColor = 10

#myColor = 100

再次說明：!important關鍵字 > style屬性 > 以上選擇器

5.不一樣引入方式的覆蓋

css樣式引入html頁面4種方式：

• style屬性：行間樣式
• <style></style>標籤：內嵌樣式表
• <link/>標籤：外聯樣式表
• @import url()：導入樣式表，

其中行間樣式和內嵌樣式表，若是須要修改樣式，會修改html頁面，不推薦使用。

外聯樣式表是最長使用的，能夠吧樣式和html頁分離

導入樣式表能夠達到分離的效果，可是瀏覽器解析是最後再解析的，因此可能會有打開頁面的過程當中無樣式，直到頁面加載完纔會加載樣式的狀況出現。

導入樣式表能夠在一個樣式文件中再次導入其餘的樣式表，從而能夠用一個樣式表管理全部樣式表，下降html文檔的複雜性。

在樣式表中導入多個樣式表文件時，必須放在最前面。

由於先考慮導入樣式的文件，再考慮樣式表，因此樣式表中的樣式會覆蓋導入樣式文件中的樣式。

實際狀況：

情形1：

html

 

1 <link rel="stylesheet" href="樣式的覆蓋.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
2 <style type="text/css">
3 p {
4     color:red;
5 }
6 </style>

 

樣式的覆蓋.css

1 p{
2     color:green;
3 }

實際顏色：紅色

情形2：

1 <style type="text/css">
2 p {
3     color:red;
4 }
5 </style>
6 <link rel="stylesheet" href="樣式的覆蓋.css" type="text/css" media="screen" title="no title" charset="utf-8"/>

樣式的覆蓋.css 同情形1

實際顏色：綠色

情形3：

html

<style type="text/css">
@import url("樣式的覆蓋.css");
p {
    color:red;
}
</style>

紅色，無論@import放在前面仍是後面

情形4：

html 同情形2

樣式的覆蓋.css

1 @import url("樣式的導入.css");
2 p{
3     color:green;
4 }

樣式的導入.css

1 p{
2     color:blue;
3 }

綠色

情形5：

html 同情形2

樣式的覆蓋.css 同情形4

樣式的導入

1 p{
2     color:blue !important;
3 }

綠色，!important此時沒有提高優先級的效果

6.樣式表的規劃與管理

簡單站點能夠只使用一個css樣式文件。

大型複雜站點，能夠將css樣式文件分爲2部分：頁面的全局定義以及處理頁面基本佈局的css樣式文件、處理細節方面的css樣式文件。

全局文件在佈局肯定以後就不多再須要去動，減小修改樣式過程當中意外地破壞頁面佈局等的可能性。

細節文件還能夠再細分，好比表單的、文字信息、列表等。但不建議這樣作，由於會增長http請求的次數。