欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS教程：理解繼承屬性及應(yīng)用

互聯(lián)網(wǎng)   發(fā)布時(shí)間：2008-10-17 19:24:29   作者：佚名   我要評(píng)論
4.5繼承 在本書的[3.3.2繼承與層疊]一節(jié)曾經(jīng)簡(jiǎn)要介紹過繼承：(X)HTML元素可以從其父元素那里繼承部分CSS屬性，即使當(dāng)前元素并沒有定義該屬性。 4.5.1值的繼承 繼承也是基于文檔樹的，文檔樹中元素的某些屬性可以被其子元素繼承，每一個(gè)CSS屬性都定義了它能否被繼承。例

4.5繼承
在本書的[3.3.2繼承與層疊]一節(jié)曾經(jīng)簡(jiǎn)要介紹過繼承：(X)HTML元素可以從其父元素那里繼承部分CSS屬性，即使當(dāng)前元素并沒有定義該屬性。

4.5.1值的繼承
繼承也是基于文檔樹的，文檔樹中元素的某些屬性可以被其子元素繼承，每一個(gè)CSS屬性都定義了它能否被繼承。例如有下列代碼，其在瀏覽器內(nèi)顯示如圖4-29所示。
p{color:green;}
<p>文檔樹中一元素的<strong>某些值</strong>可以被其子元素繼承。</p>
/web/css/selectors/029.gif
圖4-29值的繼承
要設(shè)定文檔的某些缺省樣式屬性，可以在文檔樹的根上設(shè)定該屬性，如果這個(gè)屬性可以繼承，則其后代元素將繼承這個(gè)屬性，例如color、font-size等屬性。在(X)HTML中，<html>或<body>元素可以實(shí)現(xiàn)這一功能。例如：
body{color:black;}
由于color屬性是可繼承的，所有<body>元素的后代都繼承顏色值為“black”。
指定的百分比值不被繼承，但是計(jì)算值可以被繼承。例如：
body{font-size:12px;}
h1{font-size:120%}
<body>
<h1>標(biāo)題1的<em>文字</em>會(huì)大一些</h1>
<p>段落的文字繼承body的定義</p>
</body>
<h1>元素的font-size屬性的計(jì)算值為“14.4px”（其父元素值12px的120%）。由于“font-size”的 計(jì)算值被繼承，<em>元素也繼承“14.4px”的計(jì)算值。但是由于1個(gè)像素（1px）是電腦最小的顯示單位，不可能顯示“0.4px”， 所以<h1>和<em>元素“font-size”的實(shí)際值是“14px”。

4.5.2“inherit”值
每一個(gè)屬性可以指定值為“inherit”，即：對(duì)于給定的元素，該屬性和它父元素相對(duì)屬性的計(jì)算值取一樣的值。繼承值通常只用作后備值，它可以通過顯式地指定“inherit”而得到加強(qiáng)，例如：
p{font-size:inherit;}

4.5.3繼承的局限性
繼承雖然減少了重復(fù)定義的麻煩，但是，有些屬性是不能繼承的，例如border（邊框）、margin（邊距）、padding（補(bǔ)白）和背景等。
這樣設(shè)定是有道理的，例如，為一個(gè)<div>設(shè)定了邊框，如果此屬性也繼承的話，那么在這個(gè)<div>內(nèi)所有的元素都會(huì) 有邊框，這無疑會(huì)產(chǎn)生一個(gè)讓人眼花繚亂的結(jié)果。同樣的，影響元素位置的屬性，例如margin（邊距）和padding（補(bǔ)白），也不會(huì)被繼承。
同時(shí)，瀏覽器的缺省樣式也在影響著繼承的結(jié)果。例如：
body{font-size:12px;}
<h2>2級(jí)標(biāo)題的文字不是12px。</h2>
這是因?yàn)闉g覽器的缺省樣式設(shè)定了<h2>的CSS規(guī)則。
同時(shí)，有些老版本的瀏覽器可能對(duì)繼承支持的不太好，例如某些瀏覽器當(dāng)遇到<table>的時(shí)候，就會(huì)丟失所有的繼承的屬性，例如如下代碼，在IE5.5中顯示如圖4-30所示。
body{font-size:12px;}
<p>段落的文字繼承body的定義</p>
<table>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>
/web/css/selectors/030.gif
圖4-30IE5.5中表格沒有繼承<body>的屬性
因此，如果要照顧到這些老版本的瀏覽器，則可能需要如下定義：
body,table,th,td{……}

相關(guān)文章

最新評(píng)論