CSS代碼優(yōu)化的作用與意義

作用與意義：

1、減少占用網(wǎng)頁(yè)字節(jié)。在同等條件下縮短瀏覽器下載css代碼時(shí)間，等同于加快了網(wǎng)頁(yè)打開(kāi)的速度
2、便于后期改版維護(hù)。簡(jiǎn)化和標(biāo)準(zhǔn)化css代碼讓css代碼減少，便于日后維護(hù)
3、讓自己寫(xiě)的css代碼更加專業(yè)標(biāo)準(zhǔn)化。

優(yōu)化方法：

1、縮寫(xiě)css代碼。
2、排列css代碼。
3、同屬性提取共用css選擇器。
4、分離網(wǎng)頁(yè)顏色和背景設(shè)置樣式（較大站點(diǎn)需要注意）。
5、條理化css代碼。

6、寫(xiě)清楚注釋。

簡(jiǎn)單講幾個(gè)優(yōu)化方面例子：

縮寫(xiě)css代碼
background-color:#FFF;對(duì)應(yīng)屬性為背景顏色為白色
background-image:url(divcss.gif);對(duì)應(yīng)屬性是設(shè)置divcss5.gif圖片為背景
background-position:bottom;背景圖片是居底部
background-repeat:repeat-x;背景按X坐標(biāo)（橫坐標(biāo)）重復(fù)延伸
以上CSS代碼可以簡(jiǎn)寫(xiě)為
background:#FFF url(divcss.gif) repeat-x bottom;

排列css代碼
yangshi{

font-size:12px;

border:1px solid #000000;

padding:5px;

}

建議寫(xiě)成=》
.yangshi{ font-size:12px;border:1px solid #000000;padding:5px;}

同屬性提取共用css選擇器
.css1{ font-size:12px;border:1px solid #000000;padding:5px; width:25px;}
.css2{ font-size:12px;border:1px solid #000000;padding:5px; width:50px;}
建議寫(xiě)成=>
.css{ font-size:12px;border:1px solid #000000;padding:5px;}
.css1{  width:25px;}
.css2{  width:50px;}

優(yōu)化書(shū)寫(xiě)的方法有多種，這里啟邁網(wǎng)絡(luò)點(diǎn)到為止，主要根據(jù)個(gè)人習(xí)慣去書(shū)寫(xiě)?？梢远鄥⒖家幌麓笮途W(wǎng)站的css排版。。。