網頁設計：使用CSS縮寫給你的網站加速

css|設計|網頁|網頁設計|網站加速

　　關於CSS　

　　用CSS縮寫給你的網站加速

　　Web網站可用性的關鍵計量是速度，更確切地說，是頁面能以多快的速度出現在訪問者的瀏覽器視窗裡。影響速度的因素有很多種，包括Web伺服器的速度、訪問者的Internet串連情況，以及瀏覽器必須下載的檔案大小。儘管你無法控制伺服器和串連的速度，但是你可以控制構成網站Web頁面的檔案大小。

　　為了讓網站能夠更快，Web的建設者都會按常規地壓縮和最佳化網站上的每一個影像檔，這常常使得為了將檔案的大小減少幾個百分點而犧牲了映像的品質。由於CSS樣式表是純文字檔案，和映像相比相對較小，所以Web建設者很少考慮採取措施減少其CSS樣式表檔案的大小。但是，通過使用CSS縮寫以及其他的一些簡單技巧，你可以在很大程度上減少樣式表的大小。在我對自己樣式表的一次非正式的特別測試中，我把檔案的大小降低了大約25-50%。

　　用CSS縮寫給你的網站加速

　　Web網站可用性的關鍵計量是速度，更確切地說，是頁面能以多快的速度出現在訪問者的瀏覽器視窗裡。影響速度的因素有很多種，包括Web伺服器的速度、訪問者的Internet串連情況，以及瀏覽器必須下載的檔案大小。儘管你無法控制伺服器和串連的速度，但是你可以控制構成網站Web頁面的檔案大小。

　　為了讓網站能夠更快，Web的建設者都會按常規地壓縮和最佳化網站上的每一個影像檔，這常常使得為了將檔案的大小減少幾個百分點而犧牲了映像的品質。由於CSS樣式表是純文字檔案，和映像相比相對較小，所以Web建設者很少考慮採取措施減少其CSS樣式表檔案的大小。但是，通過使用CSS縮寫以及其他的一些簡單技巧，你可以在很大程度上減少樣式表的大小。在我對自己樣式表的一次非正式的特別測試中，我把檔案的大小降低了大約25-50%。

　　使用CSS的縮寫性質

　　CSS的縮寫性質(shorthand property)是一些專用的性質名，用來代替多個相關性質的集合。例如，間隙性質(padding property)是頂部間隙(padding-top)、右側間隙(padding-right)、底部間隙(padding-bottom)和左側間隙(padding-left)的縮寫。

　　使用速寫性質讓你能夠把多個性質/屬性對(property/attribute pair)壓縮排CSS樣式表的一行代碼裡。例如，想一想下面的代碼：

