實現用CSS高效率進行網頁編碼的方法

來源:互聯網
上載者:User
css|編碼|網頁

  今天我們來看一些介紹:如何才能高效的進行CSS編碼?

  CSS 被吹捧的好處之一就是它能減小頁面大小,由此縮短下載時間,不僅僅是首頁的載入,還包括樣式表被緩衝以後,後續頁面的載入也被加快了的那部分時間。這沒錯,但首頁載入時間的縮短几乎看不出來,這是因為 CSS 代碼往往過於冗長了。

  好吧,現在一切都不同了。學點高效地進行 CSS 編碼的技巧吧,讓你把樣式表馬上裁減到最小為止。自然,你可能看不到什麼驚人的改變,但對於大站來說,微小的位元組減少也很重要。

  有很多地方可以減少代碼的長度,包括 簡記屬性 (shorthand properties), 多重聲明 (multiple declarations),預設值 (default values), 繼承 (inheritance),和空白 (white space)。

  簡記屬性

  Zeroing page margins 提到了一組這樣的簡記屬性,但對於此還有更多的。

  通常簡記屬性包括:

 font (控制 "font-size", "font-weight", "line-height", 等等) background   (控制元素的背景,置放位置,重複次數,等等)
 list-style (設定列表元素前邊那個“原點”的屬性)
 margin (定義 box   各側的邊緣空白 (margin) 寬度)
 border (定義 box 邊界 (border) 的屬性 —— 有很多和邊界有關的簡記屬性)  padding (定義 box 各側的補白 (padding) 寬度)

  上述項目是連結至 W3C CSS 2 規範 的相關章節的。

  例如, font 屬性 是用於同時設定 font-style, font-variant, font-weight, font-size, line-height, 和 font-family 的簡記屬性。當然,它們並非全都必須寫在簡記屬性中。一旦在簡記屬性中忽略了其中某個,那些缺失的屬性都將被設定為它們的 初始值,就像 W3C 規範 中 font property 一節提到的那樣。若需要控制很多和字型相關的屬性,使用這個簡記屬性就可以省下樣式表中的大量位元組了。

  background 和 list-style 屬性也是如此。現在還剩下關於 CSS 盒 (box) 模型 四邊的那些屬性和一點沒法歸類的雜碎了。

  盒側邊的簡記屬性

  任何塊級 (block level) 元素 (像 div,表格,列表,段落等) 的四邊都有 邊白 (margin),邊界 (border),和 補白 (padding),都可以分別設定不同的寬度。對於邊界 (border) 來說,還能給每邊分配不同的 border-style 和 border-color 。若要一條條地顯式地指明所有這些屬性,代碼就會變得很冗長。使用簡記規則的意義正在於此:徹底地減少這樣負擔。

  “鐘面”

  當需要指定這三類“盒側”屬性之一,而且各側的情況又是一樣的時候,使用簡記屬性最基本的功能就行了:

margin: 5px;border-width: 5px;padding: 5px;

  注意:要讓邊界顯示出來,還必須設定 border-style 屬性,否則單有 border-width 邊界是顯示不出來的。既可以直接通過 border-style 來設定它,也可以通過 border 屬性。

  然而很有可能某一側需要一個不同的值,這時 CSS 的“鐘面”特性就上台了。把此處的盒子想象為一個鐘面,當指標指向 12 點時,表示盒子的正上方,這就是簡記屬性中第一個值的含義;下一個是 3 點,這是盒子的右側;接下來是 6 點,表示盒子的下方;最後呢是 9 點,盒子的左側。

  讓我們看看這個例子吧。在頁面中我們需要一個 10px 上邊白,5px 右邊白, 3px 下邊白,無左邊白的盒子。則 margin 簡記屬性應該這麼寫:

margin: 10px 5px 3px 0;

  在屬性的聲明中,幾個值必須也只能用空格來分隔。而且只要那個值不是零,就必須給它指定單位。

  為什麼零寬度的邊白就不需要指定單位了呢?因為零個任何單位 (px, em, %, 等等) 的值也就等於任意其他單位的值。

  改進的鐘面

  當某些值重複時,這些“盒側”屬性還能壓榨得更短。前面提到過,若各側都一樣,可以只指定一個,讓它應用到全部。而一旦頂部和底部的樣式是一致的,左側和右側卻是另一種,margin 的代碼可以這麼寫:

margin: 10px 5px;

  這行代碼把頂部和底部的邊白設定為 10px,兩側設為 5px。最後一個技巧是這樣的:若頂部和底部的不同,兩側的卻是一樣的,比如上邊白 10px,左右邊白 5px,下邊白 20px,我們可以這麼寫:

margin: 10px 5px 20px;

  這些縮寫完全是根據給出值的數目和順序決定的。總結起來,一個值 = 所有各側;兩個值 = 上下一種,兩側另一種;三個值 = 上側一種,左右同一種,下側一種;當然還有四個值 = 按照順時針。好了,現在不那麼難記住了吧?

  邊界 (border) 的一些區別

  同樣的鐘面簡記模型也可以用於 border 簡記屬性 和 padding。 border-width , border-color , border-style , 與 padding 也採用和 margin 一樣的方式工作。然而處理 border 屬性時卻有點不同。 border 屬性是同時給盒子的各側設定 border-width, border-style, 及 border-color 屬性的。

  如果所有四側的樣式都一樣,那當然不會有什麼問題。可萬一他們不同呢?我們還得回去用那些老式的 border-top, border-right 們?沒錯,是可以。但幸好我們還有更有效率一點的方法。

  考慮我們這個盒子的各個邊界有同樣的 style 和 color,但寬度不同的情況,最有效方法是,先像往常一樣用 border 簡記法來定義好 border-width, border-style, 和 border-color;然後再設定一次 border-width 屬性,覆蓋上面設定的寬度:

