DIV+CSS代碼優化方案
你對DIV+CSS代碼優化的概念是否了解，這里和大家分享一下，首先讓我們看一下CSS代碼優化作用與意義。
DIV+CSS代碼優化方案
CSS代碼優化作用與意義
1、減少占用網頁字節。在同等條件下縮短瀏覽器下載CSS代碼時間，相當于加快網頁打開速度
2、便于維護。簡化和標準化CSS代碼讓CSS代碼減少，便于日后維護
3、讓自己寫的CSS代碼更加專業。
CSS優化方法-需要優化CSS代碼地方
1、縮寫CSS代碼。
2、排列CSS代碼。
3、同屬性提取共用CSS選擇器。
4、分離網頁顏色和背景設置樣式（較大站點需要注意）。
5、條理化CSS代碼。#p#
實例講解以上幾點DIV+CSS優化方法
1、縮寫CSS代碼
常用需要縮寫CSS屬性代碼如下：
background(背景屬性-CSS手冊詳細了解background手冊)
未優化前
- background-color:#FFF;對應屬性為背景顏色為白色
- background-image:url(DIVCSS5.gif);對應屬性是設置DIVCSS5.gif圖片為背景
- background-position:bottom;背景圖片是居底部
- background-repeat:repeat-x;背景按X坐標（橫坐標）重復延伸
以上CSS代碼可以簡寫為
- background:#FFFurl(DIVCSS5.gif)repeat-xbottom;
解釋：背景顏色為白色，并以X坐標重復DIVCSS5.gif圖片，并且圖標居下。未優化CSSbackground屬性相同
margin(外補白屬性-CSS手冊詳細了解margin手冊)
未優化前
- margin-left:5px;意思為靠左5px
- margin-right:6px;靠右6px
- margin-bottom:7px;底部延伸7px
- margin-top:8px;頂部延伸8px
優化簡寫為
- margin:8px6px7px5px;
意思和屬性效果同上，可詳細了解CSSmargin介紹
padding(內補白屬性-CSS手冊詳細了解padding手冊)
未優化前
- padding-left:5px;意思為左補白5px
- padding-right:6px;右補白6px
- padding-bottom:7px;底（下）補白7px
- padding-top:8px;頂（上）補白8px
優化簡寫為
- padding:8px6px7px5px;
意思和屬性效果同上，可詳細了解CSSpadding介紹
border(邊框屬性-CSS手冊詳細了解border手冊)
未優化前
- border-color:#000000;邊框顏色為黑色
- border-style:solid;邊框樣式為實線
- border-width:1px;邊框寬度為1px
可以簡寫為
- border:1pxsolid#000000;
意思同上未優化前
如果是只設置左邊邊框為1px，顏色為黑色的實線CSS代碼如下
- border-left:1pxsolid#000000;
font(字體屬性-CSS手冊詳細了解fonts手冊)
字體的屬性如下：
- font-style:italic;字體樣式
- font-variant:small-caps;字體異體
- font-weight:bold;字體加粗
- font-size:12px;字大小為12px
- line-height:22px;字行高為22px
- font-family:"黑體"字體為黑體字
可以縮寫為一句：font:italicsmall-capsbold12px/22px"黑體";
注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個值了解CSSfont技巧。#p#
2、排列CSS代碼。
通常我們代碼如下排列
這樣將占CSS文件很多的空格和回車位空間，這里還占用了12行CSS文件空間
建議你改寫為
- /*CSSwww.DIVCSS5.com實例演示圖*/-這里是CSS注釋
- .yangshi{font-size:12px;border:1pxsolid#000000;padding:5px;}
- .yangshi2{font-size:12px;border:1pxsolid#000000;padding:5px;}
這樣將節約空格和回車位，及CSS文件行數，從而節約代碼文件字節。
3、同屬性提取共用CSS選擇器。
這個要了解的是如果有兩個部分的CSS屬性如寬度高度字體顏色都相同，而有很小一點不同，這個時候我們就需要提取大家相同的CSS樣式出來，單獨命名一個CSS屬性選擇器，從而節約CSS代碼。
如：
- /*CSSwww.DIVCSS5.comDIV+CSS實例演示圖*/
- .yangshi{font-size:12px;border:1pxsolid#000000;padding:5px;width:25px;}
- .yangshi2{font-size:12px;border:1pxsolid#000000;padding:5px;width:50px;}
這里的yangshi和yanshi2兩個樣式有相同的字體大小為12px，邊框相同,內補白相同，只有寬度不同，這個時候我們就可以提取他們相同部分并重新新建個CSS選擇器和重用
新建CSS屬性選擇器演示如下
- .gongyong{font-size:12px;border:1pxsolid#000000;padding:5px;}
- .yangshi{width:25px;}
- .yangshi2{width:50px;}
- 這樣在調用CSS時候-了解CSS引入
- <DIVclassDIVclass="gongyongyangshi">DIVCSS樣式</DIV>
- <DIVclassDIVclass="gongyongyangshi2">DIVCSS樣式2</DIV>
這樣就可以讓通過調用相同CSS樣式，再分別調用不同CSS屬性類即可，以上實例還不能展示他的優點，但是如果代碼多而且有很多地方如以上特點，這樣將顯示其功能特點。
4、分離網頁顏色和背景設置樣式（較大站點需要注意）。
這點有以上第三點同屬性提取共用CSS選擇器特點，但是區別地方，如果站比較大，需要改一個地方即可改變整個站點網頁的字體顏色樣式，背景圖案顏色，邊框顏色樣式。
這個時候我們將需要在DIV+CSS開發的時候特別將的基本字體樣式、背景圖案顏色、邊框等顏色提取到一起或放到一個CSS文件里，這樣一來便于我們維護管理整個站點基本樣式。
5、條理化CSS代碼。
條理化CSS代碼意思是將CSS代碼整理歸類，如控制頭部、局部、底部的CSS代碼選擇器樣式區別開來分別放到一起并與其他地方CSS代碼互相隔開。
如頭部的CSS代碼與內容區CSS代碼回車各行隔開
如以上“toubu”與“dibu”以行隔開得以區分，好處是以后維護方便，便于辨認更改維護。
DIVCSS5通過以上實例講解的CSS優化方法及CSS優化方案希望對大家有幫助。
【編輯推薦】
- DIV CSS編碼時必須注意的細節
- IE6、IE7、Firefox中margin問題解決辦法
- DIV CSS隱藏內容樣式方法詳解
- CSS兼容：解決IE6、IE7和IE8的兼容問題妙招
- DIV CSS網頁布局需要掌握的八大技巧
