全面了解CSS_CSS/HTML

自從 Dreamweaver MX 2004 發布以來，我曾經無數次向 Dreamweaver 的新舊用戶演示它的新特徵和新功能。每次進行產品演示，我很快就會極力稱讚 Dreamweaver MX 2004 設計和呈現 CSS（或層疊樣式表）的新功能。本篇詳細全面了解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 沙漠中享受生活，打高爾夫球，教他的兩個兒子「在游泳池中放鬆身心」的藝術。