<form id="ddzdh"><form id="ddzdh"><nobr id="ddzdh"></nobr></form></form>

        <address id="ddzdh"><nobr id="ddzdh"></nobr></address>

              歡迎來到DIVCSS5查找CSS資料與學習DIV 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.yfzzdoors.com/img201207/divcss5-logo-2012.gif);  
              2. background-position:0 0; background-repeat:repeat-x 

              簡寫:

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

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

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

              簡寫:

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

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

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

              簡寫合并:

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

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

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

              簡寫合并:

              1. background:#CCC url(http://www.yfzzdoors.com/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.yfzzdoors.com */ 

              簡寫縮寫優化:

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

              刪除后縮短字節優化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.yfzzdoors.com/jiqiao/j240.shtml

              人妻AV乱片AV,A∨天堂网在线观看免费,希崎杰西卡亚洲精品中文字幕

                  <form id="ddzdh"><form id="ddzdh"><nobr id="ddzdh"></nobr></form></form>

                    <address id="ddzdh"><nobr id="ddzdh"></nobr></address>