書(shū)寫(xiě)高效的樣式表(CSS)的方法

2020-03-24 17:15:43

字體：大中小

供稿：網(wǎng)友

CSS 被吹捧的好處之一就是它能減小頁(yè)面大小，由此縮短下載時(shí)間，不僅僅是首頁(yè)的載入，還包括樣式表被緩存以后，后續(xù)頁(yè)面的載入也被加快了的那部分時(shí)間。這沒(méi)錯(cuò)，但首頁(yè)載入時(shí)間的縮短幾乎看不出來(lái)，這是因?yàn)?CSS 代碼往往過(guò)于冗長(zhǎng)了。好吧，現(xiàn)在一切都不同了。學(xué)點(diǎn)高效地進(jìn)行 CSS 編碼的技巧吧，讓你把樣式表馬上裁減到最小為止。自然，你可能看不到什么驚人的改變，但對(duì)于大站來(lái)說(shuō)，微小的字節(jié)減少也很重要。有很多地方可以減少代碼的長(zhǎng)度，包括簡(jiǎn)記屬性 (shorthand properties)，多重聲明 (multiple declarations)，默認(rèn)值 (default html' target='_blank'>values)，繼承 (inheritance)，和空白 (white space)。簡(jiǎn)記屬性 Zeroing page margins 提到了一組這樣的簡(jiǎn)記屬性，但對(duì)于此還有更多的。通常簡(jiǎn)記屬性包括：font (控制 "font-size", "font-weight", "line-height", 等等)
background (控制元素的背景，放置位置，重復(fù)次數(shù)，等等)
list-style (設(shè)置列表元素前邊那個(gè)“原點(diǎn)”的屬性)
margin (定義 box 各側(cè)的邊緣空白 (margin) 寬度)
border (定義 box 邊界 (border) 的屬性 —— 有很多和邊界有關(guān)的簡(jiǎn)記屬性)
padding (定義 box 各側(cè)的補(bǔ)白 (padding) 寬度)
上述項(xiàng)目是鏈接至 W3C CSS 2 規(guī)范的相關(guān)章節(jié)的。例如， font 屬性是用于同時(shí)設(shè)置 font-style, font-variant, font-weight, font-size, line-height, 和 font-family 的簡(jiǎn)記屬性。當(dāng)然，它們并非全都必須寫(xiě)在簡(jiǎn)記屬性中。一旦在簡(jiǎn)記屬性中忽略了其中某個(gè)，那些缺失的屬性都將被設(shè)置為它們的初始值，就像 W3C 規(guī)范中 font property 一節(jié)提到的那樣。若需要控制很多和字體相關(guān)的屬性，使用這個(gè)簡(jiǎn)記屬性就可以省下樣式表中的大量字節(jié)了。 background 和 list-style 屬性也是如此。現(xiàn)在還剩下關(guān)于 CSS 盒 (box) 模型四邊的那些屬性和一點(diǎn)沒(méi)法歸類(lèi)的雜碎了。盒側(cè)邊的簡(jiǎn)記屬性任何塊級(jí) (block level) 元素 (像 div，表格，列表，段落等) 的四邊都有邊白 (margin)，邊界 (border)，和補(bǔ)白 (padding)，都可以分別設(shè)置不同的寬度。對(duì)于邊界 (border) 來(lái)說(shuō)，還能給每邊分配不同的 border-style 和 border-color 。若要一條條地顯式地指明所有這些屬性，代碼就會(huì)變得很冗長(zhǎng)。使用簡(jiǎn)記規(guī)則的意義正在于此：徹底地減少這樣負(fù)擔(dān)。 “鐘面” 當(dāng)需要指定這三類(lèi)“盒側(cè)”屬性之一，而且各側(cè)的情況又是一樣的時(shí)候，使用簡(jiǎn)記屬性最基本的功能就行了：margin: 5px;
border-width: 5px;
padding: 5px;
注意：要讓邊界顯示出來(lái)，還必須設(shè)置 border-style 屬性，否則單有 border-width 邊界是顯示不出來(lái)的。既可以直接通過(guò) border-style 來(lái)設(shè)置它，也可以通過(guò) border 屬性。然而很有可能某一側(cè)需要一個(gè)不同的值，這時(shí) CSS 的“鐘面”特性就上臺(tái)了。把此處的盒子想象為一個(gè)鐘面，當(dāng)指針指向 12 點(diǎn)時(shí)，表示盒子的正上方，這就是簡(jiǎn)記屬性中第一個(gè)值的含義；下一個(gè)是 3 點(diǎn)，這是盒子的右側(cè)；接下來(lái)是 6 點(diǎn)，表示盒子的下方；最后呢是 9 點(diǎn)，盒子的左側(cè)。讓我們看看這個(gè)例子吧。在頁(yè)面中我們需要一個(gè) 10px 上邊白，5px 右邊白， 3px 下邊白，無(wú)左邊白的盒子。則 margin 簡(jiǎn)記屬性應(yīng)該這么寫(xiě)：margin: 10px 5px 3px 0; 在屬性的聲明中，幾個(gè)值必須也只能用空格來(lái)分隔。而且只要那個(gè)值不是零，就必須給它指定單位。為什么零寬度的邊白就不需要指定單位了呢？因?yàn)榱銈€(gè)任何單位 (px, em, %, 等等) 的值也就等于任意其他單位的值。改進(jìn)的鐘面當(dāng)某些值重復(fù)時(shí)，這些“盒側(cè)”屬性還能壓榨得更短。前面提到過(guò)，若各側(cè)都一樣，可以只指定一個(gè)，讓它應(yīng)用到全部。而一旦頂部和底部的樣式是一致的，左側(cè)和右側(cè)卻是另一種，margin 的代碼可以這么寫(xiě)：margin: 10px 5px; 這行代碼把頂部和底部的邊白設(shè)置為 10px，兩側(cè)設(shè)為 5px。最后一個(gè)技巧是這樣的：若頂部和底部的不同，兩側(cè)的卻是一樣的，比如上邊白 10px，左右邊白 5px，下邊白 20px，我們可以這么寫(xiě)：margin: 10px 5px 20px; 這些縮寫(xiě)完全是根據(jù)給出值的數(shù)目和順序決定的。總結(jié)起來(lái)，一個(gè)值 = 所有各側(cè)；兩個(gè)值 = 上下一種，兩側(cè)另一種；三個(gè)值 = 上側(cè)一種，左右同一種，下側(cè)一種；當(dāng)然還有四個(gè)值 = 按照順時(shí)針。好了，現(xiàn)在不那么難記住了吧？邊界 (border) 的一些區(qū)別同樣的鐘面簡(jiǎn)記模型也可以用于 border 簡(jiǎn)記屬性和 padding。 border-width , border-color , border-style , 與 padding 也采用和 margin 一樣的方式工作。然而處理 border 屬性時(shí)卻有點(diǎn)不同。 border 屬性是同時(shí)給盒子的各側(cè)設(shè)置 border-width, border-style, 及 border-color 屬性的。如果所有四側(cè)的樣式都一樣，那當(dāng)然不會(huì)有什么問(wèn)題。可萬(wàn)一他們不同呢？我們還得回去用那些老式的 border-top, border-right 們？沒(méi)錯(cuò)，是可以。但幸好我們還有更有效率一點(diǎn)的方法。考慮我們這個(gè)盒子的各個(gè)邊界有同樣的 style 和 color，但寬度不同的情況，最有效的方法是，先像往常一樣用 border 簡(jiǎn)記法來(lái)定義好 border-width, border-style, 和 border-color；然后再設(shè)置一次 border-width 屬性，覆蓋上面設(shè)置的寬度：border: 10px solid red;
border-width: 10px 5px 3px 0; 如果所有的邊界屬性 (width、style 和 color) 都各側(cè)不同，那上面的方法恐怕就沒(méi)什么用了，但通常不會(huì)遇到這么怪異的情況。如果變化的屬性僅僅是 border-style 或者 border-color 的話，上述的方法改改就可以像 border-width 的情況那樣用了。下面我們看看在另一種情形下書(shū)寫(xiě)高效的 CSS 會(huì)帶來(lái)什么改變。多重聲明考慮我們有 6 個(gè)采用絕對(duì)定位的 div (比如 Dreamweaver 里的層)，且它們的其他屬性都一樣，只不過(guò)在頁(yè)面中的位置不同。因?yàn)樗鼈兊奈恢貌煌匀粦?yīng)該有不同的 ID 或者是 class，但剩下的屬性還是一樣的。一個(gè) (所見(jiàn)即所得的) 布局編輯器恐怕給每個(gè) ID 都各自寫(xiě)一套屬性，包括字體的規(guī)則、文本的規(guī)則、位置的定義等等。可一遍遍地給這些 div 重復(fù)完全一樣的規(guī)則未免笨了點(diǎn)，不是么？那這樣就可以把這些規(guī)則減到最短了：#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: 1px solid navy;
} 列出所有類(lèi)似的這些 div 的 ID，用 , 和一個(gè)空格分隔，下面的規(guī)則塊會(huì)被應(yīng)用到所有這些 ID 上。顯然這樣的規(guī)則如果給每個(gè) ID 都重復(fù)一遍，代碼就膨脹得多了。這恐怕是最常用也最有效的縮短樣式表方法了。注意：注意最后一個(gè) ID 選擇符并沒(méi)有跟著一個(gè)逗號(hào)。(若多了逗號(hào)) 有些瀏覽器中可能還能看到那些 div，另一些就有可能把這樣的樣式表視為錯(cuò)誤而不顯示任何一個(gè) div 了。默認(rèn)值許多 CSS 屬性都有它們的默認(rèn)值，如果這個(gè)屬性沒(méi)被定義取代，它們就將應(yīng)用于 HTML 元素上。比如說(shuō)每個(gè)補(bǔ)白屬性中， padding-top , padding-right , padding-bottom , 和 padding-left 的初始值都是 0 。因此如果某個(gè)元素不需要任何的補(bǔ)白，自然就可以不設(shè)置補(bǔ)白的那些屬性了。注意：那些簡(jiǎn)記屬性——比如我們先前討論過(guò)的—— 里面，或者其本身都沒(méi)有什么默認(rèn)的值。畢竟簡(jiǎn)記屬性其實(shí)只是獨(dú)立屬性的一種重現(xiàn)而已，所以如果硬說(shuō)它們有默認(rèn)值的話，采用的也是獨(dú)立屬性的那些默認(rèn)值。盡管 CSS 規(guī)范的 Property Index 一節(jié)中規(guī)定的許多默認(rèn)值都是 none 或 0 ，瀏覽器們卻往往給不同的屬性設(shè)置一些不同的默認(rèn)值。例：Opera 瀏覽器給 body 元素設(shè)置了 8px 的補(bǔ)白。h1-h6 標(biāo)題和段落，默認(rèn)都有非零的邊白。列表和列表子項(xiàng)中用到的默認(rèn)邊白和補(bǔ)白，每個(gè)瀏覽器都有所不同。繼承另一個(gè)避免寫(xiě)出冗余代碼的方法是，了解哪些屬于父元素的屬性會(huì)由子元素繼承下來(lái)。會(huì)被繼承的屬性只有很少一些，而且其中大部分是不常用的，比如 voice-family 。所以列個(gè)能繼承的常用屬性的表，其實(shí)是很短的，下面就是按字母順序排出的：color
font (及其相關(guān)屬性)
letter-spacing
line-height
list-style (及其相關(guān)屬性)
text-align
text-indent
text-transform
white-space
word-spacing
在某些老式瀏覽器中，繼承功能可能有些問(wèn)題，然而大部分現(xiàn)代瀏覽器在這方面都處理得很正確。記住上面這個(gè)列表，可以讓你少寫(xiě)點(diǎn)多余的代碼。當(dāng)然了，如果你想看看完整的列表，還是參考 CSS 2 Property Index。空白并非指的是 CSS 的 white-space 屬性，這個(gè)屬性早有確定的值了。我們說(shuō)的是樣式表本身含有的那些空白。空白常用于換行字符，和在一行里面用來(lái)改進(jìn)可讀性的空格。盡管把它們都刪除可能會(huì)剩下個(gè)把字節(jié)，但好處畢竟有限。關(guān)鍵是，如果把它們都刪除了，CSS 文件就會(huì)變得非常難讀，更難修改。要是你真的打算這么做，不妨創(chuàng)建一個(gè)主 CSS 文件，再根據(jù)它生成一個(gè)刪除了所有空白的副本，修改的時(shí)候只修改主文件，根據(jù)主文件重新生成一次副本就行了。請(qǐng)注意，CSS 編碼中需要一些空白，刪除那些必要的會(huì)導(dǎo)致你未曾預(yù)料的問(wèn)題。如果 W3C 規(guī)范中用了 "space separated" 這樣的語(yǔ)句，那么空格就不可省略。常見(jiàn)的像簡(jiǎn)記屬性中分隔值的那些空格，還有下降合并符 (descendant combinator)，或者稱為下降選擇符，就是一個(gè)空格。所以說(shuō)不到非用不可的時(shí)候，刪除空白這樣的方法還是少用。完結(jié) 你現(xiàn)在學(xué)會(huì)了好幾種讓你的樣式表更高效的方法，益處是在這些技巧下，不僅下載時(shí)間被減少了，而且清晰、易于理解、更改的代碼隨之而來(lái)。就算你用排版工具來(lái)編輯樣式表，也可以在最后用這些方法將其改定為高效的樣子。本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS cursor的定義及用法

下一篇：斜角滑動(dòng)門(mén)導(dǎo)航條(DIV+CSS)