CSS樣式在網(wǎng)頁(yè)設(shè)計(jì)中遵循3個(gè)基本規(guī)則:繼承性、層疊性和特殊性,這些規(guī)則確保CSS樣式能夠準(zhǔn)確、高效地發(fā)揮作用。
CSS繼承性在網(wǎng)頁(yè)設(shè)計(jì)中最典型的應(yīng)用就是在body元素中定義整個(gè)頁(yè)面的字體大小、字體顏色等基本頁(yè)面屬性,這樣包含在body元素內(nèi)的其他元素都將繼承該基本屬性,以實(shí)現(xiàn)頁(yè)面顯示效果的統(tǒng)一。
【示例1】啟動(dòng)Dreamweaver,新建文檔,保存為test.html。切換到代碼視圖下,在<body>標(biāo)簽中輸入下面HTML代碼:
<div id="wrap">
<div id="header">
<div id="menu">
<ul>
<li><span>首頁(yè)</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)頁(yè)設(shè)計(jì)時(shí)所有包含元素都繼承了背景屬性,那么文檔看起來就會(huì)很怪異。CSS強(qiáng)制規(guī)定部分屬性不具有繼承特性,分類說明如下:
?邊框?qū)傩浴?nbsp;
?邊界屬性。
?補(bǔ)白屬性。
?背景屬性。
?定位屬性。
?布局屬性。
?元素寬高屬性。、
繼承是非常重要的,使用它可以簡(jiǎn)化代碼,降低CSS樣式的復(fù)雜性。但是,如果在網(wǎng)頁(yè)中所有元素都大量繼承樣式,那么判斷樣式的來源就會(huì)變得很困難。一般對(duì)于字體、文本類屬性等涉及網(wǎng)頁(yè)中通用屬性可以使用繼承。例如,網(wǎng)頁(yè)顯示字體、字號(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://m.supportcoffeeroasters.com/news/wzzz/3057.html