陳宏君

摘 要：CSS學(xué)起來并不難，但在實(shí)際開發(fā)的項(xiàng)目中，不同的人在CSS書寫風(fēng)格上會(huì)有不同，導(dǎo)致CSS樣式臃腫而雜亂，使團(tuán)隊(duì)成員的工作效率下降。為此本文總結(jié)了一些如何對(duì)CSS代碼進(jìn)行優(yōu)化的方法，以實(shí)現(xiàn)CSS代碼易讀且規(guī)范，從而提高項(xiàng)目開發(fā)效率。

關(guān)鍵詞：CSS；優(yōu)化；Web標(biāo)準(zhǔn)

中圖分類號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9599 （2013） 09-0000-02

CSS樣式英文全稱是“Cascading Style Sheets”，中文稱之為“層疊樣式表”，也稱為“級(jí)聯(lián)樣式表”，是一種布局網(wǎng)頁(yè)的技術(shù)，用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。

網(wǎng)頁(yè)設(shè)計(jì)要符合web標(biāo)準(zhǔn)實(shí)際上就是對(duì)網(wǎng)頁(yè)的結(jié)構(gòu)、表現(xiàn)與行為進(jìn)行分離——即表現(xiàn)與內(nèi)容分離。使用CSS能夠?qū)崿F(xiàn)表現(xiàn)與內(nèi)容分離，能更好地控制頁(yè)面布局，可以制作出體積更小、下載更快的網(wǎng)頁(yè)。

1 CSS的基本格式

CSS的定義是由三個(gè)部分構(gòu)成：選擇符，屬性和屬性的取值。

基本格式如下：

樣式選擇符{屬性1：屬性值；屬性2：屬性值；...屬性n：屬性值；}

樣式選擇符可以是多種形式，一般是要定義樣式的html標(biāo)記，例如body、table等。

2 CSS代碼優(yōu)化的作用

大部分人使用Dreamweaver這種所見即所得軟件來編寫CSS，使得代碼過于臃腫。CSS代碼優(yōu)化的目的并不僅僅是減少CSS文件的大小，還能讓CSS代碼更有條理、更高效，從而成為更優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)師。CSS代碼優(yōu)化的作用：

2.1 減少占用網(wǎng)頁(yè)字節(jié)。在同等條件下縮短瀏覽器下載CSS代碼時(shí)間，相當(dāng)于加快網(wǎng)頁(yè)打開速度。

2.2 便于維護(hù)。簡(jiǎn)化和標(biāo)準(zhǔn)化CSS代碼，便于日后維護(hù)。

3 CSS代碼的優(yōu)化方法

Web網(wǎng)站可用性的關(guān)鍵指標(biāo)是速度，更確切地說，是頁(yè)面能以多快的速度出現(xiàn)在訪問者的瀏覽器窗口里。影響速度的因素有很多種，包括Web服務(wù)器的速度、訪問者的Internet連接情況，以及瀏覽器必須下載的文件大小。雖然無(wú)法控制服務(wù)器連接的速度，但是可以控制構(gòu)成網(wǎng)站W(wǎng)eb頁(yè)面的文件大小。通過使用CSS代碼優(yōu)化的一些技巧，可以在很大程度上減少樣式表的大小，具體可以采取以下優(yōu)化方法：

3.1 規(guī)范化的命名方式

無(wú)任何語(yǔ)義命名的代碼，不僅自己會(huì)弄錯(cuò)，更讓團(tuán)隊(duì)成員修改維護(hù)時(shí)效率降低，就像這樣的代碼：

.dcc{margin：5px；color：red；}

這是對(duì)class類的命名，名稱無(wú)任何含義，不便于理解。也不要使用元素的特性，如顏色，大小等，來命名一個(gè)class或id，可以選擇有意義的命名如：#navigation{...}，.sidebar{...}。這樣，無(wú)論如何修改定義這些class或id的樣式，都不影響它跟HTML元素間的聯(lián)系。

3.2 利用CSS繼承

如果頁(yè)面中父元素的多個(gè)子元素使用相同的樣式，最好把它們相同的樣式定義在其父元素上，讓其繼承這些CSS樣式。這樣不僅方便維護(hù)代碼，而且還可以減少代碼量，如下面這些代碼：

#containerli{font-family：Arial；}

#containerp{font-family：Arial；}

可以簡(jiǎn)寫成：

#container{font-family：Arial；}

3.3 使用多重選擇符

