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