樣式表編寫效率手冊

1、樣式表編寫效率手冊原文翻譯效率的好處CSS最受追捧的優(yōu)點(diǎn)就是減小頁面體積，從而減少了下載時(shí)間，無論是在 頁面第一次被下載時(shí)，還是此后直接從緩存中加載。事實(shí)的確如此，但是，這 個(gè)在頁面首次被下載過程中節(jié)省下來的體積往往又有很大一部分被浪費(fèi)掉了， 原因就是極度冗余的樣式表代碼。好吧，一切都結(jié)束了，讓我們重新開始。你將學(xué)習(xí)一些高效的樣式表編寫 “密技”，開始對(duì)你的樣式表敲骨吸髓榨干到最后一滴汁。當(dāng)然，你不可能藉 此節(jié)省“巨大”的頁面體積，不過，對(duì)于那些在激烈的競爭中求生存的網(wǎng)站， 省一個(gè)字節(jié)是一個(gè)字節(jié)，這些節(jié)省的字節(jié)對(duì)他們而言是極具價(jià)值的。有這么幾個(gè)范圍可以進(jìn)行“字節(jié)瘦身”，包括 簡寫屬性、多重聲明

2、、使用 默認(rèn)值、屬性繼承和空白的處理。簡寫屬性在如何設(shè)置頁面邊距為零（Zeroing page margins） 文談及了幾個(gè)CSS簡寫屬 性，不過關(guān)于這個(gè)主題仍然有很多可以說的。常用的簡寫屬性包括? font 字體，控制font-size（字體尺寸）、font-weight（字體磅數(shù)）、line-height（行高）等? backgrou nd 背景，控制元素的背景、定位、重復(fù)等? list-style 列表樣式，設(shè)置列表項(xiàng)目符號(hào)的屬性? margin 邊距，定義盒裝模型各條邊框旁留出的空白的寬度? border 邊框，定義盒狀容器各條邊框的樣式屬性，此處會(huì)涉及到另 幾個(gè)涉及邊框的簡寫屬性?

3、 padd ing 內(nèi)邊距，定義盒狀容器各條邊框內(nèi)側(cè)留出的補(bǔ)白寬度以上列表項(xiàng)可以直接鏈接到 W3CCSS 2 specificatio ns中相關(guān)的內(nèi)容章節(jié)。例如，font （字體）屬性是一次性同時(shí)設(shè)置font-style（字體樣式）、font-variant （字體變體）、font-weight （字體磅數(shù)）、font-size （字體尺寸）、lineheight （行高）和font-family （字型組）的簡寫屬性。然而，并不是所有這些屬 性都必須在簡寫屬性中同時(shí)用到。當(dāng)簡寫格式中的某些值被省略時(shí)，每個(gè)“失 蹤”的屬性實(shí)際上都被指定使用它的默認(rèn)值，這些值都可以在W3Cspecificat

4、ions的font property（字體屬性）內(nèi)容部分中找到。如果在一個(gè)樣式表文件中大量使用了字體相關(guān)的樣式控制屬性，那么使用這個(gè)簡寫屬性將能 顯著縮減樣式表的體積。background（背景）和list-style（列表樣式）屬性也有類似的作用。列表中剩下的幾個(gè)簡寫屬性涉及到一個(gè) CSS盒狀容器的四條邊框，和前幾個(gè)屬性情況有所 不同。盒狀容器邊框的簡寫屬性任何一個(gè)區(qū)塊級(jí)元素 （divs 區(qū)塊、 tables 表格、 lists 列表、 paragraphs 段落，等等 ） 的四條邊框都有各自的 margins 、 borders 和 padding 屬性，可以各自單獨(dú)設(shè)置它們的寬度。就拿