border: 10px solid red;
border-width: 10px 5px 3px 0;

  如果所有的邊界屬性 (width、style 和 color) 都各側不同,那上面的方法恐怕就沒什麼用了,但通常不會遇到這麼怪異的情況。如果變化的屬性僅僅是 border-style 或者 border-color 的話,上述的方法改改就可以像 border-width 的情況那樣用了。

  下面我們看看在另一種情形下書寫高效的 CSS 會帶來什麼改變。

  多重聲明

  考慮我們有 6 個採用絕對位置的 div (比如 Dreamweaver 裡的層),且它們的其他屬性都一樣,只不過在頁面中的位置不同。因為它們的位置不同,自然應該有不同的 ID 或者是 class,但剩下的屬性還是一樣的。

  一個 (所見即所得 (WYSIWYG)的) 布局編輯器恐怕給每個 ID 都各自寫一套屬性,包括字型的規則、文本的規則、位置的定義等等。可一遍遍地給這些 div 重複完全一樣的規則未免笨了點,不是嗎?那這樣就可以把這些規則減到最短了:

#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;
}

  列出所有類似的這些 div 的 ID,用 , 和一個空格分隔,下面的規則塊會被應用到所有這些 ID 上。顯然這樣的規則如果給每個 ID 都重複一遍,代碼就膨脹得多了。這恐怕是最常用也最有效縮短樣式表方法了。

  注意:注意最後一個 ID 選擇符 並沒有 跟著一個逗號。(若多了逗號) 有些瀏覽器中可能還能看到那些 div,另一些就有可能把這樣的樣式表視為錯誤而不顯示任何一個 div 了。

  預設值

  許多 CSS 屬性都有它們的預設值,如果這個屬性沒被定義取代,它們就將應用於 HTML 元素上。比如說每個補白屬性中, padding-top , padding-right , padding-bottom , 和 padding-left 的初始值都是 0 。因此如果某個元素不需要任何的補白,自然就可以不設定補白的那些屬性了。

  注意: 那些簡記屬性——比如我們先前討論過的—— 裡面,或者其本身都沒有什麼預設的值。畢竟簡記屬性其實只是獨立屬性的一種重現而已,所以如果硬說它們有預設值的話,採用的也是獨立屬性的那些預設值。儘管 CSS 規範的 Property Index 一節中規定的許多預設值都是 none 或 0 ,瀏覽器們卻往往給不同的屬性設定一些不同的預設值。

  例:Opera 瀏覽器給 body 元素設定了 8px 的補白。h1-h6 標題和段落,預設都有非零的邊白。列表和列表子項中用到的預設邊白和補白,每個瀏覽器都有所不同。

  繼承

  另一個避免寫出冗餘代碼的方法是,瞭解哪些屬於父元素的屬性會由子項目繼承下來。會被繼承的屬性只有很少一些,而且其中大部分是不常用的,比如 voice-family 。所以列個能繼承的常用屬性的表,其實是很短的,下面就是按字母順序排出的:

color
font (及其相關屬性)
letter-spacing
line-height
list-style   (及其相關屬性)
text-align
text-indent
text-transform
white-space  
word-spacing

  在某些老式瀏覽器中,繼承功能可能有些問題,然而大部分現代瀏覽器在這方面都處理得很正確。記住上面這個列表,可以讓你少寫點多餘的代碼。當然了,如果你想看看完整的列表,還是參考 CSS 2 Property Index。
 
  空白

  並非指的是 CSS 的 white-space 屬性,這個屬性早有確定的值了。我們說的是樣式表本身含有的那些空白。空白常用於換行字元,和在一行裡面用來改進可讀性的空格。儘管把它們都刪除可能會剩下個把位元組,但好處畢竟有限。

  關鍵是,如果把它們都刪除了,CSS 檔案就會變得非常難讀,更難修改。要是你真的打算這麼做,不妨建立一個主 CSS 檔案,再根據它產生一個刪除了所有空白的副本,修改的時候只修改主檔案,根據主檔案重建一次副本就行了。

  請注意,CSS 編碼中需要一些空白,刪除那些必要的會導致你未曾預料的問題。如果 W3C 規範中用了 "space separated" 這樣的語句,那麼空格就不可省略。常見的像簡記屬性中分隔值的那些空格,還有 下降合并符 (descendant combinator),或者稱為下降選擇符,就是一個空格。所以說不到非用不可的時候,刪除空白這樣的方法還是少用。

  最後

  你現在學會了好幾種讓你的樣式表更高效的方法,益處是在這些技巧下,不僅下載時間被減少了,而且清晰、易於理解、更改的代碼隨之而來。就算你用排版工具來編輯樣式表,也可以在最後用這些方法將其改定為高效的樣子。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。