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(divcss5.gif);對應屬性是設定divcss5.gif圖片為背景
background-position:bottom;背景圖片是居底部
background-repeat:repeat-x;背景按X座標(橫座標)重複延伸

以上CSS代碼可以簡寫為

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

解釋：背景顏色為白色，並以X座標重複divcss5.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 "黑體";

注意，如果你縮寫字型定義，至少要定義font-size和font-family兩個值瞭解css font技巧。

瞭解px是什麼

2、排列css代碼。

通常我們代碼如下排列

 

 

這樣將佔css檔案很多的空格和斷行符號位空間，這裡還佔用了12行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代碼。

如：

.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 class="gongyong yangshi">div css樣式</div>
<div class="gongyong yangshi2">div css樣式2</div>

 

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

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

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

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

5、條理化css代碼。

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

如頭部的css代碼與內容區css代碼斷行符號各行隔開

 

 

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

DIV CSS最佳化

一、CSS樣式屬性單詞代碼簡寫最佳化

1、border(CSS邊框)簡寫：

1)、4個邊邊框寬度為1px，顏色為#000

border-color:#000; border-style:solid; border-width:1px

可以簡寫為：

border:1px solid #000;

2)、單獨上、下、左、右邊框簡寫

左邊：

border-left-color:#000; border-left-style:solid; border-left-width:1px

簡寫：

border-left:1px solid #000

右邊：

border-right-color:#000; border-right-style:solid; border-right-width:1px

簡寫：

border-right:1px solid #000

上邊：

border-top-color:#000; border-top-style:solid; border-top-width:1px

簡寫：

border-top:1px solid #000

下邊：

border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px

簡寫：

border-bottom:1px solid #000

3)、技巧性簡寫邊框
有時只設定3邊的邊框時候，我們可以技巧性減少代碼量。
假如我們不設定上邊框，而其他3邊為1px實現黑色邊框。

傳統代碼：

Div{border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000}

簡寫：

Div{border:1px solid #000;border-top:0}

這樣達到相同效果也大大地減少CSS代碼量

瞭解更多css邊框最佳化壓縮教程。

2、padding（CSS padding）簡寫：

1)、四邊設定padding內補白屬性
傳統思維：

Padding-left:2px;Padding-right:3px;Padding-top:4px;Padding-bottom:5px

可以css padding簡寫：

Padding:4px 3px 5px 2px

2）、只對3邊設定padding
假如我們不對“上”設定padding，其它3邊設定padding屬性

傳統：

Padding-left:2px;Padding-right:3px;Padding-bottom:5px

簡寫：

Padding:0 3px 5px 2px

3邊相同情況：

傳統：

Padding-left:2px;Padding-right:2px;Padding-bottom:2px

簡寫：

Padding:0 2px 2px 2px;

3、margin簡寫

Margin與padding縮寫類似

1）、四邊間距設定縮寫：
傳統：

Margin-left:2px;Margin-right:3px;Margin-bottom:5px;Margin-top:4px;

簡寫：

Margin:4px 3px 5px 2px

2)、四邊設定距離相同縮寫
傳統：

Margin-left:2px;Margin-right:2px;Margin-bottom:2px;Margin-top:2px;

簡寫：

Margin:2px

3）、上下相同、左右相同

Margin-left:2px;Margin-right:2px;Margin-bottom:5px;Margin-top:5px;

簡寫：

Margin:5px 2px

4、background簡寫

background-color:#000;

可以簡寫為

background:#000;

background-image:url(圖片地址)

可簡寫為：

background:url(圖片地址)

CSS背景比較常用的樣式屬性，包括單獨設定一個背景顏色、單獨設定背景為圖片、單獨設定背景圖片是否重複，重複是全部重複還是按照X橫向或Y縱向重複。接下來我們介紹background背景樣式常用簡寫與注意。

1）、單獨設定背景一種顏色的背景最佳化

background-color:#CCC

最佳化為：

