欠T欠K喇賽窟

幾乎所有網頁設計師與開發者都曾經經歷過那種驚慌失措的時刻，在精心設計了一個網頁之後 - 內含了無數表格 - 但客戶卻要求做一些「很小」的修改。這種要求都很簡單，例如「您是否可以將這張圖片往左邊移一移？」或者戲劇性地提出：「我對這些標題不太滿意，您可否把字體改大一點 - 改大的同時，把這些字的顏色也改一改可以嗎？」如果您所要處理的網頁數目不多，那麼您可以深呼吸一下，然後花一點時間做這種討厭的修改工作。但是當您要同時處理幾個大型的網站時，如果這已經變成了一種基準，那麼這種簡單的修改工作就真的是很簡單了。

在這些情況下，真正使您產生驚慌的因素到底是什麼？定義網頁外觀的標記實際上就屬於網頁本身的一部份。想要瞭解真正的情形，您只需要從您所設計的網站中拿出一個網頁，然後數一數有幾個 font 與 table 標籤就好了。如果只有您可以將這種標記從實際網頁的流程或程式碼中去除掉 - 甚至更好的是，如果您可以將它放在網頁之外 - 那麼您就可以站在一個集中管理的角度上來進行變更了。嗯，這聽起來真的像是 CSS 在做的工作了。

自從 Dreamweaver MX 2004 推出以來，我就有許多機會可以為 Dreamweaver 的新使用者及舊有的使用者展示它的新功能及威力。在任何一場產品的展示活動中，我很快就會把主題轉移到 Dreamweaver MX 2004 在 CSS，也就是串接樣式表上的設計與處理功能。

但是最近，有一位初學者提出了一個問題，這個問題，老實說，讓我也百思不得其解。這位使用者是這樣問的：「為什麼我應該要使用 CSS 呢？」當時我就理解到，對於我們這些每天都浸淫在 HTML 與 CSS 世界中的人來講，對於它的好處自然不言而喻，但是對許多人來講，其實並不是這樣。或者，至少您也並不完全瞭解 CSS 所能提供的所有好處。本文即要以書面形式對這位初學者所提出的疑問給予答覆。

CSS 的開端
在我開始介紹 CSS 的眾多好處之前，我要先跟各位說明一段歷史。網頁的管理組織， W3C，於1996 年 12 月批准 CSS 第一級規格時便推薦使用 CSS 。 CSS 第一級描述了用於 HTML 網頁中的屬性。這些屬性取代了傳統的字型標籤及其他「樣式」標記，例如顏色與邊界等。 1998 年 5 月， W3C 批准了 CSS 第二級，其又在第一級規格以外增加了更多功能，同時也出現了定位的屬性。這些屬性取代了在設計網頁元素的展示時被氾濫（及錯誤）使用的 table 標籤。目前最新修正的 CSS 規格為 CSS 2.1，它又做了一些屬性上的修訂，並消除了其他只會在現有瀏覽器上產生限制的屬性。

不幸的是，就跟大部分新科技所遇到的情況一樣， CSS 在獲得大眾採納的速度上是有點緩慢的。其中一個關鍵的原因出在瀏覽器及針對這些瀏覽器設計網站的網頁設計師身上。在 CSS 獲得批准時， Netscape Navigator  (NN) 仍是佔有主控地位的瀏覽器，而它對於 CSS 的支援基本上可以說是根本不存在。 Microsoft 在它的第三版瀏覽器中增加了非常有限的支援，但當時大多數的網頁設計師（包括筆者在內）仍在以 NN 為其參考平台的情況下撰寫網頁程式。

經過了這幾年，瀏覽器開發商在各個新開發出來的版本中陸續擴展了對於 CSS 的支援。今天，Internet Explorer 6、 Netscape Navigator 7、 Mozilla、 Opera 及 Safari 皆已全面支援 CSS。但這並不代表作為網頁設計師及開發者的我們就不再會遇到任何問題了。當以上所提到的瀏覽器都支援 CSS 第二級時，它們仍在符合標準的程度上出現若干的差異。同時，在某些情況下，有一些屬性仍會給您帶來不少挫折。換句話說，您仍然必須遵守「測試，不斷地測試」這句古老的教條。然而，如果您能夠堅守 CSS 規格的核心屬性，您的網頁將可正確處理。

但是，為什麼 W3C 能夠看到建立 CSS 規格的需要呢？為什麼這對我來講只不過代表了我建立了一個 HTML 的網站及應用程式呢？我的看法是，您可以將 CSS 的需求及其所產生的優點分成三大部分來看：彈性、處理及存取能力。

彈性
我確信幾乎所有網頁設計師與開發者都曾經經歷過那種驚慌失措的時刻，在精心設計了一個網頁之後 - 內含了無數表格 - 但客戶卻要求做一些「很小」的修改。這種要求都很簡單，例如「您是否可以將這張圖片往左邊移一移？」或者戲劇性地提出：「我對這些標題不太滿意，您可否把字體改大一點 - 改大的同時，把這些字的顏色也改一改可以嗎？」如果您所要處理的網頁數目不多，那麼您可以深呼吸一下，然後花一點時間做這種討厭的修改工作。但是當您要同時處理幾個大型的網站時，如果這已經變成了一種基準，那麼這種簡單的修改工作就真的是很簡單了。

在這些情況下，真正使您產生驚慌的因素到底是什麼？定義網頁外觀的標記實際上就屬於網頁本身的一部份。想要瞭解真正的情形，您只需要從您所設計的網站中拿出一個網頁，然後數一數有幾個 font 與 table 標籤就好了。如果只有您可以將這種標記從實際網頁的流程或程式碼中去除掉 - 甚至更好的是，如果您可以將它放在網頁之外 - 那麼您就可以站在一個集中管理的角度上來進行變更了。嗯，這聽起來真的像是 CSS 在做的工作了。

如果您使用一或多個外部樣式表來設計網頁，那麼您便可透過修改樣式表，然後輕鬆上傳修改過的版本，來套用到整個網站中的修改處了。

您可以想像一下，要在傳統的表格式配置中將網站的導覽區從網頁的左邊移到右邊有多麼的困難。這可能要花上您好幾個小時的時間來做不斷重複而令人厭煩的工作。但是，如果您可以選擇使用 CSS 的定位屬性（它比較為人熟知的名稱為 CSS-P）來設計您的網頁，在外部樣式表中簡單地更改 " float " 屬性或 " position " 屬性便可更新整個網頁。這還有另外一個好處：您可以更新在網站中所有使用該樣式表的網頁！

處理
由於寬頻已經逐漸成為主流，因此許多開發者已經不再考慮要在一個瀏覽器中花多少時間處理一個網頁的問題了。但是，對於許多讀者而言，您必須要記住一點，您還是有許多目標觀眾仍然使用撥號連線的方式瀏覽網站的。傳統的表格式配置是導致網頁載入速度慢的主因。之所以會發生這種情形，是因為瀏覽器在從伺服器接收網頁時，必須先檢查並「瞭解」內含表格的複雜陣列。它必須先找到最深層的內容，然後一點一點仔細地往程式碼外層處理，直到它抵達最外層的容器，即 body 標籤為止。