讓CSS樣式表優化更整潔
CSS簡寫就是指将多行的CSS屬性聲明化成一(yī)行,又(yòu)稱爲CSS代碼優化。CSS簡寫的最大(dà)好處就是能夠顯著減少CSS文件的大(dà)小(xiǎo),其實還有很多其他益處。臃腫而雜(zá)亂的CSS樣式表會使你遇到問題是難以調試。
整理了一(yī)些CSS簡寫技巧,它們其實是CSS最常用的寫法,但是太多的人使用Dreamweaver這種所見即所得軟件來編寫CSS,使得代碼過于臃腫。不過沒關系,看過本文之後,你一(yī)能能掌握CSS代碼優化的技巧,今後讓你的每一(yī)個CSS樣式表都看起來整潔而簡短吧。合肥網絡建站公司
屬性值爲0
書(shū)寫原則是如果CSS屬性值爲0,那麽你不必爲其添加單位(如:px/em),你可能會這樣寫:
padding: 10px 5px 0px 0px;
試一(yī)試這樣吧:
padding: 10px 5px 0 0;
移除選擇器
選擇器是你在爲一(yī)些元素應用CSS樣式時的基本方法,比如h1, h2, h2, div, strong, pre, ul, ol等等…如果你使用了class(.類名)或ID(#id名),那麽就不用再在聲明CSS時包含選擇器了。
div#logowrap
嘗試扔掉多餘的選擇器吧:
#logowrap
在這個例子中(zhōng)所謂的那個選擇器就是div
*總愛和你開(kāi)玩笑
要明智的使用*而避免它在整個CSS樣式表中(zhōng)亂開(kāi)玩笑,*是個通配符,你可以使用它來爲你的設計部分(fēn)或全部進行一(yī)系列CSS聲明。例如:
* { margin: 0; }
這個聲明會将所有元素的margin值設置爲0,同樣的,爲了嚴謹起見,你可以嘗試這樣設置:
#menu * { margin: 0; }
這樣的聲明是指将#menu下(xià)的所有元素的margin設爲0。
背景
背景(background)屬性可能會包含設置背景色、背景圖、背景圖的位置和背景圖重複方式的參數,你可能會寫成:
background-image: url(”logo.png”);
background-position: top center;
background-repeat: no-repeat;
其實可以寫成:
background: url(logo.png) no-repeat top center;
顔色
顔色(color)屬性在CSS通常指定爲一(yī)個十六進制的值,一(yī)個#加6位數,他的簡寫方式是如果顔色值由成對兒出現的三對而數字組成,你可以省略掉沒對中(zhōng)的一(yī)個數字。
#000000 可以寫成 #000, #336699 可以寫成 #369 合肥網絡建站公司
這種簡寫技巧隻适用于成對出現的顔色值,其它顔色值不适用這種技巧,比如:
#010101, #223345, #FFF000
Margin(外(wài)邊距/空白(bái)邊)
聲明CSS magin值得時候通常會寫成這樣:
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
讓我(wǒ)(wǒ)們試試把值爲0的單位去(qù)掉,并把4條聲明合并成一(yī)條聲明:
margin:0 10px 0 10px;
當使用聯合定義時,我(wǒ)(wǒ)通常将每個選擇器單獨寫一(yī)行,這樣方便在CSS文件中(zhōng)找到它們。在最後一(yī)個選擇器和大(dà)括号{之間加一(yī)個空格,每個定義也單獨寫一(yī)行,分(fēn)号直接在屬性值後,不要加空格