如何理解CSS繼承性及其應(yīng)用

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何理解CSS繼承性及其應(yīng)用，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),保康企業(yè)網(wǎng)站建設(shè),?？灯放凭W(wǎng)站建設(shè),網(wǎng)站定制,保康網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,?？稻W(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

你對CSS繼承性的概念和使用是否了解，這里和大家分享一下，CSS繼承特性最典型的應(yīng)用通常發(fā)揮在整個網(wǎng)頁的樣式預(yù)設(shè)，需要指定為其它樣式的部份設(shè)定在個別元素里即可，同時CSS繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個特定的元素，還可以應(yīng)用于它的后代。

CSS繼承性及其應(yīng)用

所謂CSS繼承性是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)。CSS繼承特性最典型的應(yīng)用通常發(fā)揮在整個網(wǎng)頁的樣式預(yù)設(shè)，需要指定為其它樣式的部份設(shè)定在個別元素里即可。這項特性可以給網(wǎng)頁設(shè)計者提供更理想的發(fā)揮空間。但同時繼承也有很多規(guī)則，應(yīng)用的時候容易讓人迷惑，donger今天就專門和大家聊聊這方面的應(yīng)用。

正文

CSS是層疊樣式表（CascadingStyleSheets）的簡稱，它的規(guī)范代表了互聯(lián)網(wǎng)歷史上一個獨特的發(fā)展階段?，F(xiàn)在對于從事網(wǎng)頁制作的朋友來說，很少沒有聽說過CSS了吧，因為在制作網(wǎng)頁過程中我們經(jīng)常需要用到。

CSS允許我們?yōu)槲臋n設(shè)置更為豐富且便于修改的外觀，可以減輕網(wǎng)頁設(shè)計者的工作負(fù)擔(dān)。這里我們主要想和朋友們一起對CSS繼承性和特殊性進(jìn)行一點深入的探討。

一、CSS繼承性

CSS的一個主要特征就是繼承，它是依賴于祖先-后代的關(guān)系的。CSS繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個特定的元素，還可以應(yīng)用于它的后代。例如一個BODY定義了的顏色值也會應(yīng)用到段落的文本中。

二、CSS繼承的局限性

在CSS中，繼承是一種非常自然的行為，我們甚至不需要考慮是否能夠這樣去做，但是繼承也有其局限性。

首先，有些屬性是不能繼承的。這沒有任何原因，只是因為它就是這么設(shè)置的。舉個例子來說：border屬性，大家都知道，border屬性是用來設(shè)置元素的邊框的，它就沒有繼承性。如下圖所示，如果繼承了邊框?qū)傩?，那么文檔看起來就會很奇怪，除非采取另外的措施關(guān)掉邊框的繼承屬性。

如上圖所示，多數(shù)邊框類屬性，比如象Padding（補白），Margin（邊界），背景和邊框的屬性都是不能繼承的。

三、CSS繼承中容易引起的錯誤

有時候繼承也會帶來些錯誤，比如說下面這條CSS定義：

Body{color:blue}

在有些瀏覽器中這句定義會使除表格之外的文本變成藍(lán)色。從技術(shù)上來說，這是不正確的，但是它確實存在。所以我們經(jīng)常需要借助于某些技巧，比如將CSS定義成這樣：

Body,table,th,td{color:blue}

這樣表格內(nèi)的文字也會變成藍(lán)色。

四、多種樣式混合應(yīng)用

既然有了CSS繼承性，那么在樣式表中的應(yīng)用上可能會有些讀者搞不清，多個樣式表同時應(yīng)用到一個對象上會發(fā)生什么情形呢？先舉個簡單的例子：

樣式定義：.apple{color:red;}H1{color:yellow;}

應(yīng)用舉例代碼：<H1CLASS=”apple”>這兒的蘋果好紅啊</H1>

應(yīng)用舉例效果：

因為選擇符H1和.apple都匹配上面的H1元素，那么到底瀏覽器會應(yīng)用哪一個呢？通過在瀏覽器中觀察，我們發(fā)現(xiàn)這段文字應(yīng)用了.apple這個樣式，所以它顯示的是紅色。這是因為兩條規(guī)則的特殊性不一樣，CSS規(guī)則必須這樣進(jìn)行處理。

樣式表中的特殊性描述了不同規(guī)則的相對權(quán)重，它的基本規(guī)則是：

◆統(tǒng)計選擇符中的ID屬性個數(shù)。

◆統(tǒng)計選擇符中的CLASS屬性個數(shù)。

◆統(tǒng)計選擇符中的HTML標(biāo)記名格式。

***，按正確的順序?qū)懗鋈齻€數(shù)字，不要加空格或逗號，得到一個三位數(shù)。(注意，你需要將數(shù)字轉(zhuǎn)換成一個以三個數(shù)字結(jié)尾的更大的數(shù))。相應(yīng)于選擇符的最終數(shù)字列表可以很容易確定較高數(shù)字特性凌駕于較低數(shù)字的。

以下是一個按特性分類的選擇符的列表：

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)有多個規(guī)則都能應(yīng)用于同一個元素時，權(quán)重越高的樣式將被優(yōu)先采用。

五、CSS繼承的優(yōu)先級問題

上面我們討論了CSS的繼承性和特殊性，在特殊性的框架下，被繼承的特性值為0，這就意味著任何顯示聲明的規(guī)則將會覆蓋其繼承樣式。因此，不管一條規(guī)則具有多高的權(quán)重，如果沒有其他規(guī)則能應(yīng)用于這個繼承元素，那么它也只是個被繼承的規(guī)則而已，舉例說明。

樣式定義：

