最近在惡補css樣式表的基礎知識。上次研究了css樣式表之沖突問題詳解 。這次是對 css 繼承 特性的學習。
什么是css 繼承？
要想了解css樣式表的繼承，我們先從文檔樹（HTML DOM）開始。文檔樹由HTML元素組成。
文檔樹和家族樹類似，也有祖先、后代、父親、孩子和兄弟^_^。這很容易理解吧，筆者在這里就不一一贅述了。希望深入了解的朋友請google之。
那么CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。
下面舉個例子，有如下html代碼片段：
<p>
CSS樣式表<em>繼承特性</em>的演示代碼
</p>
需要注意的是em是包含在p之內的。
當我們指定p的css樣式時，看看em會有什么變化呢？
<style>
p { color:red; }
</style>
在瀏覽器中p 和 em 字體同時變紅。我們並沒有指定em的樣式，但em繼承了它的父親元素p的樣式特性。
也許各位看了以后覺得這是理所當然的，根本不值一哂^_^。其實，這就是繼承。在不知不覺中影響這我們的代碼（想像一下如果沒有繼承特性，你就需要為每一個元素定義顏色屬性，這是多么痛苦的一件事情！！！=_=!）。
當然也不是所有的css屬性都會被子類繼承，例如border屬性。繼續利用上面的一段代碼。我們為p元素添加border屬性
p { border: 1px solid red; }
還好，p的border屬性沒有被em繼承，否則是不是怪怪的呢？！^_^
那么，哪些屬性是可以繼承的呢？css樣式表屬性可以繼承的有如下：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
嚇？！這么多？！怎么記得住呢？別急，我們來理一理這些屬性。
文本相關屬性：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
列表相關屬性：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
還有一個屬性比較重要，color屬性。
值得一說的是font-size。很顯然font-size是可以被繼承的。但是它的方式有一些特別。Font-size的子類繼承的不是實際值，而是計算后的值。下面解釋下為什么font-size會這么特別呢？
看一個例子：
<p>
字體大小屬性<em>繼承特性</em>的演示代碼
</p>
為p定義字體大小為默認字體的80％。
p { font-size:80%}
如果font-size繼承的是相對值，那么結果會怎么樣呢？依照這樣的邏輯，em的font-size為80％X80％=64%，網頁看起來應該是這樣的。
但，實際情況卻不是如此。em內的文字並沒有改變大小，而是和p保持一致。
下面舉三個例子，讓各位有個直觀的認識
p { font-size:14px;}
由於瀏覽器默認字體大小是16px，而p定義了字體14px，所以em繼承了p的字體大小屬性，也是14px；
| 元素 | 值 | 計算后的值 |
|---|---|---|
| 默認字體大小 | 約16像素 | |
| <body> | 未指定 | 約16px |
| <p> | 14px | 14px |
| <em> | 未指定 | 繼承值=14px |
p { font-size:85%;}
瀏覽棋默認字體大小16px,而p定義了字體大小(16px X 85% = 13.6px). 13.6px這個值將被子元素em繼承。
| 元素 | 值 | 計算后的值 |
|---|---|---|
| 默認字體大小 | 約16像素 | |
| <body> | 未指定 | 約16px |
| <p> | 85% | 16px X 85% = 13.6px |
| <em> | 未指定 | 繼承值=13.6px |
p { font-size:0.85em;}
瀏覽棋默認字體大小16px,而p定義了字體大小(16px X 0.85em = 13.6px). 13.6px這個值將被子元素em繼承。
| 元素 | 值 | 計算后的值 |
|---|---|---|
| 默認字體大小 | 約16像素 | |
| <body> | 未指定 | 約16px |
| <p> | 0.85em | 16px X 0.85em= 13.6px |
| <em> | 未指定 | 繼承值=13.6px |
上面的例子都比較簡答，再來個復雜的
body { font-size: 85%; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }
瀏覽棋默認字體大小16px,而body定義了字體大小(16px X 85% = 13.6px). 如果子元素沒有指定字體大小13.6px這個值將被子元素繼承。
| 元素 | 值 | 計算后的值 |
|---|---|---|
| 默認字體大小 | 約16像素 | |
| <body> | 85% | 16px X 85% = 13.6px |
| <h1> | 200% | 繼承值＝13.6px X 200%= 27.2px |
| <h2> | 150％ | 繼承值＝13.6px X 150%= 20.4px |
| <p> | 未指定 | 繼承值=13.6px |
| <em> | 未指定 | 繼承值=13.6px |
說到這里，CSS樣式表的繼承基本上講完了。在實踐中，還有一個特性值需要解釋一下，這和繼承的應用也是息息相關的。
樣式表中的特性值描述了不同規則的相對權重，它的基本規則是：
◆統計選擇符中的ID屬性個數。
◆統計選擇符中的CLASS屬性個數。
◆統計選擇符中的HTML標記名格式。
最后，按正確的順序寫出三個數字，不要加空格或逗號，得到一個三位數。(注意，你需要將數字轉換成一個以三個數字結尾的更大的數)。相應於選擇符的最終數字列表可以很容易確定較高數字特性凌駕於較低數字的。
以下是一個按特性分類的選擇符的列表：
H1{color:blue;} 特性值為：1
PEM{color:purple;} 特性值為：2
.apple{red;} 特性值為：10
P.bright{color:yellow;} 特性值為：11
P.brightEM.dark{color:brown;} 特性值為：22
#id316{color:yellow} 特性值為：100
從上表我們可以看出#id316具有更高的特殊性，因而它有更高的權重。當有多個規則都能應用於同一個元素時，權重越高的樣式將被優先采用。而繼承屬性的特性值為0；也就是說，任何一條與css繼承值沖突的屬性值都會覆蓋繼承的屬性值！！！
這點是需要各位注意的，Enjoy it！！