background:#CCC

2）、背景為圖片，X橫向重複平鋪

background-image:url(/img201207/divcss5-logo-2012.gif); 
background-position:0 0; background-repeat:repeat-x

簡寫：

background:url(/img201207/divcss5-logo-2012.gif) repeat-x 0 0;

2）、背景為圖片，Y縱向重複平鋪

background-image:url(/img201207/divcss5-logo-2012.gif);
background-position:0 0; background-repeat:repeat-y

CSS簡寫最佳化為：

background:url(/images2012/logo.gif) repeat-y 0 0;

3）、背景為圖片，不重複平鋪CSS壓縮

background-image:url(/img201207/divcss5-logo-2012.gif);
background-position:0 0; background-repeat:no-repeat

簡寫：

background:url(/img201207/divcss5-logo-2012.gif) no-repeat 0 0;

4）、背景為圖片，網頁全背景X和Y重複平鋪

background-image:url(/img201207/divcss5-logo-2012.gif);

簡寫合并：

background:url(/img201207/divcss5-logo-2012.gif) ;

5）、背景為黑色，圖片向X橫向重複平鋪

background-color:#CCC;background-image:url(/img201207/divcss5-logo-2012.gif); 
background-position:0 0; background-repeat:repeat-x;

簡寫合并：

background:#CCC url(/img201207/divcss5-logo-2012.gif) repeat-x 0 0;

這裡注意顏色與圖片前後順序。

5、font簡寫

font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;

可簡寫為：

font:12px/12px Arial, Helvetica, sans-serif;

二、標點符號最佳化

1、刪除多餘空白字元
我們常常寫CSS代碼時候CSS樣式單詞之間會多html空格，我們可以在開發完CSS代碼時候，可以利用軟體快速刪除多餘空白字元

CSS代碼最佳化字標點符號
標點符號字空白字元最佳化

例子：

div{ float:left; width:100px; height:100%;}

刪除空格後：

div{float:left;width:100px;height:100%;}

去掉標點符號之空格後的css代碼
去掉空格最佳化壓縮後的CSS代碼

刪除空格，在開發CSS過程不必刪除，只需要在開發完成後利用如DW軟體批量替換刪除掉多餘空格即可。

2、刪除每個選取器最後一個分號

刪除分號最佳化CSS代碼
刪除分號前CSS代碼

代碼：

div{float:left;width:100px;height:100%;}
.divcss5{float:left;width:100px;height:100px;}

簡寫刪除分號壓縮後：

div{float:left;width:100px;height:100%}
.divcss5{float:left;width:100px;height:100px}

CSS代碼最佳化壓縮之去掉最後一個屬性分號截圖
去掉最後一個分號

三、刪除換行

刪除空格與換行，讓代碼都擠一起。

刪除空格前截圖
刪除選取器之間換行空格截圖

簡寫刪除選取器換行佔位

CSS代碼：

div{float:left;width:100px;height:100%}
.divcss5{float:left;width:100px;height:100px}

簡寫縮寫最佳化：

div{float:left;width:100px;height:100%}.divcss5{float:left;width:100px;height:100px}

刪除後縮短位元組最佳化CSS
簡寫刪除換行，依然可以藉助DW軟體進行操作刪除。

四、CSS重用最佳化

這裡主要介紹是CSS代碼的共用屬性提取來達到節約代碼、維護方便，CSS執行個體如下：

.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}

他們都有相同高度、寬度、浮動、文字大小，而只有內容居左居右不同(你可能需要瞭解CSS置中)，我們就可以提取他們相同屬性
最佳化壓縮後:

.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{text-align:right; }

注意觀察以上代碼，自己理解，不懂可到CSS論壇提出問題。

五、CSS代碼最佳化簡寫總結

根據以上幾點最佳化簡寫，你可以壓縮你CSS代碼，同時減少不必要佔用位元組空格、分號，通過簡寫常用CSS代碼等大大解決壓縮CSS代碼。