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