5、borders 來說，每條邊框 都可以獨(dú)立分配 border-style （邊框式樣 ）和 border-color （ 邊框顏色 ）。要是將 所有這些屬性統(tǒng)統(tǒng)拼寫出來，乖乖，單這一條規(guī)則集就夠冗長的了！使用簡寫 規(guī)則可以極大地減少工作量。時(shí)鐘 假如盒狀容器四條邊框的某個(gè)邊框?qū)傩远家粯?，那樣的話只要使用基本的簡?屬性就可以了，比如這樣寫 : margin: 5px;border-width: 5px;padding: 5px;注意 : 必須設(shè)置 border-style（ 邊框式樣 ） 才能顯示邊框。為此我們可以定義 border-style 屬性或在 border 屬性中設(shè)置式樣。僅僅使用

6、 border-width 屬性 是不能顯示邊框的。可是，假如出現(xiàn)其中幾條邊框的值并不相同的情況，這時(shí)候，一種我們稱之為“時(shí)鐘”的CSS特性開始起作用了。讓我們把一個(gè)盒狀容器想象成一個(gè)鐘面。當(dāng)指針向上直指，它們所指的相當(dāng)于盒狀容器的頂邊，也正是簡寫屬性的第一 個(gè)值。接下來是三點(diǎn)鐘的位置，相當(dāng)于盒狀容器的右側(cè)邊。然后是六點(diǎn)鐘位 置，相當(dāng)于 盒狀容器的底邊，最后九點(diǎn)鐘方位指代左側(cè)邊。來看個(gè)例子。我們想在頁面上放一個(gè)盒狀容器，它的頂邊距寬10px、右邊距寬5px、底邊距寬3px、沒有左邊距。那么用 margin簡寫屬性可以這么寫：margin: 10px 5px 3px 0;在聲明屬性時(shí)，這些屬性值

7、之間必須用也只能用空格分隔。并且，除非屬性值 為零，否則每個(gè)值都必須標(biāo)注單位。注意一下邊距為零時(shí)值被定義成 0，因?yàn)闊o論什么值只要是零，單位就無關(guān)緊 要。任何一種單位 （px, em, %, 等） 的零值等于任何其他單位的零值。改型時(shí)鐘 當(dāng)某幾條邊框相同時(shí)，邊框的簡寫屬性可以更大程度地濃縮。如前文所述，當(dāng) 所有邊框都一致時(shí)，所有邊框使用同一值，可是，假如頂邊和底邊一致，而右 側(cè)邊和左側(cè)邊一致，這樣的情況下，邊距的代碼可以寫成如下這樣 ：margin： 10px 5px;這樣寫將頂邊和底邊的邊距設(shè)置成 10px，兩側(cè)的側(cè)邊距為5px。還有一招，就 是當(dāng)頂邊和底邊不同而側(cè)邊一致的情況。頂邊距 10

8、px、左側(cè)和右側(cè)邊距5px、 底邊距20px，我們就這么寫：margi n: 10px 5px 20px;這全都取決于簡寫屬性用到的值得數(shù)目以及次序。記住，一個(gè)值 =所有的邊框； 兩個(gè)值=頂/底邊框，兩側(cè)邊框；三個(gè)值= 頂邊框，兩側(cè)邊框，底邊框；四個(gè)值 = 遵循鐘面原則。好了，不太難記吧？邊框差異border shorthand properties （邊框簡寫屬性）和padding（內(nèi)邊距）同樣也可以 使用這種“時(shí)鐘”簡寫方法。border-width ， border-color ，border-style 和padding和margin（邊距）的操控方式相同。不過，border屬性還是有

9、一點(diǎn)差異 的。border屬性可以同時(shí)設(shè)置盒狀容器的四條邊框的border-width、borderstyle 和 border-color 。當(dāng)四條邊框全都一樣時(shí)很好處理，但是如果他們不一樣呢？難道我們還要回到 從前諸如border-top、border-right 的日子么？好吧，也許可以。幸運(yùn)的是， 我們另咼招。譬如說盒狀容器各邊框的式樣和顏色都相同，唯獨(dú)寬度各不相同。最直接有效 的寫法是照常使用基本的border簡寫屬性定義border-width、border-style 和border-color ，然后單獨(dú)使用border-width屬性定義不同的邊框?qū)挾葋砀?蓋前面的設(shè)置，象下

