福彩幸运武林开奖 ?
歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > CSS技巧 >

DIV CSS優化 CSS壓縮技巧教程

DIV CSS優化

DIVCSS5為大家介紹簡單的CSS優化
涉及優化內容:
CSS代碼優化、CSS重用優化、縮短字符、刪除換行等處優化

目錄
  1. CSS樣式單詞簡寫優化
  2. 標點符號優化
  3. 刪除換行
  4. CSS重用優化
  5. CSS代碼優化簡寫總結

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

1、border(CSS邊框)簡寫:

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

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

可以簡寫為:

  1. border:1px solid #000; 

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

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

簡寫:

  1. border-left:1px solid #000 

右邊:

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

簡寫:

  1. border-right:1px solid #000 

上邊:

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

簡寫:

  1. border-top:1px solid #000 

下邊:

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

簡寫:

  1. border-bottom:1px solid #000 

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

傳統代碼:

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

簡寫:

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

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

了解更多css邊框優化壓縮教程

2、padding(CSS padding)簡寫:

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

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

可以css padding簡寫:

  1. Padding:4px 3px 5px 2px 

2)、只對3邊設置padding
假如我們不對“上”設置padding,其它3邊設置padding屬性

傳統:

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

簡寫:

  1. Padding:0 3px 5px 2px 

3邊相同情況:
傳統:

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

簡寫:

  1. Padding:0 2px 2px 2px; 

3、margin簡寫

Margin與padding縮寫類似

1)、四邊間距設置縮寫:
傳統:

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

簡寫:

  1. Margin:4px 3px 5px 2px 

2)、四邊設置距離相同縮寫
傳統:

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

簡寫:

  1. Margin:2px 

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

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

簡寫:

  1. Margin:5px 2px 

4、background簡寫

  1. background-color:#000; 

可以簡寫為

  1. background:#000; 
  1. background-image:url(圖片地址) 

可簡寫為:

  1. background:url(圖片地址) 

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

1)、單獨設置背景一種顏色的背景優化

  1. background-color:#CCC 

優化為:

  1. background:#CCC 

2)、背景為圖片,X橫向重復平鋪

  1. background-image:url(http://www.mcowk.com.cn/img201207/divcss5-logo-2012.gif);  
  2. background-position:0 0; background-repeat:repeat-x 

簡寫:

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

2)、背景為圖片,Y縱向重復平鋪

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

CSS簡寫優化為:

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

3)、背景為圖片,不重復平鋪CSS壓縮

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

簡寫:

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

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

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

簡寫合并:

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

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

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

簡寫合并:

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

這里注意顏色與圖片前后順序。

5、font簡寫

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

可簡寫為:

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

二、標點符號優化   -   TOP

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

CSS代碼優化字標點符號
標點符號字空格字符優化

例子:

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

刪除空格后:

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

去掉標點符號之空格后的css代碼
去掉空格優化壓縮后的CSS代碼

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

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

刪除分號優化CSS代碼
刪除分號前CSS代碼

代碼:

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

簡寫刪除分號壓縮后:

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

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

三、刪除換行   -   TOP

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

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

簡寫刪除選擇器換行占位

CSS代碼:

  1. div{float:left;width:100px;height:100%} 
  2. .divcss5{float:left;width:100px;height:100px} 
  3. /* www.mcowk.com.cn */ 

簡寫縮寫優化:

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

刪除后縮短字節優化CSS
簡寫刪除換行,依然可以借助DW軟件進行操作刪除。

四、CSS重用優化   -   TOP

這里主要介紹是CSS代碼的共用屬性提取來達到節約代碼、維護方便,CSS實例如下:

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

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

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

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

五、CSS代碼優化簡寫總結   -   TOP

根據以上幾點優化簡寫,你可以壓縮你CSS代碼,同時減少不必要占用字節空格、分號,通過簡寫常用CSS代碼等大大解決壓縮CSS代碼。

如需轉載,請注明文章出處和來源網址:http://www.mcowk.com.cn/jiqiao/j240.shtml

我要分享到:
上一篇:DIV間距設置
下一篇:DIV CSS圖片_CSS img

必備CSS教程 Essential CSS Tutorials

必備HTML基礎教程 Essential HTML Tutorials

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2010-11-01 10:53 原創:DIVCSS5
本文www.mcowk.com.cn DIVCSS5版權所有。

福彩幸运武林开奖