DIV CSS優化技巧有哪些

這篇文章主要講解了“DIV CSS優化技巧有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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(http://www.億速云.com/img201207/億速云-logo-2012.gif);  background-position:0 0; background-repeat:repeat-x

簡寫：

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

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

background-image:url(http://www.億速云.com/img201207/億速云-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.億速云.com/img201207/億速云-logo-2012.gif);
background-position:0 0; background-repeat:no-repeat 

簡寫：

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

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

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

簡寫合并：

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

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

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

簡寫合并：

background:#CCC url(http://www.億速云.com/img201207/億速云-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代碼時候，可以利用軟件快速刪除多余空格字符

標點符號字空格字符優化

例子：

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

刪除空格后：

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

去掉空格優化壓縮后的CSS代碼

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

2、刪除每個選擇器最后一個分號

刪除分號前CSS代碼

代碼：

div{float:left;width:100px;height:100%;} .億速云{float:left;width:100px;height:100px;}

簡寫刪除分號壓縮后：

div{float:left;width:100px;height:100%} .億速云{float:left;width:100px;height:100px}

去掉最后一個分號

三、刪除換行    -   TOP

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

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

簡寫刪除選擇器換行占位

CSS代碼：

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

簡寫縮寫優化：

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

簡寫刪除換行，依然可以借助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論壇提出問題。

感謝各位的閱讀，以上就是“DIV CSS優化技巧有哪些”的內容了，經過本文的學習后，相信大家對DIV CSS優化技巧有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！