10、面這樣：border: 10px solid red;border-width: 10px 5px 3px 0;如果四條邊框的所有邊框?qū)傩远几鞑幌嗤?，那么這個(gè)辦法就派不上大用場了，不過這種情形畢竟不常發(fā)生。如果僅是 border-style 或者border-color 屬性 各有變化，那么用這個(gè)辦法稍作修改就能像處理 border-width 那樣來處理這些 屬性了。接下來我們一起來看另一種情況，看看高效的CSS編寫方式有什么不同。多重聲明譬如說我們有六個(gè)絕對(duì)定位的區(qū)塊（Dreamweaver中的層），它們?nèi)家粯?，?不同的是它們彼此隔開一定距離橫排在頁面頂部。由于它們的頁面定位不同， 必

11、須給它們?nèi)为?dú)的類名或ID，除此之外它們其余的屬性統(tǒng)統(tǒng)一樣。用排版編輯器的話或許會(huì)為每個(gè)ID單獨(dú)編寫樣式規(guī)則，包括所有的字體規(guī)則、 文本規(guī)則、定位聲明等等。像這樣不停地重復(fù)那些完全一樣的規(guī)則看上去實(shí)在 不是什么明智之舉，不是么？沒錯(cuò)。下面就是如何最大限度地精簡這些規(guī)則的 方法：#first left: 0;#second left: 100px;#third left: 200px;#fourth left: 300px;#fifth left: 400px;#sixth left: 500px;#first, #seco nd, #third, #fourth, #fifth, #sixth

12、 positi on: absolute;top: 0;width: 75px;fon t-size: .9em;fon t-weight: bold;text-alig n: cen ter;lin e-height: 1.4em;backgro un d-color: silver;color: n avy;padd ing: 5px;border: 1px solid n avy;通過逐個(gè)列出這些相同區(qū)塊的ID，并用逗號(hào)緊跟一個(gè)空格來分隔這些ID，后面 大段的樣式規(guī)則將同時(shí)應(yīng)用于所有這六個(gè)區(qū)塊。顯而易見，如果每個(gè)ID都重復(fù)定義這些屬性，整個(gè)CSS就會(huì)臃腫不堪。這可能是唯一最有效減小樣式表

13、體積 的辦法了。注意：確保最后一個(gè)ID選擇符后面沒有跟逗號(hào)，而應(yīng)該像上面的多重ID規(guī)則 集代碼樣本寫的一樣。有些瀏覽器仍舊能顯示這些區(qū)塊，但是有些就會(huì)將這個(gè) 認(rèn)作是代碼錯(cuò)誤而不顯示任何一個(gè)區(qū)塊。使用默認(rèn)值多數(shù)CSS屬性都有初始默認(rèn)值，而當(dāng)你為元素的這些屬性重新定義了值的時(shí) 候，它們的默認(rèn)值也就被覆蓋了。例如內(nèi)邊距的各個(gè)屬性，padding-top、padding-right、padding-bottom 和 padding-left，它們的初始值都是 0。女口果不希望目標(biāo)元素有內(nèi)邊距，那么內(nèi)邊距屬性就可以省略不寫。注意：我們先前討論的簡寫屬性本身并沒有默認(rèn)值。通常各個(gè)值都取自簡寫模型中所表現(xiàn)的

14、單個(gè)屬性。雖然 CSS 2 specificati onProperty In dex（ 屬性索引）里列出的默認(rèn)值里很多是none或者0，但瀏覽器通常自己會(huì)根據(jù)不同元素 為某些屬性設(shè)置不同默認(rèn)值的。例如:Opera瀏覽器預(yù)設(shè)body元素的內(nèi)邊距為8px。h1-h6標(biāo)題和段落元素通 常默認(rèn)的邊距都不為零。不同的瀏覽器，為 lists（列表）和list-items（ 列表項(xiàng)） 預(yù)設(shè)的內(nèi)外邊距非零默認(rèn)值也不盡相同。屬性繼承避免編寫冗余代碼的另外一個(gè)辦法就是注意子元素從父元素那里繼承下來的屬 性?？梢岳^承的屬性著實(shí)不多，可其中很多還是不常用到的屬性，像voicefamily 。常用的可繼承屬性的列出來

