摘 要： CSS應(yīng)用在網(wǎng)頁設(shè)計中，易于精確控制網(wǎng)頁布局、提高代碼重用率、簡化HTML中的各種繁瑣標(biāo)記、提高網(wǎng)頁傳輸速率、便于對網(wǎng)頁的更新與維護。作者結(jié)合實踐經(jīng)驗，總結(jié)出了CSS使用中的一些要點。

關(guān)鍵詞： CSS 網(wǎng)頁設(shè)計 要點

在網(wǎng)頁的設(shè)計制作過程中，CSS起著至關(guān)重要的作用，使用CSS實現(xiàn)頁面的內(nèi)容與表現(xiàn)形式分離，可極大提高工作效率。編寫規(guī)范高效的CSS代碼是網(wǎng)站設(shè)計人員的追求，我結(jié)合實踐經(jīng)驗，總結(jié)出了CSS使用中的一些要點。

一、學(xué)會使用縮寫代碼。

使用CSS縮寫可以減少頁面文件大小，提高下載速度，同時使代碼簡潔可讀。如：

div{

border-top:1px solid #cccccc;

border-left:1px solid #cccccc;

border-right:1px soli #cccccc;

border-bottom:1px solid #cccccc;

}

可縮寫為:div{border:1px solid #cccccc}

縮寫格式中需要注意：（1）中括號內(nèi)是按上、右、下、左的書寫順；（2）數(shù)值與單位不能有空格，每個值之間用空格隔開。

二、一個html元素的class屬性可同時設(shè)定多個規(guī)則（多重class定義）。

一般寫法為：

，實際上我們可以為p元素指定多個規(guī)則，如：

CSS代碼：.a{…}

.b{…}

HTML代碼：

該元素同時包括a和b中設(shè)定的樣式

在這里需注意：多個規(guī)則之間用空格分開。

三、除非值為0，其他情況下應(yīng)明確所賦值的單位。

CSS初學(xué)者普遍存在的問題是忘記定義尺寸，在html代碼中我們可以寫width=\"100\"，但在CSS中應(yīng)該給出一個準(zhǔn)確的單位。如：width:100px;height:50px;font-size:9pt，0值除外，因為對于任何單位，0值的大小都是相等的。在這里需注意：不要在數(shù)值和單位之間加空格。

四、有關(guān)大小寫問題。

在XHTML中，CSS定義的元素名稱是區(qū)分大小寫的，class和id的值在html和xhtml中也是區(qū)分大小寫的，所以為了避免錯誤，最好的方法是一律使用小寫。如：#aaa，與#AAA是不同的，在xhtml中，p和P也是不同的，它們之間不會覆蓋。如果在CSS中定義了#aaa，而在html元素中使用AAA來應(yīng)用樣式，將不能得到#aaa中定義的樣式。如：

CSS:#aaa{border:1px solid #ccc}

HTML:

正確的格式是：

五、CSS的最近優(yōu)先原則。

如果對一個元素定義了多次樣式，則以最近的一級優(yōu)先，最近一級的樣式將覆蓋其他的樣式定義。如：

CSS: p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

此處顯示為紅色

此處顯示為藍(lán)色

此處顯示為綠色

此處顯示為黃色

在這里需注意：

1.多重樣式的優(yōu)先順序為：

①在HTML代碼中元素的style屬性中的設(shè)定值；

②在HTML代碼中head區(qū)中的設(shè)定值；

③外部引用的CSS文件中的設(shè)定值。

2.優(yōu)先級不是按訪問順序來設(shè)定的，而是按照CSS中的聲明順序來設(shè)定的。如上例中

此處顯示為黃色

，可改為：

此處顯示為黃色

在這里也顯示為黃色，是因為在CSS定義中，yellow在blue的后面。

六、不要給背景圖片路徑加引號。

對于部分瀏覽器來說，在定義背景圖像時加引號會引起錯誤，所以最好的做法是一律不加引號。例如：background:url（\"xxx.gif\"）可改為：background:url（xxx.gif）。

七、書寫正確的鏈接樣式。

當(dāng)用CSS定義鏈接的各種狀態(tài)時，一定要注意其書寫順序：:link—:visited—:hover—:active。如：

a:link{…}

a:visited{…}

a:hover{…}

a:activve{…}

如果不按照該順序書寫就可能無法達(dá)到自己希望的效果。為了記憶該順序我們抽取每個單詞的首字母：LVHA，可以通過記憶Love，Hate兩個單詞記住順序。

參考文獻：

［1］郝軍啟，劉治國，趙喜來等.Dreamweave CS4網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)標(biāo)準(zhǔn)教程［M］.北京：清華大學(xué)出版社，2010.

［2］金峰.變幻之美:Div+CSS網(wǎng)頁布局揭秘.案例實戰(zhàn)篇［M］.人民郵電出版社，2009.