然而最近某位新用戶問(wèn)了一個(gè)問(wèn)題，說(shuō)實(shí)話，這個(gè)問(wèn)題一下子讓我張口結(jié)舌。這位用戶只是問(wèn)：“我為什么要使用 CSS?”當(dāng)時(shí)我意識(shí)到，盡管我們這些每天與 HTML 和 CSS 打交道的人非常了解 CSS 的優(yōu)點(diǎn)，但仍有很多人并不了解。或者說(shuō)并不完全了解 CSS 所能提供的所有優(yōu)點(diǎn)。本文是我對(duì)上面那位新用戶的書面回答。
CSS 起源
回顧 CSS 的優(yōu)點(diǎn)之前，我要先介紹一下它的歷史。Web 管理組織 W3C 在 1996 年 11 月推薦使用 CSS，并批準(zhǔn)了 CSS 1 級(jí)規(guī)范。CSS 1 級(jí)規(guī)范說(shuō)明了用于 HTML 頁(yè)面的屬性。這些屬性代替了傳統(tǒng)的字體標(biāo)簽和其他“樣式”標(biāo)記，例如顏色和邊距。1998 年 5 月，W3C 批準(zhǔn)了 CSS 2 級(jí)規(guī)范，將一些附加功能添加到 1 級(jí)規(guī)范，并引進(jìn)了定位屬性。這些屬性代替了表格標(biāo)簽普遍（但是錯(cuò)誤）的用法，用來(lái)設(shè)計(jì)頁(yè)面元素的表示。CSS 規(guī)范的最新版本是 CSS 2.1，它改進(jìn)了某些屬性，并刪除了在當(dāng)前瀏覽器里沒(méi)有作用或作用很小的屬性。
不幸的是，就像很多新技術(shù)一樣，CSS 經(jīng)歷了漫長(zhǎng)的過(guò)程才被廣泛采納。其中的重要原因在于瀏覽器，以及為這些瀏覽器建立站點(diǎn)的 Web 設(shè)計(jì)者們。CSS 批準(zhǔn)期間，Netscape Navigator (NN) 仍然是主導(dǎo)瀏覽器，而該瀏覽器基本上不支持 CSS。Microsoft 在其第 3 版瀏覽器中添加了對(duì) CSS 非常有限的支持，但當(dāng)時(shí)大多數(shù)的 Web 設(shè)計(jì)者（本人在內(nèi)）仍然將 NN 作為首選平臺(tái)進(jìn)行頁(yè)面編碼。
很多年來(lái)，每發(fā)行一個(gè)新版本，瀏 覽器制作者們都擴(kuò)展了對(duì) CSS 的支持。今天，Internet Explorer 6、Netscape Navigator 7、Mozilla、Opera 和 Safari 都全面支持 CSS。但這并不意味著我們作為 Web 設(shè)計(jì)者和開發(fā)者的生涯不存在問(wèn)題。盡管上述所有瀏覽器都支持 CSS Level 2，它們的兼容程度仍然各不相同。而且在某些情況下，特定屬性仍然會(huì)帶給你很多麻煩。也就是說(shuō)，您仍然需要遵守老的信條“測(cè)試再測(cè)試”。但如果您堅(jiān)持使用 CSS 規(guī)范的核心屬性，您將能夠正確地呈現(xiàn)頁(yè)面。
但是為什么 W3C 認(rèn)為需要?jiǎng)?chuàng)建 CSS 規(guī)范呢？當(dāng)我創(chuàng)建基于 HTML 的 Web 站點(diǎn)和應(yīng)用程序時(shí)，這一切對(duì)我又意味著什么呢？我認(rèn)為，我們需要使用 CSS 的理由以及它帶來(lái)的優(yōu)勢(shì)可以分為以下三個(gè)主要方面：靈活性、呈現(xiàn)性和可訪問(wèn)性
靈活性
我 確定幾乎每個(gè) Web 設(shè)計(jì)者和開發(fā)者都經(jīng)歷過(guò)這樣的痛苦時(shí)刻：當(dāng)您小心地布置好頁(yè)面，完成所有嵌套的表格后，客戶要求進(jìn)行一點(diǎn)“小小的”更改。這小小的更改可能只是“能不能把 那個(gè)圖形稍稍往左移動(dòng)一點(diǎn)？”，也可能非常富有戲劇性：“我不喜歡這些標(biāo)題，能把它們的字體弄大一點(diǎn)嗎？改字體的時(shí)候，順便把顏色也改了，怎么樣？”如果 只需要處理有限的幾個(gè)頁(yè)面，您可以深吸一口氣，花上大半個(gè)小時(shí)做那些讓人惱火的改動(dòng)。但如果涉及到較大的站點(diǎn)（而這已經(jīng)很常見），一個(gè)簡(jiǎn)單的更改無(wú)論如何 也簡(jiǎn)單不了。
這樣的情形為什么會(huì)如此痛苦呢？因?yàn)槎x頁(yè)面外觀的標(biāo)記本身就是頁(yè)面的一部分。要看到實(shí)例，您只需到任何站點(diǎn)的任何頁(yè)面上去 數(shù)一下 font 和 table 標(biāo)簽的數(shù)量。只要您能夠從實(shí)際頁(yè)面的流程（或代碼）中刪除這些標(biāo)記，或者采用更好的辦法，即將其外置，您就可以進(jìn)行集中更改。而這就是 CSS 所能做的。
如果使用一個(gè)或多個(gè)外部樣式表，通過(guò)修改樣式表然后將修改后的版本上載，您就可以將更改應(yīng)用到站點(diǎn)。
想象一 下，在傳統(tǒng)的基于表格的布局中，將站點(diǎn)瀏覽從頁(yè)面左側(cè)移到頁(yè)面右側(cè)將有多么困難。這需要幾個(gè)小時(shí)重復(fù)而乏味的工作。但是，如果您選擇使用 CSS 的定位屬性（通常稱作 CSS-P）來(lái)設(shè)計(jì)頁(yè)面，只需更改外部樣式表中的“浮動(dòng)”或“位置”屬性，即可更新頁(yè)面。而且還有以下附加優(yōu)勢(shì)：您更新了站點(diǎn)中使用該樣式的所有頁(yè)面。
呈現(xiàn)性
由 于寬帶的廣泛使用，很多開發(fā)者已經(jīng)不再考慮在瀏覽器中呈現(xiàn)頁(yè)面所花費(fèi)的時(shí)間。但是，你們應(yīng)該記住，很多目標(biāo)用戶仍然在使用撥號(hào)連接。傳統(tǒng)的基于表格的布局 是頁(yè)面下載速度慢的主要原因。因?yàn)闉g覽器從服務(wù)器接收頁(yè)面時(shí)，必須首先檢查并“理解”一系列復(fù)雜的鑲嵌式表格。它必須先找到鑲嵌在最里面的內(nèi)容，然后小心 地逐步處理代碼，直至到達(dá)最外層的容器，即 body 標(biāo)簽。完成以上所有過(guò)程后，瀏覽器才能開始在屏幕上呈現(xiàn)內(nèi)容。
如果使用 CSS，瀏覽器從服務(wù)器接收內(nèi)容后，立刻就可以開始呈現(xiàn)過(guò)程，因?yàn)轫?yè)面中沒(méi)有或只有很少的顯示標(biāo)記。
使用外部樣式表還有一個(gè)潛在的呈現(xiàn)方面的好處。在傳統(tǒng)的基于表格的方法中，瀏覽器必須檢索、分析并單獨(dú)呈現(xiàn)每個(gè)頁(yè)面。也就是說(shuō)，瀏覽器在您的站點(diǎn)上顯示第 30 頁(yè)時(shí)耗費(fèi)的工作和顯示第 1 頁(yè)時(shí)一樣多。
但是，如果使用外部樣式表進(jìn)行顯示，站點(diǎn)的第一頁(yè)將提示瀏覽器將頁(yè)面使用的已鏈接樣式表文件緩存起來(lái)。這意味著站點(diǎn)中所有使用上述樣式表的后繼頁(yè)面下載速度會(huì)更快，因?yàn)闉g覽器已經(jīng)緩存了樣式表。
最 后一個(gè)與呈現(xiàn)有關(guān)的優(yōu)點(diǎn)讓我想起電影《莫扎特》。電影中，莫扎特問(wèn)國(guó)王對(duì)自己的歌劇有什么看法。國(guó)王說(shuō)很好，但是很沉悶。莫扎特一再追問(wèn)，國(guó)王解釋說(shuō)，問(wèn) 題就在于“音符太多”。Web 設(shè)計(jì)也可能有同樣的問(wèn)題，當(dāng)然這里的音符指的是實(shí)際 HTML 代碼。代碼越多，瀏覽器理解頁(yè)面所花的時(shí)間就越長(zhǎng)。
大家也許都聽說(shuō)過(guò)有關(guān)官方應(yīng)用程序的傳言，它們編寫了非常糟糕的代碼，滿是復(fù)雜的信息，然而文檔頁(yè)面卻無(wú)法呈現(xiàn)。作為 Dreamweaver 的用戶，你們不會(huì)遇到這樣的問(wèn)題，但是如果編寫了太多代碼，你們也會(huì)感到內(nèi)疚。典型的基于表格的設(shè)計(jì)就是一個(gè)很好的例子。
在設(shè)計(jì)中使用 CSS 后，您將減少客戶需要下載的代碼的數(shù)量。僅僅減少某些頁(yè)面中的字體標(biāo)簽就可以大大減少代碼的數(shù)量。在很多情況下，如果完全使用 CSS-P 進(jìn)行設(shè)計(jì)，代碼的數(shù)量最多可以減少 50% 甚至更多。代碼減少就意味著頁(yè)面下載的速度加快。
可訪問(wèn)性
如 今我經(jīng)常聽到人們談?wù)摽稍L問(wèn)性。大多數(shù)開發(fā)者知道自己必須考慮建立更多可訪問(wèn)站點(diǎn)的問(wèn)題，但在更大的程度上，只有為政府或教育機(jī)構(gòu)建立站點(diǎn)的開發(fā)人員才被 迫真正做到了這一點(diǎn)。考慮到可訪問(wèn)性的問(wèn)題時(shí)，大多數(shù)開發(fā)人員認(rèn)為這僅僅意味著需要將 alt 屬性添加到圖形中。但實(shí)際上，提高可訪問(wèn)性有很多工作可做，CSS 使您可以輕松建立可訪問(wèn)站點(diǎn)。
可訪問(wèn)性的主要問(wèn)題（也是使用 CSS 能夠解決的問(wèn)題）在于輔助技術(shù)（例如屏幕閱讀器）怎樣“閱讀”頁(yè)面。傳統(tǒng)的基于表格的環(huán)境下，屏幕閱讀器面臨一個(gè)巨大的挑戰(zhàn)，那就是決定怎樣閱讀頁(yè)面。想 想吧，當(dāng)屏幕閱讀器遇到鑲嵌很深的表格時(shí)該有多么困惑，它應(yīng)該閱讀內(nèi)容，還是跳過(guò)內(nèi)容？跳過(guò)內(nèi)容后，以后怎樣返回內(nèi)容？
當(dāng)您點(diǎn)擊頁(yè)面時(shí)，您會(huì)很快看到頁(yè)面中自己感興趣的內(nèi)容，而忽略頁(yè)面頂部的導(dǎo)航和其他內(nèi)容。視力不太好的人卻做不到這一點(diǎn)。他必須等待屏幕閱讀器分析完頁(yè)面頂部和他感興趣的內(nèi)容之間所有復(fù)雜的信息。
當(dāng) 然，有的技術(shù)能夠使屏幕閱讀器跳過(guò)導(dǎo)航，但這需要在導(dǎo)航條或其他內(nèi)容的圖像中添加鏈接。這些技術(shù)的運(yùn)行可能會(huì)造成混亂，而且訪問(wèn)站點(diǎn)的其他人也能夠看到它 們。使用 CSS，您能夠在頁(yè)面中完整定義不可視元素（對(duì)于其他站點(diǎn)訪問(wèn)人員和您的鼠標(biāo)不可視）。屏幕閱讀器可以使用這些元素快速導(dǎo)航，有效處理文檔。
由于 CSS 沒(méi)有顯示標(biāo)記，屏幕閱讀器所遇到的唯一問(wèn)題就是實(shí)際內(nèi)容。另外，當(dāng)您使用 CSS-P 進(jìn)行設(shè)計(jì)時(shí)，您將專注于內(nèi)容的實(shí)際“流”。您開始考慮它在頁(yè)面上的邏輯順序。
當(dāng)您閱讀本文檔時(shí)，您理解了信息“流”。但在鑲嵌型表格的示例中，如果您使用多欄布局，本段落將很可能位于頁(yè)面的右上角。那樣，屏幕閱讀器無(wú)法知道它應(yīng)該在文章末尾閱讀本段落。
使用 CSS-P 后，瀏覽器可能仍將本段落顯示在瀏覽器窗口的右上角，但當(dāng)您查看文檔的源代碼時(shí)，段落在文檔的 html 中仍然是您現(xiàn)在所看到的位置。這使頁(yè)面更容易訪問(wèn)。
總結(jié)和計(jì)劃
以 上就是我的答案。我希望我解釋了使用 CSS 進(jìn)行 Web 設(shè)計(jì)的獨(dú)特優(yōu)勢(shì)。顯然，要學(xué)習(xí)的內(nèi)容很多。因此，我鼓勵(lì)您閱讀 Macromedia 開發(fā)者中心關(guān)于 CSS 的其他文章*，它們將幫助您更好地了解 CSS 的優(yōu)點(diǎn)，并教會(huì)您在設(shè)計(jì)中使用 CSS 的整個(gè)過(guò)程。以后的幾個(gè)星期以及幾個(gè)月當(dāng)中，我將帶回來(lái)更多的 CSS 教程。就寫到這里，希望您愉快使用我們的樣式。
關(guān)于作者
Greg Rewis 是 Macromedia Web 技術(shù)最主要的宣傳者。 Greg 是 Macromedia 的公眾代言人，代言 Web 上發(fā)行的 Macromedia 軟件套件和 Web 應(yīng)用程序開發(fā)服務(wù)器，同時(shí)他又代表公司成千上萬(wàn)顧客的利益，與產(chǎn)品開發(fā)部門進(jìn)行溝通。Greg 十分了解 Macromedia 客戶的想法， 因?yàn)槊磕晁?200 天都“在路上”，他與客戶交談，在商品展覽會(huì)、研討會(huì)和各種會(huì)議中進(jìn)行產(chǎn)品展示，組織高級(jí)培訓(xùn)會(huì)議專門介紹 Macromedia 生產(chǎn)線。Greg 總是在世界各地飛來(lái)飛去，但工作之余他在 Arizona 沙漠中享受生活，打高爾夫球，教他的兩個(gè)兒子“在游泳池中放松身心”的藝術(shù)。
