CSS編碼中的幾個(gè)問(wèn)題

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

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

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

一、學(xué)會(huì)使用縮寫(xiě)代碼。

使用CSS縮寫(xiě)可以減少頁(yè)面文件大小，提高下載速度，同時(shí)使代碼簡(jiǎn)潔可讀。如：

div{

border-top:1px solid #cccccc;

border-left:1px solid #cccccc;

border-right:1px soli #cccccc;

border-bottom:1px solid #cccccc;

}

可縮寫(xiě)為:div{border:1px solid #cccccc}

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

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

一般寫(xiě)法為：

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

CSS代碼：.a{…}

.b{…}

HTML代碼：

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

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

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

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

四、有關(guān)大小寫(xiě)問(wèn)題。

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

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

HTML:

正確的格式是：

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

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

CSS: p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

此處顯示為紅色

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

此處顯示為綠色

此處顯示為黃色

在這里需注意：

1.多重樣式的優(yōu)先順序?yàn)椋?/p>

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

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

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

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

此處顯示為黃色

，可改為：

此處顯示為黃色

在這里也顯示為黃色，是因?yàn)樵贑SS定義中，yellow在blue的后面。

六、不要給背景圖片路徑加引號(hào)。

對(duì)于部分瀏覽器來(lái)說(shuō)，在定義背景圖像時(shí)加引號(hào)會(huì)引起錯(cuò)誤，所以最好的做法是一律不加引號(hào)。例如：background:url（\"xxx.gif\"）可改為：background:url（xxx.gif）。

七、書(shū)寫(xiě)正確的鏈接樣式。

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

a:link{…}

a:visited{…}

a:hover{…}

a:activve{…}

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

參考文獻(xiàn)：

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

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