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