.sample1 { 　　margin-top: 15px; 　　margin-right: 20px; 　　margin-bottom: 12px; 　　margin-left: 24px; 　　padding-top: 5px; 　　padding-right: 10px; 　　padding-bottom: 4px; 　　padding-left: 8px; 　　border-top-width: thin; 　　border-top-style: solid; 　　border-top-color: #000000; 　　}

　　將它用一些縮寫性質來替代就能夠把代碼減少為下面這樣，兩者的實際效果是完全一樣的：

.sample1 { 　　margin: 15px 20px 12px 24px; 　　padding: 5px 10px 4px 8px; 　　border-top: thin solid #000000; 　　}

　　要注意，縮寫性質還有多個屬性，每一個(屬性)都對應一個被組合進入縮寫性質的常規性質。屬性由空白隔開。

　　當屬性是類似的值的時候，例如用於邊框空白性質(margin property)的線性測量的時候，接在縮寫性質之後的屬性的順序很重要。屬性的次序是從頂部(頂部的邊框空白)開始，然後圍繞格子(box)按順時針次序繼續。

　　如果縮寫性質的所有屬性都是相同的，那麼你可以簡單地列出單個屬性，然後在前面將它複製四遍。因此，下面的兩個性質是相等的：

　　margin: 5px 5px 5px 5px;

　　margin: 5px;

　　類似的，你可以使用接在邊框空白或者間隔性質之後的兩個屬性來代表頂部/底部和右側/左側屬性對。

　　margin: 5px 10px 5px 10px;

　　margin: 5px 10px;

　　屬性的順序在它們是不相似的值的時候是不重要的。因此，邊框顏色、邊框風格和邊框寬度等屬性可以以任何順序接在大綱性質(outline property)之後。忽略某個屬性等同於從樣式規則裡忽略掉對應的常規性質。

　　下面是CSS縮寫性質的列表以及它們所表示的常規性質。

　　Background(背景)：背景附件、背景顏色、背景映像、背景位置、背景重複

　　Border(邊框)：邊框顏色、邊框風格、邊框寬度

　　border-bottom(底部邊框)：底部邊框顏色、底部邊框樣式、底部邊框寬度

　　border-left(左側邊框)：左側邊框顏色、左側邊框樣式、左側邊框寬度

　　border-right(右側邊框)：右側邊框顏色、右側邊框樣式、右側邊框寬度

　　border-top(頂部邊框)：頂部邊框顏色、頂部邊框樣式、頂部邊框寬度

　　cue(聲音提示)：前提示、後提示

　　font(字型)：字型、字型大小、字型樣式、字型粗細、字型變體、線高度、字型大小調整、字型展開

　　list-style(列表樣式)：列表樣式映像、列表樣式位置、列表樣式類型

　　margin(空白)：頂部空白、右側空白、底部空白、左側空白

　　outline(大綱)：大綱顏色、大綱樣式、大綱寬度

　　padding(間隙)：頂部間隙、右側間隙、底部間隙、左側間隙

　　pause(暫停)：後暫停、前暫停

　　減少空白

　　減少CSS樣式表大小的另一種方法是從文檔裡刪掉大多數無用的空白。換句話說，將每條規則打破放進一行代碼裡，即把原來插入到代碼裡用來把每個性質/屬性分割到不同行的分行符號和縮排符刪掉。

　　例如，下面的程式碼範例在內容上相同，但是第二個要精鍊得多：

h1 { 　　font-size: x-large; 　　font-weight: bold; 　　color: #FF0000; 　　} 　　h1 {font-size: x-large; font-weight: bold; color: #FF0000}

　　刪掉注釋

　　將注釋從你的CSS代碼裡刪掉是減少檔案大小的另一種方式。儘管注釋對於代碼的閱讀很有用，但是它無助於瀏覽器產生你的Web頁面。很多Web建設者都習慣給每一行代碼都加上注釋，或者至少給每一條規則聲明都加上。這樣的慷慨注釋在CSS樣式表裡是極少需要的，因為大多數CSS性質和屬性都很容易閱讀和理解。如果你對類、ID，以及其他的選取器都使用有意義的名稱，你就可以省掉大多數的注釋，同時仍然能夠保持代碼的可讀性和可維護性。

h1 { /* Heading 1 style*/ 　　font-size: x-large; /* x-large size */ 　　font-weight: bold; /* Bold */ 　　color: #FF0000; /* Red */ 　　}

　　使用速寫性質、刪除無用的空白、省略注釋都能夠在很大程度上減少你CSS樣式表檔案的大小。這反過來會對加速你Web網站速度的總體目標作出小的、但是可能會是顯而易見的貢獻。

　　為什麼要使用 CSS?

　　自從 Dreamweaver MX 2004 發布以來，我曾經無數次向 Dreamweaver 的新老使用者示範它的新特徵和新功能。每次進行產品示範，我很快就會極力稱讚 Dreamweaver MX 2004 設計和呈現 CSS(或層疊樣式表)的新功能。

　　然而最近某位新使用者問了一個問題，說實話，這個問題一下子讓我張口結舌。這位使用者只是問：“我為什麼要使用 CSS?”當時我意識到，儘管我們這些每天與 HTML 和 CSS 打交道的人非常瞭解 CSS 的優點，但仍有很多人並不瞭解。或者說並不完全瞭解 CSS 所能提供的所有優點。本文是我對上面那位新使用者的書面回答。

　　CSS 起源

　　回顧 CSS 的優點之前，我要先介紹一下它的曆史。Web 管理組織 W3C 在 1996 年 11 月推薦使用 CSS，並批准了 CSS 1 級規範。CSS 1 級規範說明了用於 HTML 頁面的屬性。這些屬性代替了傳統的字型標籤和其他“樣式”標記，例如顏色和邊距。1998 年 5 月，W3C 批准了 CSS 2 級規範，將一些附加功能添加到 1 級規範，並引進了定位屬性。這些屬性代替了表格標籤普遍(但是錯誤)的用法，用來設計頁面元素的表示。CSS 規範的最新版本是 CSS 2.1，它改進了某些屬性，並刪除了在當前瀏覽器裡沒有作用或作用很小的屬性。

　　不幸的是，就像很多新技術一樣，CSS 經曆了漫長的過程才被廣泛採納。其中的重要原因在於瀏覽器，以及為這些瀏覽器建立網站的 Web 設計者們。CSS 批准期間，Netscape Navigator (NN) 仍然是主導瀏覽器，而該瀏覽器基本上不支援 CSS。Microsoft 在其第 3 版瀏覽器中添加了對 CSS 非常有限的支援，但當時大多數的 Web 設計者(本人在內)仍然將 NN 作為首選平台進行頁面編碼。

　　很多年來，每發行一個新版本，瀏覽器製作者們都擴充了對 CSS 的支援。今天，Internet Explorer 6、Netscape Navigator 7、Mozilla、Opera 和 Safari 都全面支援 CSS。但這並不意味著我們作為 Web 設計者和開發人員的生涯不存在問題。儘管上述所有瀏覽器都支援 CSS Level 2，它們的相容程度仍然各不相同。而且在某些情況下，特定屬性仍然會帶給你很多麻煩。也就是說，您仍然需要遵守老的信條“測試再測試”。但如果您堅持使用 CSS 規範的核心屬性，您將能夠正確地呈現頁面。

　　但是為什麼 W3C 認為需要建立 CSS 規範呢?當我建立基於 HTML 的 Web 網站和應用程式時，這一切對我又意味著什麼呢?我認為，我們需要使用 CSS 的理由以及它帶來的優勢可以分為以下三個主要方面：靈活性、呈現性和可訪問性

　　靈活性

　　我確定幾乎每個 Web 設計者和開發人員都經曆過這樣的痛苦時刻：當您小心地布置好頁面，完成所有嵌套的表格後，客戶要求進行一點“小小的”更改。這小小的更改可能只是“能不能把那個圖形稍稍往左移動一點?”，也可能非常富有戲劇性：“我不喜歡這些標題，能把它們的字型弄大一點嗎?改字型的時候，順便把顏色也改了，怎麼樣?”如果只需要處理有限的幾個頁面，您可以深吸一口氣，花上大半個小時做那些讓人惱火的改動。但如果涉及到較大的網站(而這已經很常見)，一個簡單的更改無論如何也簡單不了。

　　這樣的情形為什麼會如此痛苦呢?因為定義頁面外觀的標記本身就是頁面的一部分。要看到執行個體，您只需到任何網站的任何頁面上去數一下 font 和 table 標籤的數量。只要您能夠從實際頁面的流程(或代碼)中刪除這些標記，或者採用更好的辦法，即將其外置，您就可以進行集中更改。而這就是 CSS 所能做的。

　　如果使用一個或多個外部樣式表，通過修改樣式表然後將修改後的版本上傳，您就可以將更改應用到網站。

　　想象一下，在傳統的基於表格的布局中，將網站瀏覽從頁面左側移到頁面右側將有多麼困難。這需要幾個小時重複而乏味的工作。但是，如果您選擇使用 CSS 的定位屬性(通常稱作 CSS-P)來設計頁面，只需更改外部樣式表中的“浮動”或“位置”屬性，即可更新頁面。而且還有以下附加優勢：您更新了網站中使用該樣式的所有頁面。

　　呈現性

　　由於寬頻廣泛使用，很多開發人員已經不再考慮在瀏覽器中呈現頁面所花費的時間。但是，你們應該記住，很多目標使用者仍然在使用撥號連線。傳統的基於表格的布局是頁面下載速度慢的主要原因。因為瀏覽器從伺服器接收頁面時，必須首先檢查並“理解”一系列複雜的鑲嵌式表格。它必須先找到鑲嵌在最裡面的內容，然後小心地逐步處理代碼，直至到達最外層的容器，即 body 標籤。完成以上所有過程後，瀏覽器才能開始在螢幕上呈現內容。

　　如果使用 CSS，瀏覽器從伺服器接收內容後，立刻就可以開始呈現過程，因為頁面中沒有或只有很少的顯示標記。

　　使用外部樣式表還有一個潛在的呈現方面的好處。在傳統的基於表格的方法中，瀏覽器必須檢索、分析並單獨呈現每個頁面。也就是說，瀏覽器在您的網站上顯示第 30 頁時耗費的工作和顯示第 1 頁時一樣多。

　　但是，如果使用外部樣式表進行顯示，網站的第一頁將提示瀏覽器將頁面使用的已連結樣式表檔案快取起來。這意味著網站中所有使用上述樣式表的後繼頁面下載速度會更快，因為瀏覽器已經緩衝了樣式表。

　　最後一個與呈現有關的優點讓我想起電影《莫紮特》。電影中，莫紮特問國王對自己的歌劇有什麼看法。國王說很好，但是很沉悶。莫紮特一再追問，國王解釋說，問題就在於“音符太多”。Web 設計也可能有同樣的問題，當然這裡的音符指的是實際 HTML 程式碼。代碼越多，瀏覽器理解頁面所花的時間就越長。

　　大家也許都聽說過有關官方應用程式的傳言，它們編寫了非常糟糕的代碼，滿是複雜的資訊，然而文檔頁面卻無法呈現。作為 Dreamweaver 的使用者，你們不會遇到這樣的問題，但是如果編寫了太多代碼，你們也會感到內疚。典型的基於表格的設計就是一個很好的例子。

　　在設計中使用 CSS 後，您將減少客戶需要下載的代碼的數量。僅僅減少某些頁面中的字型標籤就可以大大減少代碼的數量。在很多情況下，如果完全使用 CSS-P 進行設計，代碼的數量最多可以減少 50% 甚至更多。代碼減少就意味著頁面下載的速度加快。

　　可訪問性

　　如今我經常聽到人們談論可訪問性。大多數開發人員知道自己必須考慮建立更多可訪問網站的問題，但在更大的程度上，只有為政府或教育機構建立網站的開發人員才被迫真正做到了這一點。考慮到可訪問性的問題時，大多數開發人員認為這僅僅意味著需要將 alt 屬性添加到圖形中。但實際上，提高可訪問性有很多工作可做，CSS 使您可以輕鬆建立可訪問網站。

　　可訪問性的主要問題(也是使用 CSS 能夠解決的問題)在於輔助技術(例如螢幕助讀程式)怎樣“閱讀”頁面。傳統的基於表格的環境下，螢幕助讀程式面臨一個巨大的挑戰，那就是決定怎樣閱讀頁面。想想吧，當螢幕助讀程式遇到鑲嵌很深的表格時該有多麼困惑，它應該閱讀內容，還是跳過內容?跳過內容後，以後怎樣返回內容?

　　當您點擊頁面時，您會很快看到頁面中自己感興趣的內容，而忽略頁面頂部的導航和其他內容。視力不太好的人卻做不到這一點。他必須等待螢幕助讀程式分析完頁面頂部和他感興趣的內容之間所有複雜的資訊。

　　當然，有的技術能夠使螢幕助讀程式跳過導航，但這需要在導航條或其他內容的映像中添加連結。這些技術的運行可能會造成混亂，而且訪問網站的其他人也能夠看到它們。使用 CSS，您能夠在頁面中完整定義不可視元素(對於其他網站訪問人員和您的滑鼠不可視)。螢幕助讀程式可以使用這些元素快速導航，有效處理文檔。

　　由於 CSS 沒有顯示標記，螢幕助讀程式所遇到的唯一問題就是實際內容。另外，當您使用 CSS-P 進行設計時，您將專註於內容的實際“流”。您開始考慮它在頁面上的邏輯順序。

　　當您閱讀本文檔時，您理解了資訊“流”。但在鑲嵌型表格的樣本中，如果您使用多欄布局，本段落將很可能位於頁面的右上方。那樣，螢幕助讀程式無法知道它應該在文章末尾閱讀本段落。

　　使用 CSS-P 後，瀏覽器可能仍將本段落顯示在瀏覽器視窗的右上方，但當您查看文檔的原始碼時，段落在文檔的 html 中仍然是您現在所看到的位置。這使頁面更容易訪問。

　　總結和計劃

　　以上就是我的答案。我希望我解釋了使用 CSS 進行 Web 設計的獨特優勢。顯然，要學習的內容很多。因此，我鼓勵您閱讀 Macromedia 開發人員中心關於 CSS 的其他文章*，它們將協助您更好地瞭解 CSS 的優點，並教會您在設計中使用 CSS 的整個過程。以後的幾個星期以及幾個月當中，我將帶回來更多的 CSS 教程。就寫到這裡，希望您愉快使用我們的樣式。

　　關於作者

　　Greg Rewis 是 Macromedia Web 技術最主要的宣傳者。 Greg 是 Macromedia 的公眾代言人，代言 Web 上發行的 Macromedia 軟體套件和 Web 應用程式程式開發伺服器，同時他又代表公司成千上萬顧客的利益，與產品開發部門進行溝通。Greg 十分瞭解 Macromedia 客戶的想法，　因為每年他有 200 天都“在路上”，他與客戶交談，在商品展覽會、研討會和各種會議中進行產品展示，組織進階培訓會議專門介紹 Macromedia 生產線。Greg 總是在世界各地飛來飛去，但工作之餘他在 Arizona 沙漠中享受生活，打高爾夫球，教他的兩個兒子“在遊泳池中放鬆身心”的藝術。

　　原文：mezzoblue CSS Crib Sheet

　　CSS 錦囊

　　在使用CSS建站時，您肯定遇到過形形色色的布局問題，最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更為容易，當您遇到困難時為您提供快速參考。

　　有疑問，先驗證

　　在調試時，先對您的代碼進行驗證往往能省去不少麻煩事。格式不正確的XHTML/CSS 會導致許多布局上的錯誤。

　　在其他瀏覽器中進行測試之前，請先在最先進的瀏覽器中撰寫和測試CSS代碼，而不是相反。

　　如果您在破舊的瀏覽器中編寫和測試，你的代碼就不得不依賴那個破舊瀏覽器的糟糕的顯示，然後在符合標準的瀏覽器中進行測試，看到顯示結果“不正常”時，你會很沮喪的。相反，您應該先將您的代碼完善，然後再設法為較低級的瀏覽器打算。這樣從一開始您的代碼就是符合標準的，你不必再為支援其他瀏覽器而勞心費神。當然了，目前遵從標準的瀏覽器無疑就是 Mozilla, Safari 或 Opera。

　　確保您想要的效果真的存在

　　許多特定的瀏覽器專有的CSS擴充在正式標準中並不存在。 如果您對 filter(濾鏡) 或捲軸指定樣式，您用的就是私人代碼，除了IE之外，在別的瀏覽器中毫無作用。如果驗證器告訴您代碼沒有定義，極有可能您用了私人樣式，別指望在不同的瀏覽器中得到一致的效果。

　　如果布局中一定要用浮動物件，別忘了適時使用清除(clear)屬性。

　　浮動元素似易實難，而且難以駕馭。如果您發現浮動物件伸出了容器的邊界，或者不像您所期望的那樣顯示，請檢查您的期望是否正確。關於這個問題請看Eric Meyer 的教程

　　邊距的合并：可用padding 或 border 來避免。

　　您可能被多餘的(或者想要卻不出現的)空白搞得焦頭爛額。如果您用了 margins，邊距的合并可能就是問題的根源。 Andy Budd 對此的解釋也許能為你解惑。

　　避免將 padding/border 和固定寬度同時應用到同一元素。

　　IE5 錯誤的區塊模型是罪魁禍首，是它把事情弄得亂七八糟。雖然有補救方案，不過最好是繞過這個問題，當子項目的寬度固定時，為其父元素指定padding。

　　避免IE下未指定樣式內容的閃爍。

　　如果您用 @import 來輸入外部樣式表，早晚會發現IE有“閃爍”的毛病。在應用CSS樣式之前，未格式化的HTML文本會短暫地出現。這是可以避免的.

　　別指望 min-width 在IE中有用。

　　IE不支援它，但是它將 width 當作 min-width，所以通過一些 IE 的過濾技巧(filtering)，可以實現同樣的最終效果。

　　走投無路時，試一試減少寬度

　　由於舍入誤差，有時 50% 加上 50% 等於 100.1%，破壞某些瀏覽器中的布局。不妨試試將 50% 減到 49%，甚至 49.9%。

　　IE 中顯示不正常?

　　可能是 Peekaboo 臭蟲在作怪，尤其是當滑鼠經過超連結時能顯示正常。修補方法見Position is Everything。

　　如果使用了錨點，在應用超連結樣式時要特別小心。

　　如果您在代碼中使用了傳統的錨點()，您會注意到 :hover 和 :active偽類也會作用於它。要避免這種情形，你可以使用 id，或者使用鮮為人知的文法: :link:hover, :link:active

　　記住“LoVe/HAte”(愛/恨)連結規則

　　要以下面的順序指定超連結偽類：Link, Visited, Hover, Acitve。任何其他順序都不妥當。假如用了 :focus，次序應為 LVHFA(“Lord Vader's Handle Formerly Anakin”，Matt Haughey這樣建議)。

　　請記住“TRouBLED”(麻煩的)邊框。

　　邊框(border)、邊距(margin)和補白(padding)的簡寫次序為：順時針方向從上開始，即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上邊距為零，右邊距為1px，依此類推。

　　非零值要指明單位。

　　在用CSS指定字型、邊距或大小時，必須指明所用的單位(唯一的例外是 line-height，很奇怪，它不需要單位)。某些瀏覽器對未指明單位的處理方法不足為憑。零就是零，不管是 px 還是 em。其他的非零值都要明確指定單位。例如： padding: 0 2px 0 1em;

　　測試不同的字型大小。

　　像 Mozilla 和 Opera 這樣的進階瀏覽器都允許你改變字型大小，不管你用什麼字型單位。某些使用者的預設字型大小肯定和你的不同，盡最大努力去滿足他們。

　　測試時用內置樣式，發布時再改為外部輸入。

　　將樣式表嵌入在你的 HTML 原始碼中，在測試時可以消除許多緩衝引起的錯誤，尤其是某些 Mac 下的瀏覽器。但在發布前，一定要記住將樣式表移到外部檔案，用 @import 或 引入。

　　加上明顯的邊框有助於布局調試。

　　像 div {border: solid 1px #f00;} 之類的全域規則可以暫時為你查出布局問題。為特定的元素加上邊框可幫您找到難以發覺的重疊或空白問題。

　　圖片路徑不要用單引號。

　　當設定背景圖片時，要堅持用雙引號。儘管看起來好像多此一舉，但是如果不這麼做，IE5/Mac 會噎住。

　　不要為將來的樣式表(比如手持式裝置或列印用樣式表)“佔位子”。

　　Mac IE5 對空的樣式表比較感冒，會增加頁面的裝入時間。建議樣式表中至少應該有一條規則(哪怕是注釋也好)，免得 MacIE噎住。