15、也沒幾個(gè)（按字母順序）:? color 顏色? font (and related properties) 字體及相關(guān)屬性?letter-spac ing字距? lin e-height 行高? list-style (and related properties)列表樣式及相關(guān)屬性? text-alig n文本對(duì)齊? text- in de nt文本縮進(jìn)? text-tra nsform 文本轉(zhuǎn)換? white-space 空白? word-spac ing 詞距在某些舊版瀏覽器中繼承特性存在很多問題，而現(xiàn)在的新版瀏覽器一般來說都 能正確實(shí)現(xiàn)繼承。只要了解了哪些屬性可以繼承，你就又能少寫不少

16、多余代碼 了。重申一下，要查閱完整的屬性列表請查看CSS 2 Property In dex(CSS 2屬性索引)?？瞻椎奶幚磉@里說的空白不是CSS里那個(gè)有特定值的white-space屬性，這里說的是樣式 表文件里面本來就存在的空白間隔。這些個(gè)間隔來自于那些用于產(chǎn)生新行的換 行符，以及那些在單獨(dú)一行里有助提高可讀性的空格。盡管移除這些間隔可以 省出幾個(gè)字節(jié)的體積，但是通常也省不了多少。假如這些空隔被移除了，樣式表會(huì)變得晦澀難讀，更別提以后做修改了。如果 工程明確要求刪除每一個(gè)多余的字節(jié)，那你最好新建一個(gè)方便閱讀的“主”樣 式 表文件，然后復(fù)制一份，再把其中所有的空白移除，這份樣式表就是使用中

17、 的“現(xiàn)場版”樣式表。要是今后要修改的話，在那份易讀的主樣式表里修改， 再像上面那樣復(fù)制一份并移除空白，繼續(xù)作為“現(xiàn)場版”。小心！有些空格是CSS編碼中必需的，要是這些空格被移除了，CSS規(guī)則也會(huì)跟著改變并導(dǎo)致一些意外結(jié)果的發(fā)生。W3C的規(guī)范說明中要使用了諸如spaceseparated,(以空格間隔)這樣的措詞，那么這些空格就是必需的。這種情況常 見于簡寫屬性的各個(gè)屬性值之間。往往我們講到包含選擇符就講到包含組合符，它就是一個(gè)空格，要是把選擇符里所有的空格都移除，那可不是什么好主 意。也許移除空格這樣的活留給那些狂熱分子最適合不過了，是吧？ 總結(jié)至此你已經(jīng)學(xué)習(xí)了如何使你的樣式表更簡潔經(jīng)濟(jì)高效

18、的幾種方法。經(jīng)常使用這 些技巧的好處不僅僅是節(jié)省樣式表體積、加快下載，更令樣式表常葆清爽整 潔，通常易讀易懂的代碼也易于后期必要的修改維護(hù)。即便你是用排版編輯器 來創(chuàng)建你的樣式表，你一樣可以用本文中所提及的這些方法來將你的“成品” 編寫得更合理更高效！Holly n Joh n e-mail ?positi oni severyth ing Last updated: July 3, 2004Tran slated by 全文完Created November, 2003POPOEVSR)October 10, 2004譯者注：本文在翻譯過程中有幾點(diǎn)引起我的注意，主要是一些專屬名詞如何翻 譯最為恰當(dāng)，我原本也有看過不少國內(nèi)的 Web Standards相關(guān)的翻譯作品以及 中文本土作品，其間對(duì)于一些名詞一直糾纏不清，各說一詞，我也就暫且不去 管他們了，漢語博大精深，想要統(tǒng)一一個(gè)單詞往往不是件容易事，更何況本來 就是“舶來”的術(shù)語。比如padding，有翻成“填充”的，有翻成“補(bǔ)白” 的，還有翻成“補(bǔ)丁”，對(duì)于后二者我倒覺得可以接受，至少諧音可以方便洋 文差的朋友記憶，不過我還是堅(jiān)持把它翻成“內(nèi)邊距”，因?yàn)檫@樣從表意上說 最形象，padding本來就是邊框到內(nèi)部文本的距離么，