可以把相同屬性和值的選擇符組合起來書寫，用逗號(hào)將選擇符分開，這樣可以減少樣式重復(fù)定義，例如：

h1{font-family："黑體"；font-weight：bold；}

h2{font-family："黑體"；font-weight：bold；}

以上包括兩種標(biāo)題元素，每個(gè)標(biāo)題元素的字體都為"黑體"，文字加粗。代碼重復(fù)，可以簡(jiǎn)化成：

h1，h2{font-family："黑體"；font-weight：bold；}

3.4 代碼縮寫

CSS代碼縮寫可以精簡(jiǎn)代碼量。在CSS里面有不少可以縮寫的屬性，如margin，padding，border，顏色值等。

Margin（外邊距），聲明magin值得時(shí)候通常會(huì)寫成這樣：

margin-top：0px；

margin-right：10px；

margin-bottom：0px；

margin-left：10px；

我們把值為0的單位去掉，并把4條聲明合并成一條聲明：

margin：0 10px 0 10px；

這是按照順時(shí)針方向來聲明屬性值，即上-右-下-左的方向，如果屬性上和下，左和右的值相等，還可以進(jìn)一步優(yōu)化，省略掉后兩個(gè)值，剩下的兩個(gè)值前者指上下，后者指左右，如：

margin：0 10px；它指外邊距上下的值為0，左右的值為10px；

color（顏色），在CSS中，顏色屬性通常指定為一個(gè)十六進(jìn)制的值，一個(gè)#加6位數(shù)，如果顏色值由三對(duì)成對(duì)的數(shù)字組成，可以省略掉每對(duì)中的一個(gè)數(shù)字，如：#ff00ff可以寫成#f0f；

3.5 為CSS代碼排序

如果代碼中的屬性都能按照字母排序，那查找修改的時(shí)候就能更加方便快捷，如：

div{

background-color：#ccc；

color：#0000ff；

font：18pt；

height：20px；

margin：10px5px；

padding：5px10px5px；

}

3.6 選擇更優(yōu)的樣式屬性值

CSS中有些屬性采用不同的屬性值，雖然達(dá)到的效果差不多，但性能上卻存在著差異，如：border：0；雖然在頁(yè)面上看不見，但按border默認(rèn)值理解，瀏覽器依然對(duì)border-width、border-color進(jìn)行了渲染，即已經(jīng)占用了內(nèi)存值。而border：none；"none"即沒有，瀏覽器解析"none"時(shí)將不作出渲染動(dòng)作，不會(huì)消耗內(nèi)存值。所以建議使用border：none；同樣，display：none隱藏對(duì)象，瀏覽器不作渲染，不占用內(nèi)存，而visibility：hidden則會(huì)。

3.7 使用外部樣式表

CSS樣式表可以以多種方式應(yīng)用到html頁(yè)面中，但最常用最好的方式是外部鏈接。這種方式是將CSS樣式代碼放入一個(gè)外部文件中，再由html中的link元素進(jìn)行調(diào)用。這樣做的好處是可以使多個(gè)網(wǎng)頁(yè)調(diào)用同一個(gè)樣式表文件，最大限度地實(shí)現(xiàn)了代碼重用及網(wǎng)站文件的最優(yōu)化配置。

具體方法為：在html頁(yè)面中的head標(biāo)簽下使用link元素調(diào)用。這樣不但易于維護(hù)修改，而且可以提高頁(yè)面速度，因?yàn)镃SS文件都能在瀏覽器中產(chǎn)生緩存。

CSS樣式給網(wǎng)頁(yè)設(shè)計(jì)注入了新的生命力，相同的網(wǎng)頁(yè)內(nèi)容，應(yīng)用不同的CSS代碼，可以使網(wǎng)頁(yè)呈現(xiàn)出各種不同的風(fēng)格。靈活掌握CSS語(yǔ)言并能設(shè)計(jì)制作出符合web標(biāo)準(zhǔn)的網(wǎng)頁(yè)，是學(xué)習(xí)CSS的最終目標(biāo)。

參考文獻(xiàn)：

[1]杜濤.CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用與優(yōu)化[J].長(zhǎng)治學(xué)院學(xué)報(bào)，2007（10）.

[2]宋鋼.CSS在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用探討[J].總裁，2009（10）.

[3]李超.CSS網(wǎng)站布局實(shí)錄（第2版）[M].北京：科學(xué)出版社，2007.