網(wǎng)頁(yè)結(jié)構(gòu)和層疊樣式的繼承屬性

  • 2018-08-19 09:54:13
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://51zuanshi.com.cn

特殊性對(duì)于理解如何向網(wǎng)頁(yè)文檔應(yīng)用聲明很重要,同樣的,還有一個(gè)很重要的概念,即繼承。基于繼承機(jī)制,樣式不僅應(yīng)用到指定的元素,還會(huì)應(yīng)用到它的后代元素。例如,如果向一個(gè)h1元素應(yīng)用一個(gè)顏色,那么這個(gè)顏色將應(yīng)用到h1中的所有文本,甚至應(yīng)用到該h1 的子元素中的文本:

h1 {color:gray;}

<h1>Meerkat <em>Central</em></h1>

不僅正常的h1文本會(huì)變成灰色,連em文本也會(huì)是灰色,因?yàn)閑m元素繼承了這個(gè)color 值。如果屬性值不能被后代元素繼承,em文本應(yīng)當(dāng)是黑色,而不是灰色,則必須單獨(dú)地為該元素指定顏色。

繼承對(duì)無(wú)序列表也適用。假設(shè)為ul元素應(yīng)用樣式color: gray;:

ul {color: gray;}

你希望應(yīng)用到ul的樣式也應(yīng)用到其列表項(xiàng),并且應(yīng)用到這些列表項(xiàng)中的所有內(nèi)容。正是因?yàn)橛欣^承,你將如愿以償。

將聲明color :gray;應(yīng)用到ul元素時(shí),這個(gè)元素會(huì)采用該聲明。這個(gè)值再沿著樹(shù)向下

傳播到后代元素,并一直繼續(xù),直到再?zèng)]有更多的后代元素繼承這個(gè)值為止。值絕對(duì)不會(huì)向上傳播,也就是說(shuō),元素不會(huì)把值向上傳遞到其祖先。

注意:在網(wǎng)頁(yè)HTML中,對(duì)于向上傳播規(guī)則有一個(gè)例外:應(yīng)用到body元素的背景樣式可以傳遞到html元素(html是文檔的根元素),相應(yīng)地可以定義其畫(huà)布。

繼承是CSS中最基本的內(nèi)容之一,除非有必要的理由,否則一般不會(huì)特別考慮,正所謂“熟視無(wú)睹”。不過(guò),還是有幾點(diǎn)需要記住。

首先,注意有些屬性不能繼承,這往往歸因于一個(gè)簡(jiǎn)單的常識(shí)。例如,屬性border (用于設(shè)置元素的邊框)就不會(huì)繼承。如果邊框能繼承,網(wǎng)頁(yè)文檔會(huì)變得更混亂,除非網(wǎng)頁(yè)設(shè)計(jì)師另外花功夫去掉繼承的邊框。

一般地,大多數(shù)框模型屬性(包括外邊距、內(nèi)邊距、背景和邊框)都不能繼承,其原因是一樣的。畢竟,你肯定不希望一個(gè)段落中的所有鏈接都從其父元素繼承30像素的左外邊距!

繼承的值根本沒(méi)有特殊性,甚至連0特殊性都沒(méi)有。這看上去似乎只是理論上不同,不過(guò)等你了解到繼承值沒(méi)有特殊性會(huì)有什么結(jié)果時(shí),就會(huì)知道這種差別絕不能忽視。

*{color: gray;}

h1#page-title {color:black;}

<h1 id="page-title">Meerkat <em>Central</em></h1>

<p>

Welcome to the best place on the web for meerkat information!

</p>

繼承bug

由于不同的網(wǎng)頁(yè)瀏覽器實(shí)現(xiàn)中可能存在的問(wèn)題,創(chuàng)作人員不能指望依靠繼承在所有情況下得到預(yù)想的結(jié)果。例如,Navigator 4 (另外,從某種程度上講,Explorer 4和5)的表不會(huì)繼承樣式。因此,以下規(guī)則會(huì)導(dǎo)致文檔中除表之外的所有文本都有更小的字體:

body (font-size: 0.8em;)

在CSS中,這是不合適的,但這種行為確實(shí)存在,所以創(chuàng)作人—直以來(lái)都求助于以下技巧:

body, table, th, td {font-size: 0.8em;}

如果瀏覽器本身在繼承方面存在bug,在這樣的瀏覽器中,利用上述技巧比較有可能得到所要的結(jié)果,不過(guò)仍然不能保證。

遺憾地是,在能正確實(shí)現(xiàn)繼承的瀏覽器中,以上“修正方法”會(huì)導(dǎo)致更嚴(yán)重的問(wèn)題,如IE6/Win、IE5/Mac, Netscape 6+等瀏覽器。在這些瀏覽器中,最終文本會(huì)放在一個(gè)表單元格中,其字體大小是用戶默認(rèn)字體大小設(shè)置的41%。應(yīng)當(dāng)針對(duì)更新的瀏覽器編寫(xiě)正確的CSS,相比之下,試圖在老瀏覽器中解決繼承bug的做法通常比較危險(xiǎn)。

因?yàn)橥ㄅ溥x擇器適用于所有元素,而且有0特殊性,其顏色聲明指定的值gray要優(yōu)先于繼承值(black),因?yàn)槔^承值根本沒(méi)有特殊性。因此,em元素會(huì)顯示為灰色而不是黑色。

這個(gè)例子生動(dòng)地說(shuō)明了不加區(qū)別地使用通配選擇器可能存在的問(wèn)題之一。由于它能匹配任何元素,所以通配選擇器往往有一種短路繼承的效果。這個(gè)問(wèn)題可以解決,不過(guò)通常更合理的做法是從一開(kāi)始就避免不加區(qū)別地使用通配選擇器,從而從根本上避免這個(gè)問(wèn)題。

繼承值完全沒(méi)有特殊性,這一點(diǎn)很關(guān)鍵,絕不能等閑視之。例如,假設(shè)一個(gè)樣式表編寫(xiě)如下,使“工具條”中的所有文本都是黑底白字:

#toolbar {color: white; background: black;}

只要id為toolbar的元素只包含純文本而不包含其他內(nèi)容,這就能正常起作用。不過(guò),如果這個(gè)元素中的文本都是超鏈接(a元素),用戶代理的超鏈接樣式就會(huì)占上風(fēng)。在一個(gè)Web瀏覽器中,這意味著它們的顏色很可能是藍(lán)色,因?yàn)闉g覽器的樣式表可能包含以下規(guī)則:

a:link {color: blue;}

為克服這個(gè)問(wèn)題,必須如下聲明:

#toolbar {color: white; background: black;}

#toolbar a:link {color: white;}

通過(guò)向工具條中的a元素直接指定規(guī)則。


當(dāng)前文章標(biāo)題:網(wǎng)頁(yè)結(jié)構(gòu)和層疊樣式的繼承屬性

當(dāng)前URL:http://51zuanshi.com.cn/news/wzzz/inherit-structure-and-overlap-of-web-pages.html

上一篇:網(wǎng)頁(yè)的結(jié)構(gòu)和重疊

下一篇:在設(shè)計(jì)網(wǎng)頁(yè)時(shí)如果css樣式發(fā)生沖突

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)咨詢專(zhuān)線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))