CSS教程：理解繼承屬性及應用

2024-07-11 08:42:54

字體：大中小

來源：轉載

供稿：網友

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

4.5.1值的繼承
繼承也是基于文檔樹的，文檔樹中元素的某些屬性可以被其子元素繼承，每一個CSS屬性都定義了它能否被繼承。例如有下列代碼，其在瀏覽器內顯示如圖4-29所示。
p{color:green;}
<p>文檔樹中一元素的<strong>某些值</strong>可以被其子元素繼承。</p>
/web/css/selectors/029.gif

圖4-29值的繼承
要設定文檔的某些缺省樣式屬性，可以在文檔樹的根上設定該屬性，如果這個屬性可以繼承，則其后代元素將繼承這個屬性，例如color、font-size等屬性。在(X)HTML中，<html>或<body>元素可以實現這一功能。例如：
body{color:black;}
由于color屬性是可繼承的，所有<body>元素的后代都繼承顏色值為“black”。
指定的百分比值不被繼承，但是計算值可以被繼承。例如：
body{font-size:12px;}
h1{font-size:120%}
<body>
<h1>標題1的<em>文字</em>會大一些</h1>
<p>段落的文字繼承body的定義</p>
</body>
<h1>元素的font-size屬性的計算值為“14.4px”（其父元素值12px的120%）。由于“font-size”的計算值被繼承，<em>元素也繼承“14.4px”的計算值。但是由于1個像素（1px）是電腦最小的顯示單位，不可能顯示“0.4px”，所以<h1>和<em>元素“font-size”的實際值是“14px”。

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

4.5.3繼承的局限性
繼承雖然減少了重復定義的麻煩，但是，有些屬性是不能繼承的，例如border（邊框）、margin（邊距）、padding（補白）和背景等。
這樣設定是有道理的，例如，為一個<div>設定了邊框，如果此屬性也繼承的話，那么在這個<div>內所有的元素都會有邊框，這無疑會產生一個讓人眼花繚亂的結果。同樣的，影響元素位置的屬性，例如margin（邊距）和padding（補白），也不會被繼承。
同時，瀏覽器的缺省樣式也在影響著繼承的結果。例如：
body{font-size:12px;}
<h2>2級標題的文字不是12px。</h2>
這是因為瀏覽器的缺省樣式設定了<h2>的CSS規則。
同時，有些老版本的瀏覽器可能對繼承支持的不太好，例如某些瀏覽器當遇到<table>的時候，就會丟失所有的繼承的屬性，例如如下代碼，在IE5.5中顯示如圖4-30所示。
body{font-size:12px;}
<p>段落的文字繼承body的定義</p>
<table>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>
/web/css/selectors/030.gif