網(wǎng)站建設(shè)時的CSS特性

CSS樣式在網(wǎng)頁設(shè)計中遵循3個基本規(guī)則:繼承性、層疊性和特殊性,這些規(guī)則確保CSS樣式能夠準確、高效地發(fā)揮作用。

CSS繼承性在網(wǎng)頁設(shè)計中最典型的應用就是在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元素的所有其他元素都將繼承該屬性,并設(shè)置包含的字體大小為12像素。body { font-size:12px;}最后,保存文檔,按F12鍵,在瀏覽器中預覽。

靈活利用CSS繼承性,可以優(yōu)化CSS代碼,節(jié)省開發(fā)時間,但是繼承也有其局限性。首先,有些屬性是不能繼承的。例如,background屬性用來設(shè)置元素的背景,它是沒有繼承性的。實際上它也不應該有繼承性,如果在網(wǎng)頁設(shè)計時所有包含元素都繼承了背景屬性,那么文檔看起來就會很怪異。CSS強制規(guī)定部分屬性不具有繼承特性,分類說明如下:   

?邊框?qū)傩浴?nbsp;  

?邊界屬性。   

?補白屬性。

?背景屬性。  

?定位屬性。  

?布局屬性。   

?元素寬高屬性。、

繼承是非常重要的,使用它可以簡化代碼,降低CSS樣式的復雜性。但是,如果在網(wǎng)頁中所有元素都大量繼承樣式,那么判斷樣式的來源就會變得很困難。一般對于字體、文本類屬性等涉及網(wǎng)頁中通用屬性可以使用繼承。例如,網(wǎng)頁顯示字體、字號、顏色、行距等可以在body元素中統(tǒng)一設(shè)置,然后通過繼承影響文檔中所有文本。

下級標簽通過繼承性獲取上級對象的樣式,但是這些樣式影響力是非常弱的,如果元素本身包含了相沖突的樣式,則將忽略繼承得來的樣式。對于相同CSS起源來說,不同位置的樣式其優(yōu)先級也是不同的:一般來說,行內(nèi)樣式會優(yōu)先于內(nèi)嵌樣式表,內(nèi)部樣式表會優(yōu)先于外部樣式表。而被附加了!important關(guān)鍵字的聲明會擁有最高的優(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)先級加權(quán)值,說明如下。   

?標簽選擇器:優(yōu)先級加權(quán)值為1。   

?偽元素或偽對象選擇器:優(yōu)先級加權(quán)值為1。   

?類選擇器:優(yōu)先級加權(quán)值為10。

?屬性選擇器:優(yōu)先級加權(quán)值為10。   

?ID選擇器:優(yōu)先級加權(quán)值為100。   

?其他選擇器:優(yōu)先級加權(quán)值為0,如通配選擇器等。然后,以上面加權(quán)值數(shù)為起點來計算每個樣式中選擇器的總加權(quán)值數(shù)。計算的規(guī)則是:   

?統(tǒng)計選擇器中ID選擇器的個數(shù),然后乘以100。   

?統(tǒng)計選擇器中類選擇器的個數(shù),然后乘以10。   

?統(tǒng)計選擇器中的標簽選擇器的個數(shù),然后乘以1。依此方法類推,最后把所有加權(quán)值數(shù)相加,即可得到當前選擇器的總加權(quán)值,最后根據(jù)加權(quán)值來決定哪個樣式的優(yōu)先級大。

【示例3】在下面代碼中,把每個選擇器的特殊性進行加權(quán),希望讀者好好研究一下,它們都具有比較實用的典型性,其他選擇器的特殊性也將依此類推。

/*[選擇器特殊性加權(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。一個元素顯示聲明的樣式都可以覆蓋繼承來的樣式。   

?內(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定義了一個!important命令,該命令被賦予最大權(quán)力。也就是說不管特殊性如何,以及樣式位置的遠近,!important都具有最大優(yōu)先權(quán)。


網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點擊可一鍵撥號)