BODY{background:black;}  LI{color:gray;}  UL.white{color:white}

應(yīng)用舉例代碼：

<ul> <li>舉例列表一</li> <li>舉例列表二</li> <li>舉例列表三</li> <li>舉例列表四</li> </ul>

應(yīng)用舉例效果：

有些讀者可能認(rèn)為除包含.white類的列表項顯示為白色外，其余所有的列表項都應(yīng)該是灰色的。然而情況并非如此。

為什么會出現(xiàn)這樣的情況呢？因為帶選擇符LI的顯式聲明的權(quán)值比從UL.white規(guī)則那里CSS繼承過來的權(quán)值要大，所以每個列表項都是灰色的。

可能有些地方不是很好理解，大家多思考一下就會明白，平時在應(yīng)用樣式表的時候多留意思考一下。

下面我們再來看一個例子，若給定如下所示的標(biāo)記，則EM強(qiáng)調(diào)文字將會是灰色的，而非黑色，因為EM規(guī)則的權(quán)值要大于從H1元素繼承來的權(quán)值：

樣式定義：

H1#id316{color:black;} 特性值為：101
EM{color:gray;}特性值為：1

應(yīng)用舉例代碼：

<H1IDH1ID=”id<?xml:namespaceprefixxml:namespaceprefix=st1/>316”> 深入探討<EM>CSS的繼承性</EM></H1>

應(yīng)用舉例效果：

這是因為第二條EM規(guī)則的特性值（1）要比被CSS繼承的特性值（0）要大，事實上規(guī)定H1#id316的原始特性值（101）對其繼承值沒有影響，仍舊為0。

小技巧：

如果想讓H1始終為黑色，而EM文字在其他情況下紅色，那么下面的樣式表設(shè)置就是一個很好的方法：

H1，H1EM{color:black;}  特性值為：1，2
EM{color:red;}　特性值為：1

給定這個規(guī)則后，除在H1元素內(nèi)的任何EM文字就都是紅色，而H1內(nèi)的EM文字仍舊為黑色，由于其選擇符分組，在***條規(guī)則中就有兩條有效的規(guī)則（一條是對H1的，另一條是對H1EM的）也就有兩個特性值??每條規(guī)則一個。

上面我們討論了多個樣式規(guī)則同時應(yīng)用于同一對象時，哪個規(guī)則會被最終應(yīng)用的一些情況，可能有些細(xì)心的讀者會說，那STYLE元素呢？回答是這樣的：帶有STYLE的元素在CSS1下其特性值為100，盡管類似于#ID316這樣的ID選擇符的特性值也為100，但在實際應(yīng)用中，STYLE這一權(quán)值會更高一些，因為STYLE元素的值看起來要比多數(shù)普通規(guī)則的權(quán)值大。所以我們可以看出內(nèi)聯(lián)樣式具有高的特性值，具體的例子我們就不舉了，大家可以自己試試。

六、人為定義CSS繼承優(yōu)先級

在制作網(wǎng)頁的過程中，我們可能想要設(shè)置某個規(guī)則比其他的規(guī)則更重要，CSS中允許這樣設(shè)置，它們被稱為重要規(guī)則（importantrule）。這是根據(jù)其聲明的方式和它們的自然屬性來命名的。通過在一條規(guī)則的分號前插入！important這樣一個短語來標(biāo)記一條重要規(guī)則，比如說：

　P.apple{color:#red!important;background:white;}

顏色值#red被標(biāo)記為!important，而背景色white未被標(biāo)記，如果需要二條規(guī)則都是重要的話，那么每條規(guī)則都需要標(biāo)上!important。

正確地放置!important的位置是很重要的，否則整條規(guī)則將為無效。!important總是放在規(guī)則聲明的***，在分號之前。

標(biāo)記為!important的規(guī)則具有權(quán)值，也就是說他沒有具體的特性值，但是比其他的權(quán)值都要大。需要注意的是，雖然制作者定義的樣式比用戶定義的樣式具有更高權(quán)值時，但!important規(guī)則恰恰相反：重要的用戶定義規(guī)則要比制作者定義的樣式具有更高權(quán)值，即使是標(biāo)記為!important的重要規(guī)則也是如此。

看了這么多文字介紹后，我們來舉個例子看一下：

樣式定義：

H1{color:gray!important;}

應(yīng)用舉例代碼：

<H1STYLEH1STYLE=”color:black;”>看這兒！</H1>

應(yīng)用舉例效果:

!important規(guī)則會覆蓋內(nèi)聯(lián)STYLE屬性的內(nèi)容，所以結(jié)果文字是灰色的而不是黑色的。

還有***一種需要考慮的情況：CSS繼承值總是具有特性值0的特點，即使是從帶有!important的規(guī)則繼承的值也是如此，在匹配重要規(guī)則的元素之外，重要性也會隨之消失，這點是需要我們特別注意的！

樣式定義：body{color:red;}

 應(yīng)用舉例代碼：<p>CSS的<strong>層疊和繼承</strong>深入探討</p>

應(yīng)用舉例效果：

這段代碼的應(yīng)用結(jié)果是：“CSS的層疊和繼承深入探討”這段話是紅顏色的，“層疊和繼承”由于應(yīng)用了strong元素，所以是粗體。這很符合制作者的意圖，也是為什么繼承是CSS的一部分的原因。

上述就是小編為大家分享的如何理解CSS繼承性及其應(yīng)用了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題：如何理解CSS繼承性及其應(yīng)用
當(dāng)前地址：http://muchs.cn/article44/gjgsee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網(wǎng)站建設(shè)、建站公司、自適應(yīng)網(wǎng)站、營銷型網(wǎng)站建設(shè)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)