div+css代碼優化方案介紹-css代碼優化篇

css代碼優化作用與意義

1、減少占用網頁字節。在同等條件下縮短瀏覽器下載css代碼時間，相當于加快網頁打開速度

2、便于維護。簡化和標準化css代碼讓css代碼減少，便于日后維護

3、讓自己寫的css代碼更加專業。

css優化方法-需要優化css代碼地方

1、縮寫css代碼。

2、排列css代碼。

3、同屬性提取共用css選擇器。

4、分離網頁顏色和背景設置樣式(較大站點需要注意)。

5、條理化css代碼。

實例講解以上幾點div css優化方法

1、縮寫css代碼

常用需要縮寫css屬性代碼如下：

background(背景屬性-CSS手冊詳細了解background手冊)

未優化前

background-color:#FFF;對應屬性為背景顏色為白色

background-image:url(CSS5.gif);對應屬性是設置CSS5.gif圖片為背景

background-position:bottom;背景圖片是居底部

background-repeat:repeat-x;背景按X坐標(橫坐標)重復延伸

以上CSS代碼可以簡寫為

background:#FFF url(CSS5.gif) repeat-x bottom;

解釋：背景顏色為白色，并以X坐標重復CSS5.gif圖片，并且圖標居下。未優化css background屬性相同

margin(外補白屬性-CSS手冊詳細了解margin手冊)

未優化前

margin-left:5px; 意思為靠左5px

margin-right:6px; 靠右6px

margin-bottom:7px; 底部延伸7px

margin-top:8px; 頂部延伸8px

優化簡寫為

margin:8px 6px 7px 5px; 意思和屬性效果同上，可詳細了解css margin介紹

padding(內補白屬性-CSS手冊詳細了解padding手冊)

未優化前

padding-left:5px; 意思為左補白5px

padding-right:6px; 右補白6px

padding-bottom:7px; 底(下)補白7px

padding-top:8px; 頂(上)補白8px

優化簡寫為

padding:8px 6px 7px 5px; 意思和屬性效果同上，可詳細了解css padding介紹

border(邊框屬性-CSS手冊詳細了解border手冊)

未優化前

border-color:#000000;邊框顏色為黑色

border-style:solid;邊框樣式為實線

border-width:1px;邊框寬度為1px

可以簡寫為

border:1px solid #000000;意思同上未優化前

如果是只設置左邊邊框為1px，顏色為黑色的實線css代碼如下

border-left:1px solid #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:italic small-caps bold 12px/22px "黑體";

2、排列css代碼。

通常我們代碼如下排列

這樣將占css文件很多的空格和回車位空間，這里還占用了12行css文件空間

css5.com.cn建議你改寫為

/* CSS css5.com.cn實例演示圖 */-這里是css 注釋

.yangshi{ font-size:12px;border:1px solid #000000;padding:5px;}

.yangshi2{ font-size:12px;border:1px solid #000000;padding:5px;}

這樣將節約空格和回車位，及css文件行數，從而節約代碼文件字節。

3、同屬性提取共用css選擇器。

這個要了解的是如果有兩個部分的css屬性如寬度高度字體顏色都相同，而有很小一點不同，這個時候我們就需要提取大家相同的css樣式出來，單獨命名一個css屬性選擇器，從而節約css代碼。

如：

/* CSS css5.com.cn div+css實例演示圖 */

.yangshi{ font-size:12px;border:1px solid #000000;padding:5px; width:25px;}

.yangshi2{ font-size:12px;border:1px solid #000000;padding:5px; width:50px;}

這里的yangshi和yanshi2兩個樣式有相同的字體大小為12px，邊框相同,內補白相同，只有寬度不同，這個時候我們就可以提取他們相同部分并重新新建個css選擇器和重用

新建css屬性選擇器演示如下

.gongyong{font-size:12px;border:1px solid #000000;padding:5px;}

.yangshi{ width:25px;}

.yangshi2{width:50px;}

這樣在調用css時候-了解css 引入

div css樣式div css樣式2

這樣就可以讓通過調用相同css樣式，再分別調用不同css屬性類即可，以上實例還不能展示他的優點，但是如果代碼多而且有很多地方如以上特點，這樣將顯示其功能特點。

4、分離網頁顏色和背景設置樣式(較大站點需要注意)。

這點有以上第三點同屬性提取共用css選擇器特點，但是區別地方，如果站比較大，需要改一個地方即可改變整個站點網頁的字體顏色樣式，背景圖案顏色，邊框顏色樣式。

這個時候我們將需要在div+css開發的時候特別將的基本字體樣式、背景圖案顏色、邊框等顏色提取到一起或放到一個css文件里，這樣一來便于我們維護管理整個站點基本樣式。

5、條理化css代碼。

條理化css代碼意思是將css代碼整理歸類，如控制頭部、局部、底部的css代碼選擇器樣式區別開來分別放到一起并與其他地方css代碼互相隔開。

如頭部的css代碼與內容區css代碼回車各行隔開

如以上“toubu”與“dibu”以行隔開得以區分，好處是以后維護方便，便于辨認更改維護。

CSS5通過以上實例講解的css 優化方法及css優化方案希望對大家有幫助。

作者：div+css

總結

以上是生活随笔為你收集整理的优化函数html代码,CSS代码优化方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。