站長(zhǎng)資訊網(wǎng)繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個(gè)特定html標(biāo)簽元素，還可應(yīng)用于其后代元素。CSS繼承是指設(shè)置父級(jí)的CSS樣式，父級(jí)及以下的子級(jí)元素都具有此屬性。CSS繼承的作用：給父元素設(shè)置一些屬性，子元素也可以使用。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
CSS繼承
繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個(gè)特定html標(biāo)簽元素，而且應(yīng)用于其后代。
CSS繼承可定義為特定的css屬性向下傳遞到子孫元素，就是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式，即子元素可以繼承父元素的屬性。
繼承性的作用：給父元素設(shè)置一些屬性，子元素也可以使用。
例如下面的代碼，div中包含2個(gè)p標(biāo)簽，1個(gè)span標(biāo)簽，當(dāng)給div設(shè)置字體顏色為紅色時(shí)，他的子標(biāo)簽會(huì)繼承父元素的屬性，因而會(huì)顯示紅色。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { color: red; } </style> </head> <body> <div> <p>蘋果</p> <p>香蕉</p> <span>葡萄</span> </div> </body> </html>
當(dāng)然了，上述例子中我們的屬性是可以被繼承的，但是并不是所有屬性都可以被繼承的，那么css有哪些屬性可以繼承呢？下面我們來(lái)總結(jié)一下。
css有哪些屬性可以繼承？
1、css中有繼承性的屬性之字體屬性中的：
font：字體。font-family：規(guī)定元素的字體。font-weight：設(shè)置字體的粗細(xì)。
font-size：設(shè)置字體的尺寸。font-style：定義字體的風(fēng)格。
font-variant：設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。
font-stretch：對(duì)當(dāng)前的 font-family 進(jìn)行伸縮變形。所有主流瀏覽器都不支持。
font-size-adjust：為某個(gè)元素規(guī)定一個(gè) aspect 值，這樣就可以保持首選字體的 x-height。
2、css中有繼承性的屬性之文本屬性中的：
text-indent：文本縮進(jìn)。text-align：文本水平對(duì)齊。line-height：行高。word-spacing：增加或減少單詞間的空白（即字間隔）。
letter-spacing：增加或減少字符間的空白（字符間距）。text-transform：控制文本大小寫。direction：規(guī)定文本的書寫方向。
color：文本顏色
3、css中有繼承性的屬性之元素可見性：
visibility：規(guī)定元素是否可見。
4、css中有繼承性的屬性之表格布局屬性：
caption-side：設(shè)置表格標(biāo)題的位置。border-collapse：設(shè)置是否將表格邊框折疊為單一邊框。
border-spacing：設(shè)置分隔單元格邊框的距離。empty-cells：設(shè)置是否顯示表格中的空單元格。
table-layout：設(shè)置顯示單元、行和列的算法。
5、css中有繼承性的屬性之列表布局屬性：
list-style-type：修改用于列表項(xiàng)的標(biāo)志類型。list-style-image：對(duì)各標(biāo)志使用一個(gè)圖像。
list-style-position：可以確定標(biāo)志出現(xiàn)在列表項(xiàng)內(nèi)容之外還是內(nèi)容內(nèi)部。
list-style：簡(jiǎn)寫列表樣式，用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中。
6、css中有繼承性的屬性之生成內(nèi)容屬性：
quotes：設(shè)置嵌套引用的引號(hào)類型。
7、css中有繼承性的屬性之光標(biāo)屬性：
cursor：規(guī)定要顯示的光標(biāo)的類型（形狀）
8、css中有繼承性的屬性之頁(yè)面樣式屬性：
page：規(guī)定元素應(yīng)該被顯示的頁(yè)面特定類型。page-break-inside：設(shè)置在表格元素內(nèi)部避免進(jìn)行分頁(yè)的分頁(yè)行為。
windows：設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁(yè)時(shí)必須在頁(yè)面頂部保留的最少行數(shù)。
orphans：設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁(yè)時(shí)必須在頁(yè)面底部保留的最少行數(shù)。
9、css中有繼承性的屬性之聲音樣式屬性
speak：設(shè)置或檢索聲音是否給出。speak-punctuation：設(shè)置或檢索標(biāo)點(diǎn)符號(hào)如何發(fā)音。
speak-numeral：設(shè)置或檢索數(shù)字如何發(fā)音。speak-header：設(shè)置或檢索表格頭與其后的一系列單元格發(fā)生多少次關(guān)系。
speech-rate：設(shè)置或檢索發(fā)音速度。volume：設(shè)置或檢索音量。
voice-family：設(shè)置或檢索當(dāng)前聲音類型。pitch：設(shè)置或檢索音高。
pitch-range：設(shè)置或檢索聲音的平滑程度。stress：和pitch-range相似。設(shè)置或檢索當(dāng)前聲音波形的最高峰值。
richness：設(shè)置或檢索當(dāng)前聲音的音色。azimuth：設(shè)置或檢索當(dāng)前聲音的音場(chǎng)角度。
elevation：設(shè)置或檢索當(dāng)前聲音的音源仰角。
10、所有元素可以繼承的屬性：visibility、cursor
11、內(nèi)聯(lián)元素可以繼承的屬性：
（1）字體系列屬性
（2）除text-indent、text-align之外的文本系列屬性
12、塊級(jí)元素可以繼承的屬性：text-indent、text-align
（學(xué)習(xí)視頻分享：css視頻教程）
多種樣式混合應(yīng)用
既然有了繼承性，那么在樣式表中的應(yīng)用上可能會(huì)有些讀者搞不清，多個(gè)樣式表同時(shí)應(yīng)用到一個(gè)對(duì)象上會(huì)發(fā)生什么情形呢？先舉個(gè)簡(jiǎn)單的例子：
樣式定義：
.apple{color:red;}H1{color:yellow;}
應(yīng)用舉例代碼：
<H1 CLASS=”apple”>這兒的蘋果好紅啊</H1>
應(yīng)用舉例效果：因?yàn)檫x擇符H1和.apple都匹配上面的H1元素，那么到底瀏覽器會(huì)應(yīng)用哪一個(gè)呢？通過(guò)在瀏覽器中觀察，我們發(fā)現(xiàn)這段文字應(yīng)用了.apple這個(gè)樣式，所以它顯示的是紅色。這是因?yàn)閮蓷l規(guī)則的特殊性不一樣，CSS規(guī)則必須這樣進(jì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;} 特性值為：001 P EM {color:purple;} 特性值為：002 .apple {red;} 特性值為：010 P.bright {color:yellow;} 特性值為：011 P.bright EM.dark {color:brown;} 特性值為：022 #id316 {color:yellow} 特性值為：100
從上表我們可以看出#id316具有更高的特殊性，因而它有更高的權(quán)重。當(dāng)有多個(gè)規(guī)則都能應(yīng)用于同一個(gè)元素時(shí)，權(quán)重越高的樣式將被優(yōu)先采用。
CSS繼承的優(yōu)先級(jí)問(wèn)題
上面我們討論了CSS的繼承性和特殊性，在特殊性的框架下，被繼承的特性值為0，這就意味著任何顯示聲明的規(guī)則將會(huì)覆蓋其繼承樣式。因此，不管一條規(guī)則具有多高的權(quán)重，如果沒(méi)有其他規(guī)則能應(yīng)用于這個(gè)繼承元素，那么它也只是個(gè)被繼承的規(guī)則而已，舉例說(shuō)明。
樣式定義：
BODY {background:black;} LI {color:gray;} UL.white {color:white}
應(yīng)用舉例代碼：
<ul> <li>舉例列表一</li> <li>舉例列表二</li> <li>舉例列表三</li> <li>舉例列表四</li> </ul>
有些讀者可能認(rèn)為除包含.white類的列表項(xiàng)顯示為白色外，其余所有的列表項(xiàng)都應(yīng)該是灰色的。然而情況并非如此。
為什么會(huì)出現(xiàn)這樣的情況呢？因?yàn)閹нx擇符LI的顯式聲明的權(quán)值比從UL.white規(guī)則那里繼承過(guò)來(lái)的權(quán)值要大，所以每個(gè)列表項(xiàng)都是灰色的。
可能有些地方不是很好理解，大家多思考一下就會(huì)明白，平時(shí)在應(yīng)用樣式表的時(shí)候多留意思考一下。
下面我們?cè)賮?lái)看一個(gè)例子，若給定如下所示的標(biāo)記，則EM強(qiáng)調(diào)文字將會(huì)是灰色的，而非黑色，因?yàn)镋M規(guī)則的權(quán)值要大于從H1元素繼承來(lái)的權(quán)值：
樣式定義：
H1#id316 {color:black;} 特性值為：101 EM {color:gray;} 特性值為：1
應(yīng)用舉例代碼：
<H1 ID=”id316”>深入探討<EM>CSS的繼承性</EM></H1>
這是因?yàn)榈诙lEM規(guī)則的特性值（1）要比被繼承的特性值（0）要大，事實(shí)上規(guī)定H1#id316的原始特性值（101）對(duì)其繼承值沒(méi)有影響，仍舊為0。
小技巧：
如果想讓H1始終為黑色，而EM文字在其他情況下紅色，那么下面的樣式表設(shè)置就是一個(gè)很好的方法：
H1，H1 EM {color:black;} 特性值為：1，2 EM {color:red;} 特性值為：1
給定這個(gè)規(guī)則后，除在H1元素內(nèi)的任何EM文字就都是紅色，而H1內(nèi)的EM文字仍舊為黑色，由于其選擇符分組，在第一條規(guī)則中就有兩條有效的規(guī)則（一條是對(duì)H1的，另一條是對(duì)H1 EM的）也就有兩個(gè)特性值——每條規(guī)則一個(gè)。
上面我們討論了多個(gè)樣式規(guī)則同時(shí)應(yīng)用于同一對(duì)象時(shí)，哪個(gè)規(guī)則會(huì)被最終應(yīng)用的一些情況，可能有些細(xì)心的讀者會(huì)說(shuō)，那STYLE元素呢？對(duì)啊，HTML代碼中可以直接應(yīng)用內(nèi)聯(lián)樣式STYLE的嘛。那么它的特性值如何呢？
回答是這樣的：帶有STYLE的元素在CSS1下其特性值為100，盡管類似于#ID316這樣的ID選擇符的特性值也為100，但在實(shí)際應(yīng)用中，STYLE這一權(quán)值會(huì)更高一些，因?yàn)镾TYLE元素的值看起來(lái)要比多數(shù)普通規(guī)則的權(quán)值大。所以我們可以看出內(nèi)聯(lián)樣式具有高的特性值，具體的例子我們就不舉了，大家可以自己試試。
人為定義CSS繼承優(yōu)先級(jí)
在制作網(wǎng)頁(yè)的過(guò)程中，我們可能想要設(shè)置某個(gè)規(guī)則比其他的規(guī)則更重要，CSS中允許這樣設(shè)置，它們被稱為重要規(guī)則（important rule）。這是根據(jù)其聲明的方式和它們的自然屬性來(lái)命名的。通過(guò)在一條規(guī)則的分號(hào)前插入！important這樣一個(gè)短語(yǔ)來(lái)標(biāo)記一條重要規(guī)則，比如說(shuō)：
p.apple {color:#red !important; background:white;}
顏色值#red被標(biāo)記為!important，而背景色white未被標(biāo)記，如果需要二條規(guī)則都是重要的話，那么每條規(guī)則都需要標(biāo)上!important。
正確地放置!important的位置是很重要的，否則整條規(guī)則將為無(wú)效。!important總是放在規(guī)則聲明的最后，在分號(hào)之前。
標(biāo)記為!important的規(guī)則具有最高的權(quán)值，也就是說(shuō)他沒(méi)有具體的特性值，但是比其他的權(quán)值都要大。需要注意的是，雖然制作者定義的樣式比用戶定義的樣式具有更高權(quán)值時(shí)，但!important規(guī)則恰恰相反：重要的用戶定義規(guī)則要比制作者定義的樣式具有更高權(quán)值，即使是標(biāo)記為!important的重要規(guī)則也是如此。
看了這么多文字介紹后，我們來(lái)舉個(gè)例子看一下：
樣式定義：
h1 {color:gray !important;}
應(yīng)用舉例代碼：
<h1 STYLE=”color:black;”>看這兒！</h1>
應(yīng)用舉例效果:
!important規(guī)則會(huì)覆蓋內(nèi)聯(lián)STYLE屬性的內(nèi)容，所以結(jié)果文字是灰色的而不是黑色的。
還有最后一種需要考慮的情況：繼承值總是具有特性值0的特點(diǎn)，即使是從帶有!important的規(guī)則繼承的值也是如此，在匹配重要規(guī)則的元素之外，重要性也會(huì)隨之消失，這點(diǎn)是需要我們特別注意的！
