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