CSS樣式在網(wǎng)頁設(shè)計(jì)中遵循3個(gè)基本規(guī)則：繼承性、層疊性和特殊性，這些規(guī)則確保CSS樣式能夠準(zhǔn)確、高效地發(fā)揮作用。
CSS繼承性在網(wǎng)頁設(shè)計(jì)中最典型的應(yīng)用就是在body元素中定義整個(gè)頁面的字體大小、字體顏色等基本頁面屬性，這樣包含在body元素內(nèi)的其他元素都將繼承該基本屬性，以實(shí)現(xiàn)頁面顯示效果的統(tǒng)一。
【示例1】啟動(dòng)Dreamweaver，新建文檔，保存為test.html。切換到代碼視圖下，在<body>標(biāo)簽中輸入下面HTML代碼：
<div id="wrap">
<div id="header">
<div id="menu">
<ul>
<li><span>首頁</span>
</li>
<li>菜單項(xiàng)</li>
</ul>
</div>
</div>
<div id="main">
<p>主體內(nèi)容</p>
</div>
</div>
然后，在<head>標(biāo)簽中輸入<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表。
接著，在內(nèi)部樣式表中輸入下面CSS代碼，定義一個(gè)標(biāo)簽樣式，在body上定義字體大小為12像素，通過繼承性，包含在body元素的所有其他元素都將繼承該屬性，并設(shè)置包含的字體大小為12像素。body { font-size:12px;}最后，保存文檔，按F12鍵，在瀏覽器中預(yù)覽。
靈活利用CSS繼承性，可以優(yōu)化CSS代碼，節(jié)省開發(fā)時(shí)間，但是繼承也有其局限性。首先，有些屬性是不能繼承的。例如，background屬性用來設(shè)置元素的背景，它是沒有繼承性的。實(shí)際上它也不應(yīng)該有繼承性，如果在網(wǎng)頁設(shè)計(jì)時(shí)所有包含元素都繼承了背景屬性，那么文檔看起來就會(huì)很怪異。CSS強(qiáng)制規(guī)定部分屬性不具有繼承特性，分類說明如下：
?邊框?qū)傩浴?nbsp;
?邊界屬性。
?補(bǔ)白屬性。
?背景屬性。
?定位屬性。
?布局屬性。
?元素寬高屬性。、
繼承是非常重要的，使用它可以簡化代碼，降低CSS樣式的復(fù)雜性。但是，如果在網(wǎng)頁中所有元素都大量繼承樣式，那么判斷樣式的來源就會(huì)變得很困難。一般對(duì)于字體、文本類屬性等涉及網(wǎng)頁中通用屬性可以使用繼承。例如，網(wǎng)頁顯示字體、字號(hào)、顏色、行距等可以在body元素中統(tǒng)一設(shè)置，然后通過繼承影響文檔中所有文本。
下級(jí)標(biāo)簽通過繼承性獲取上級(jí)對(duì)象的樣式，但是這些樣式影響力是非常弱的，如果元素本身包含了相沖突的樣式，則將忽略繼承得來的樣式。對(duì)于相同CSS起源來說，不同位置的樣式其優(yōu)先級(jí)也是不同的：一般來說，行內(nèi)樣式會(huì)優(yōu)先于內(nèi)嵌樣式表，內(nèi)部樣式表會(huì)優(yōu)先于外部樣式表。而被附加了!important關(guān)鍵字的聲明會(huì)擁有最高的優(yōu)先級(jí)。
【示例2】在下面示例中，分別在p元素行內(nèi)定義一個(gè)內(nèi)嵌屬性樣式（style="font-size:14px"），然后在文檔的頭部定義一個(gè)內(nèi)部樣式p { font-size:24px;}，最后在外部樣式表文件（style1.css）中定義一個(gè)外部樣式p { font-size:36px;}，并利用<link>標(biāo)簽鏈接到文檔中。在瀏覽器中預(yù)覽，則根據(jù)CSS樣式的優(yōu)先級(jí)，最終顯示結(jié)果為14像素。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>示例代碼
</title>
<style type="text/css">p {font-size:24px;}
</style>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head><body>
<p style="font-size:14px">段落文本
</p></body>
</html>
對(duì)于常規(guī)選擇器它們都擁有一個(gè)優(yōu)先級(jí)加權(quán)值，說明如下。
?標(biāo)簽選擇器：優(yōu)先級(jí)加權(quán)值為1。
?偽元素或偽對(duì)象選擇器：優(yōu)先級(jí)加權(quán)值為1。
?類選擇器：優(yōu)先級(jí)加權(quán)值為10。
?屬性選擇器：優(yōu)先級(jí)加權(quán)值為10。
?ID選擇器：優(yōu)先級(jí)加權(quán)值為100。
?其他選擇器：優(yōu)先級(jí)加權(quán)值為0，如通配選擇器等。然后，以上面加權(quán)值數(shù)為起點(diǎn)來計(jì)算每個(gè)樣式中選擇器的總加權(quán)值數(shù)。計(jì)算的規(guī)則是：
?統(tǒng)計(jì)選擇器中ID選擇器的個(gè)數(shù)，然后乘以100。
?統(tǒng)計(jì)選擇器中類選擇器的個(gè)數(shù)，然后乘以10。
?統(tǒng)計(jì)選擇器中的標(biāo)簽選擇器的個(gè)數(shù)，然后乘以1。依此方法類推，最后把所有加權(quán)值數(shù)相加，即可得到當(dāng)前選擇器的總加權(quán)值，最后根據(jù)加權(quán)值來決定哪個(gè)樣式的優(yōu)先級(jí)大。
【示例3】在下面代碼中，把每個(gè)選擇器的特殊性進(jìn)行加權(quán)，希望讀者好好研究一下，它們都具有比較實(shí)用的典型性，其他選擇器的特殊性也將依此類推。
/*[選擇器特殊性加權(quán)值]*/
div{/*特殊性加權(quán)值＝1*/
color:Green;}
div h2{/*特殊性加權(quán)值：1+1＝2*/
color:Red;}.blue{
/*特殊性加權(quán)值：10＝10*/
color:Blue;}
div.blue{/*特殊性加權(quán)值：1+10＝11*/
color:Aqua;}
div.blue .dark{/*特殊性加權(quán)值：1+10+10＝21*/
color:Maroon;}#header{/*特殊性加權(quán)值：100＝100*/
color:Gray;}
#header span{/*特殊性加權(quán)值：100＋1＝101*/
color:Black;}
提示：
?被繼承的值加權(quán)值為0。一個(gè)元素顯示聲明的樣式都可以覆蓋繼承來的樣式。
?內(nèi)聯(lián)樣式優(yōu)先。帶有style屬性的元素，其內(nèi)聯(lián)樣式的特殊性可以為100或者更高，總之，它擁有比上面提到的選擇器具有更大的優(yōu)先權(quán)。 ?在相同加權(quán)值下，CSS將遵循就近原則，也就是說靠近元素的樣式具有最大優(yōu)先權(quán)，或者說排在最后的樣式具有最大優(yōu)先權(quán)。
?CSS定義了一個(gè)!important命令，該命令被賦予最大權(quán)力。也就是說不管特殊性如何，以及樣式位置的遠(yuǎn)近，!important都具有最大優(yōu)先權(quán)。
當(dāng)前文章標(biāo)題：網(wǎng)站建設(shè)時(shí)的CSS特性
當(dāng)前URL：http://www.kigisgallery.com/news/wzzz/3057.html
