DIV CSS最佳化 CSS壓縮技巧教程

標籤：style   http   color   os   width   io   

 

DIV CSS最佳化

DIVCSS5為大家介紹簡單的CSS最佳化。
涉及最佳化內容：
CSS代碼最佳化、CSS重用最佳化、縮短字元、刪除換行等處最佳化

目錄

CSS樣式單詞簡寫最佳化
標點符號最佳化
刪除換行
CSS重用最佳化
CSS代碼最佳化簡寫總結

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

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(http://www.divcss5.com/img201207/divcss5-logo-2012.gif);
background-position:0 0; background-repeat:repeat-x

簡寫：

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

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

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

CSS簡寫最佳化為：

background:url(http://www.thinkcss5.com/images2012/logo.gif) repeat-y 0 0;

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

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

簡寫：

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

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

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

簡寫合并：

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

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

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

簡寫合并：

background:#CCC url(http://www.divcss5.com/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;

二、標點符號最佳化 - TOP

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、刪除每個選取器最後一個分號

<a href="http://www.tiganyinbo.com/">音樂床墊</a>

刪除分號最佳化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代碼最佳化壓縮之去掉最後一個屬性分號
去掉最後一個分號
三、刪除換行 - TOP

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

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

簡寫刪除選取器換行佔位

CSS代碼：

div{float:left;width:100px;height:100%}
.divcss5{float:left;width:100px;height:100px}
/* www.divcss5.com */

簡寫縮寫最佳化：<a href="http://www.tiganyinyue.org/">音樂床墊</a>

div{float:left;width:100px;height:100%}.divcss5{float:left;width:100px;height:100px}
/* www.divcss5.com */

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

這裡主要介紹是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代碼最佳化簡寫總結 - TOP

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