CSS高效編碼技巧
CSS被吹捧的好處之一就是它能減小頁面大小，由此縮短下載時間，這里向大家簡單介紹一下進(jìn)行高效CSS編碼技巧，有很多地方可以減少代碼的長度，包括簡記屬性(shorthandproperties)，多重聲明(multipledeclarations)，默認(rèn)值(defaultvalues)，繼承(inheritance)，和空白(whitespace)。
進(jìn)行高效CSS編碼技巧
在前面的文章中，我們提到了用什么軟件來編寫CSS文件。今天我們來看一些介紹：如何才能高效的進(jìn)行CSS編碼？
CSS被吹捧的好處之一就是它能減小頁面大小，由此縮短下載時間，不僅僅是首頁的載入，還包括樣式表被緩存以后，后續(xù)頁面的載入也被加快了的那部分時間。這沒錯，但首頁載入時間的縮短幾乎看不出來，這是因為CSS代碼往往過于冗長了。好吧，現(xiàn)在一切都不同了。學(xué)點(diǎn)高效地進(jìn)行CSS編碼的技巧吧，讓你把樣式表馬上裁減到最小為止。自然，你可能看不到什么驚人的改變，但對于大站來說，微小的字節(jié)減少也很重要。
有很多地方可以減少代碼的長度，包括簡記屬性(shorthandproperties)，多重聲明(multipledeclarations)，默認(rèn)值(defaultvalues)，繼承(inheritance)，和空白(whitespace)。
簡記屬性
Zeroingpagemargins提到了一組這樣的簡記屬性，但對于此還有更多的。
通常簡記屬性包括：
◆font(控制"font-size","font-weight","line-height",等等)background(控制元素的背景，放置位置，重復(fù)次數(shù)，等等)
◆list-style(設(shè)置列表元素前邊那個“原點(diǎn)”的屬性)
◆margin(定義box各側(cè)的邊緣空白(margin)寬度)
◆border(定義box邊界(border)的屬性——有很多和邊界有關(guān)的簡記屬性)padding(定義box各側(cè)的補(bǔ)白(padding)寬度)
上述項目是鏈接至W3CCSS2規(guī)范的相關(guān)章節(jié)的。
例如，font屬性是用于同時設(shè)置font-style,font-variant,font-weight,font-size,line-height,和font-family的簡記屬性。當(dāng)然，它們并非全都必須寫在簡記屬性中。一旦在簡記屬性中忽略了其中某個，那些缺失的屬性都將被設(shè)置為它們的初始值，就像W3C規(guī)范中fontproperty一節(jié)提到的那樣。若需要控制很多和字體相關(guān)的屬性，使用這個簡記屬性就可以省下樣式表中的大量字節(jié)了。
background和list-style屬性也是如此?，F(xiàn)在還剩下關(guān)于CSS盒(box)模型四邊的那些屬性和一點(diǎn)沒法歸類的雜碎了。
盒側(cè)邊的簡記屬性
任何塊級(blocklevel)元素(像div，表格，列表，段落等)的四邊都有邊白(margin)，邊界(border)，和補(bǔ)白(padding)，都可以分別設(shè)置不同的寬度。對于邊界(border)來說，還能給每邊分配不同的border-style和border-color。若要一條條地顯式地指明所有這些屬性，代碼就會變得很冗長。使用簡記規(guī)則的意義正在于此：徹底地減少這樣負(fù)擔(dān)。
“鐘面”
當(dāng)需要指定這三類“盒側(cè)”屬性之一，而且各側(cè)的情況又是一樣的時候，使用簡記屬性最基本的功能就行了：
ExampleSourceCode
- margin:5px;border-width:5px;padding:5px;
注意：要讓邊界顯示出來，還必須設(shè)置border-style屬性，否則單有border-width邊界是顯示不出來的。既可以直接通過border-style來設(shè)置它，也可以通過border屬性。
然而很有可能某一側(cè)需要一個不同的值，這時CSS的“鐘面”特性就上臺了。把此處的盒子想象為一個鐘面，當(dāng)指針指向12點(diǎn)時，表示盒子的正上方，這就是簡記屬性中第一個值的含義；下一個是3點(diǎn)，這是盒子的右側(cè)；接下來是6點(diǎn)，表示盒子的下方；最后呢是9點(diǎn)，盒子的左側(cè)。
讓我們看看這個例子吧。在頁面中我們需要一個10px上邊白，5px右邊白，3px下邊白，無左邊白的盒子。則margin簡記屬性應(yīng)該這么寫：
ExampleSourceCode
- margin:10px5px3px0;
在屬性的聲明中，幾個值必須也只能用空格來分隔。而且只要那個值不是零，就必須給它指定單位。
為什么零寬度的邊白就不需要指定單位了呢？因為零個任何單位(px,em,%,等等)的值也就等于任意其他單位的值。#p#
改進(jìn)的鐘面
當(dāng)某些值重復(fù)時，這些“盒側(cè)”屬性還能壓榨得更短。前面提到過，若各側(cè)都一樣，可以只指定一個，讓它應(yīng)用到全部。而一旦頂部和底部的樣式是一致的，左側(cè)和右側(cè)卻是另一種，margin的代碼可以這么寫：
ExampleSourceCode
- margin:10px5px;
這行代碼把頂部和底部的邊白設(shè)置為10px，兩側(cè)設(shè)為5px。最后一個技巧是這樣的：若頂部和底部的不同，兩側(cè)的卻是一樣的，比如上邊白10px，左右邊白5px，下邊白20px，我們可以這么寫：
ExampleSourceCode
- margin:10px5px20px;
這些縮寫完全是根據(jù)給出值的數(shù)目和順序決定的?？偨Y(jié)起來，一個值=所有各側(cè)；兩個值=上下一種，兩側(cè)另一種；三個值=上側(cè)一種，左右同一種，下側(cè)一種；當(dāng)然還有四個值=按照順時針。好了，現(xiàn)在不那么難記住了吧？
邊界(border)的一些區(qū)別
同樣的鐘面簡記模型也可以用于border簡記屬性和padding。border-width,border-color,border-style,與padding也采用和margin一樣的方式工作。然而處理border屬性時卻有點(diǎn)不同。border屬性是同時給盒子的各側(cè)設(shè)置border-width,border-style,及border-color屬性的。
如果所有四側(cè)的樣式都一樣，那當(dāng)然不會有什么問題。可萬一他們不同呢？我們還得回去用那些老式的border-top,border-right們？沒錯，是可以。但幸好我們還有更有效率一點(diǎn)的方法。
考慮我們這個盒子的各個邊界有同樣的style和color，但寬度不同的情況，最有效的方法是，先像往常一樣用border簡記法來定義好border-width,border-style,和border-color；然后再設(shè)置一次border-width屬性，覆蓋上面設(shè)置的寬度：
ExampleSourceCode
- border:10pxsolidred;
- border-width:10px5px3px0;
如果所有的邊界屬性(width、style和color)都各側(cè)不同，那上面的方法恐怕就沒什么用了，但通常不會遇到這么怪異的情況。如果變化的屬性僅僅是border-style或者border-color的話，上述的方法改改就可以像border-width的情況那樣用了。
下面我們看看在另一種情形下書寫高效的CSS會帶來什么改變。
多重聲明
考慮我們有6個采用絕對定位的div(比如Dreamweaver里的層)，且它們的其他屬性都一樣，只不過在頁面中的位置不同。因為它們的位置不同，自然應(yīng)該有不同的ID或者是class，但剩下的屬性還是一樣的。
一個(所見即所得的)布局編輯器恐怕給每個ID都各自寫一套屬性，包括字體的規(guī)則、文本的規(guī)則、位置的定義等等?？梢槐楸榈亟o這些div重復(fù)完全一樣的規(guī)則未免笨了點(diǎn)，不是么？那這樣就可以把這些規(guī)則減到最短了：
ExampleSourceCode
- #first{left:0;}
- #second{left:100px;}
- #third{left:200px;}
- #fourth{left:300px;}
- #fifth{left:400px;}
- #sixth{left:500px;}
- #first,#second,#third,#fourth,#fifth,#sixth{
- position:absolute;
- top:0;
- width:75px;
- font-size:.9em;
- font-weight:bold;
- text-align:center;
- line-height:1.4em;
- background-color:silver;
- color:navy;
- padding:5px;
- border:1pxsolidnavy;
- }
列出所有類似的這些div的ID，用,和一個空格分隔，下面的規(guī)則塊會被應(yīng)用到所有這些ID上。顯然這樣的規(guī)則如果給每個ID都重復(fù)一遍，代碼就膨脹得多了。這恐怕是最常用也最有效的縮短樣式表方法了。
注意：注意最后一個ID選擇符并沒有跟著一個逗號。(若多了逗號)有些瀏覽器中可能還能看到那些div，另一些就有可能把這樣的樣式表視為錯誤而不顯示任何一個div了。#p#
默認(rèn)值
許多CSS屬性都有它們的默認(rèn)值，如果這個屬性沒被定義取代，它們就將應(yīng)用于HTML元素上。比如說每個補(bǔ)白屬性中，padding-top,padding-right,padding-bottom,和padding-left的初始值都是0。因此如果某個元素不需要任何的補(bǔ)白，自然就可以不設(shè)置補(bǔ)白的那些屬性了。
注意：那些簡記屬性——比如我們先前討論過的——里面，或者其本身都沒有什么默認(rèn)的值。畢竟簡記屬性其實(shí)只是獨(dú)立屬性的一種重現(xiàn)而已，所以如果硬說它們有默認(rèn)值的話，采用的也是獨(dú)立屬性的那些默認(rèn)值。盡管CSS規(guī)范的PropertyIndex一節(jié)中規(guī)定的許多默認(rèn)值都是none或0，瀏覽器們卻往往給不同的屬性設(shè)置一些不同的默認(rèn)值。
例：Opera瀏覽器給body元素設(shè)置了8px的補(bǔ)白。h1-h6標(biāo)題和段落，默認(rèn)都有非零的邊白。列表和列表子項中用到的默認(rèn)邊白和補(bǔ)白，每個瀏覽器都有所不同。
繼承
另一個避免寫出冗余代碼的方法是，了解哪些屬于父元素的屬性會由子元素繼承下來。會被繼承的屬性只有很少一些，而且其中大部分是不常用的，比如voice-family。所以列個能繼承的常用屬性的表，其實(shí)是很短的，下面就是按字母順序排出的：
ExampleSourceCode
- color
- font(及其相關(guān)屬性)
- letter-spacing
- line-height
- list-style(及其相關(guān)屬性)
- text-align
- text-indent
- text-transform
- white-space
- word-spacing
在某些老式瀏覽器中，繼承功能可能有些問題，然而大部分現(xiàn)代瀏覽器在這方面都處理得很正確。記住上面這個列表，可以讓你少寫點(diǎn)多余的代碼。當(dāng)然了，如果你想看看完整的列表，還是參考CSS2PropertyIndex。
空白
并非指的是CSS的white-space屬性，這個屬性早有確定的值了。我們說的是樣式表本身含有的那些空白?？瞻壮Ｓ糜趽Q行字符，和在一行里面用來改進(jìn)可讀性的空格。盡管把它們都刪除可能會剩下個把字節(jié)，但好處畢竟有限。
關(guān)鍵是，如果把它們都刪除了，CSS文件就會變得非常難讀，更難修改。要是你真的打算這么做，不妨創(chuàng)建一個主CSS文件，再根據(jù)它生成一個刪除了所有空白的副本，修改的時候只修改主文件，根據(jù)主文件重新生成一次副本就行了。
請注意，CSS編碼中需要一些空白，刪除那些必要的會導(dǎo)致你未曾預(yù)料的問題。如果W3C規(guī)范中用了"spaceseparated"這樣的語句，那么空格就不可省略。常見的像簡記屬性中分隔值的那些空格，還有下降合并符(descendantcombinator)，或者稱為下降選擇符，就是一個空格。所以說不到非用不可的時候，刪除空白這樣的方法還是少用。
最后
你現(xiàn)在學(xué)會了好幾種讓你的樣式表更高效的方法，益處是在這些技巧下，不僅下載時間被減少了，而且清晰、易于理解、更改的代碼隨之而來。就算你用排版工具來編輯樣式表，也可以在最后用這些方法將其改定為高效的樣子。
【編輯推薦】
