最近在惡補(bǔ)css樣式表的基礎(chǔ)知識(shí)。上次研究了css樣式表之沖突問(wèn)題詳解。這次是對(duì)css繼承特性的學(xué)習(xí)。
什么是css 繼承？
要想了解css樣式表的繼承，我們先從文檔樹（HTML DOM）開(kāi)始。文檔樹由HTML元素組成。
文檔樹和家族樹類似，也有祖先、后代、父親、孩子和兄弟^_^。這很容易理解吧，筆者在這里就不一一贅述了。希望深入了解的朋友請(qǐng)google之。
那么CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。
下面舉個(gè)例子，有如下html代碼片段：
CSS樣式表繼承特性的演示代碼
需要注意的是em是包含在p之內(nèi)的。
當(dāng)我們指定p的css樣式時(shí)，看看em會(huì)有什么變化呢？
p { color:red; }
在瀏覽器中p 和 em 字體同時(shí)變紅。我們并沒(méi)有指定em的樣式，但em繼承了它的父親元素p的樣式特性。
也許各位看了以后覺(jué)得這是理所當(dāng)然的，根本不值一哂^_^。其實(shí)，這就是繼承。在不知不覺(jué)中影響這我們的代碼（想像一下如果沒(méi)有繼承特性，你就需要為每一個(gè)元素定義顏色屬性，這是多么痛苦的一件事情?。。?_=!）。
當(dāng)然也不是所有的css屬性都會(huì)被子類繼承，例如border屬性。繼續(xù)利用上面的一段代碼。我們?yōu)閜元素添加border屬性
p { border: 1px solid red; }
還好，p的border屬性沒(méi)有被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
嚇？！這么多？！怎么記得住呢？別急，我們來(lái)理一理這些屬性。
文本相關(guān)屬性：
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
列表相關(guān)屬性：
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
還有一個(gè)屬性比較重要，color屬性。
值得一說(shuō)的是font-size。很顯然font-size是可以被繼承的。但是它的方式有一些特別。Font-size的子類繼承的不是實(shí)際值，而是計(jì)算后的值。下面解釋下為什么font-size會(huì)這么特別呢？
看一個(gè)例子：
字體大小屬性繼承特性的演示代碼
為p定義字體大小為默認(rèn)字體的80％。
p { font-size:80%}
如果font-size繼承的是相對(duì)值，那么結(jié)果會(huì)怎么樣呢？依照這樣的邏輯，em的font-size為80％X80％=64%，網(wǎng)頁(yè)看起來(lái)應(yīng)該是這樣的。
但，實(shí)際情況卻不是如此。em內(nèi)的文字并沒(méi)有改變大小，而是和p保持一致。
下面舉三個(gè)例子，讓各位有個(gè)直觀的認(rèn)識(shí)
p { font-size:14px;}
由于瀏覽器默認(rèn)字體大小是16px，而p定義了字體14px，所以em繼承了p的字體大小屬性，也是14px；
元素值計(jì)算后的值
默認(rèn)字體大小約16像素
未指定約16px
14px14px
未指定繼承值=14px
p { font-size:85%;}
瀏覽棋默認(rèn)字體大小16px,而p定義了字體大小(16px X 85% = 13.6px). 13.6px這個(gè)值將被子元素em繼承。
元素值計(jì)算后的值
默認(rèn)字體大小約16像素
未指定約16px
85%16px X 85% =13.6px
未指定繼承值=13.6px
p { font-size:0.85em;}
瀏覽棋默認(rèn)字體大小16px,而p定義了字體大小(16px X 0.85em = 13.6px). 13.6px這個(gè)值將被子元素em繼承。
元素值計(jì)算后的值
默認(rèn)字體大小約16像素
未指定約16px
0.85em16px X 0.85em=13.6px
未指定繼承值=13.6px
上面的例子都比較簡(jiǎn)答，再來(lái)個(gè)復(fù)雜的
body { font-size: 85%; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }
瀏覽棋默認(rèn)字體大小16px,而body定義了字體大小(16px X 85% = 13.6px). 如果子元素沒(méi)有指定字體大小13.6px這個(gè)值將被子元素繼承。
元素值計(jì)算后的值
默認(rèn)字體大小約16像素
85%16px X 85% =13.6px
200%繼承值＝13.6px X 200%=27.2px
150％繼承值＝13.6px X 150%=20.4px
未指定繼承值=13.6px
未指定繼承值=13.6px
說(shuō)到這里，CSS樣式表的繼承基本上講完了。在實(shí)踐中，還有一個(gè)特性值需要解釋一下，這和繼承的應(yīng)用也是息息相關(guān)的。
樣式表中的特性值描述了不同規(guī)則的相對(duì)權(quán)重，它的基本規(guī)則是：
◆統(tǒng)計(jì)選擇符中的ID屬性個(gè)數(shù)。
◆統(tǒng)計(jì)選擇符中的CLASS屬性個(gè)數(shù)。
◆統(tǒng)計(jì)選擇符中的HTML標(biāo)記名格式。
最后，按正確的順序?qū)懗鋈齻€(gè)數(shù)字，不要加空格或逗號(hào)，得到一個(gè)三位數(shù)。(注意，你需要將數(shù)字轉(zhuǎn)換成一個(gè)以三個(gè)數(shù)字結(jié)尾的更大的數(shù))。相應(yīng)于選擇符的最終數(shù)字列表可以很容易確定較高數(shù)字特性凌駕于較低數(shù)字的。
以下是一個(gè)按特性分類的選擇符的列表：
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具有更高的特殊性，因而它有更高的權(quán)重。當(dāng)有多個(gè)規(guī)則都能應(yīng)用于同一個(gè)元素時(shí)，權(quán)重越高的樣式將被優(yōu)先采用。而繼承屬性的特性值為0；也就是說(shuō)，任何一條與css繼承值沖突的屬性值都會(huì)覆蓋繼承的屬性值?。?！
這點(diǎn)是需要各位注意的，Enjoy it??！
