級聯樣式表非常簡單，也就是 (X)HTML 網頁之上的分層設計。使樣式表 “級聯”，這樣您就可以跨站點應用它 — 也就是說，將樣式應用到網站，它就會自行應用到每個網頁的每個元素。

常用縮略語

●API：應用程序接口

●CSS：層疊樣式表

●HTML：超文本標記語言

●XHTML：可擴展 HTML

對于網站，將數據與設計分離是一個重要的概念：數據使用 (X)HTML 發送到瀏覽器，而設計使用 CSS 應用到該數據。這種分離使人們在擁有特殊可訪問性需要時無需您的設計即可渲染網頁，還使機器（比如搜索引擎）能夠建立網站索引而不會受到設計的阻礙。

本文詳細介紹各種已經存在和現代的 CSS 技術，以增強網站觀感性。本文需要一定的 (X)HTML 知識，它應被視為開發的一個參考點，充當設計網站的初始平臺。

CSS 的格式

CSS 樣式元素的結構很簡單：

此標記將背景顏色設置為白色 (background-color)，以確保字體顏色是黑色的 (color)。它還可確保所有內容邊緣都與瀏覽器窗口邊框相匹配（margin 和 padding），而且標記將文本內容向左水平對齊 (text-align)。最后，該樣式將字號設置為瀏覽器默認字號 (font-size) 并使用一個 sans-serif（也就是一種邊緣四周沒有細微裝飾的字體）字體集 (font-family)。
當然，這是一些簡單設置。一般而言，可應用以下指導原則：

●在指定顏色時，使用 Red-Green-Blue (RGB) 十六進制亮度值。

●在指定字號時，使用像素（有數字后的 px 表示）、em（由數字后的 em 表示）— 也就是說，字號乘以指定的數字 — 或百分比（由數字后的 % 表示）。

●文本可以左對齊、右對齊或居中。浮動屬性也可左對齊或右對齊。垂直對齊必須是頂端、居中或底端對齊。

●字體可以是任何特定字體、字體集（serif、sans-serif 或 monospace）或任何一種可下載的字體。

在確定網站的設計時，一個最重要的決策是使用流式（fluid）布局還是固定布局。在固定布局 中，可以指定元素的高度和寬度，無論您使用何種操作系統或瀏覽器查看網站，這些值都是相同的。主要使用像素指定這些元素。在流式布局 中，元素的高度和寬度是靈活的，可基于瀏覽器窗口、操作系統或用戶偏好而擴展或縮小。主要使用百分比和 em 指定這些元素。流式布局和固定布局各有其優缺點，選擇哪種布局取決于內容類型、內容量和網站的訪問群體。

將 CSS 應用到 (X)HTML

要開始應用您的 CSS，您需要告訴瀏覽器在哪里找到它。這應該是真正惟一 (X)HTML 引用 CSS 的地方。可以通過兩種方式進行引用：“quick and dirty”< link> 標記。

quick and dirty：設置標記樣式

此方法可能是查看應用到一個網頁的樣式的最快方法，它會使用非 HTML 代碼 “弄臟” 網頁。但是它只是您應用樣式的一個網頁（當然，除非使用服務器端語言來包含一個頭部），如果將此樣式復制并粘貼到另一個網頁，會增加網頁大小（這里指的是 KB 而不是寬度和高度）。因此，會增加每個網頁的加載時間，讓用戶等待更長時間。時間對于用戶而言比人們想象的更加重要，縱然您生活在超高速互聯網時代。
那么它是如何完成的？非常簡單，將以下標記添加到您的 HTML 標記中：

其中 style.css 是一個純文本文件，其中包含您的 CSS 代碼。作為一種不錯的做法，我為我網站的公共 html 文件夾使用以下基礎結構：

●/public_html 文件夾，包含 HTML 文件或服務器端腳本（比如 PHP）

●/index.html（或用于 PHP 開發的 index.php），用于主頁/啟動頁面

●/styles/ 目錄，用于存儲各種 CSS 文件

●/scripts/ 目錄，用于存儲各種 JavaScript 文件和庫

此結構允許所有內容都整潔地包裝 —— 同時保持分離并允許引用。

樣式設置指南

本節詳細介紹在瀏覽器不支持 CSS 版本 3 (CSS3) 時應用該版本會發生什么 —— 瀏覽器將忽略它并退回到默認設置。 本節還將介紹 CSS3 樣式（以 -moz、-webkit 等開頭的樣式）的特定于瀏覽器的實現。

簡單的 < div> 標記

(X)HTML 擁有非常簡單的標記 < div>，可以使用它將網頁劃分為有用的區域。從設計角度講，這是一個不錯的想法，因為它在本質上就是一個包含內容的方框。

CSS 2.1 的標準 < div> 效果

CSS 始終支持設置 < div> 的樣式。其中一些元素包括邊框調整，比如：

其中：

●size 是一個數字值。

●type 是實線、虛線、點線、雙線或一些 3D 樣式的邊框。

●color 通常是一個 RGB 十六進制值。

舉例而言，您可以使用 border: 1px solid #000000; 表示 1 像素寬的黑色實線。

類似于 body，也可以更改標準背景顏色以及文本的字體和顏色。可以像其他基礎樣式一樣進行這些更改。

CSS3 增強的 < div> 效果

一種呼聲最高的設計元素（在 CSS2.1 中未找到）是邊框的圓角邊緣。這意味著過去的許多設計人員必須構建基于圖像的邊框或使用某種組合了 CSS 和 JavaScript 的 dirty 技術。幸運的是，在 CSS3 中不再存在此情況，它引入了 border-radius 屬性（例如 border-radius: 10px;）。

要將此屬性應用到一些瀏覽器中，必須包含類似以下形式的標記：

在這種情況下，第一個屬性是水平陰影，第二個是垂直陰影，第三個是模糊量，第四個是陰影的顏色。可以在模糊量和陰影之間放置另一個屬性（另一個與陰影的覆蓋范圍相關的大小值），但是此屬性似乎沒有廣泛使用。

列表

(X)HTML 中另一個常見的元素是列表。列表具有兩種形式：無序列表 (< ul>) 和有序列表 (< ol>)。它們對于為網頁提供數字列表（比如步驟列表）和非數字列表（比如處方成分）很有用。在網站布局方面，列表常常對于網站導航結構的開發至關重要，因此對于樣式尤其有用。

(X)HTML 列表（無論是有序還是無序的）默認將擁有所謂的列表標記。在非正式的英語中，我們可能將它們稱為 “bullet points（項目符號）”。CSS2.1 擁有少量的列表標記，可以使用 list-style-type 屬性設置它們。無序列表標記的常見值包括 none、disc、circle 和 square。

有序列表標記的值是基于數字的表示方式。最常用的選項包括 decimal、lower-roman 和 lower-greek。

在撰寫本文時，現代 Web 瀏覽器支持的基于列表的新 CSS3 屬性和特性不是太多。否則本文將會介紹（舉例而言）全新的 list-style-type 特性。我們介紹了另一個得到更廣泛支持的 CSS3 屬性，稱為 text-shadow。

類似于前面定義的 box-shadow，text-shadow 屬性提供了一個陰影。但是，與 box-shadow 不同，text-shadow 實際上會為每個字母添加陰影。所以，當將它應用到列表項時，可以使用以下標記：

這將僅在將鼠標懸停在 #nav 無序列表中的一個列表元素上時提供 text-shadow。

鏈接

在過去，CSS3 標準的開發人員認為將未單擊的鏈接、已訪問的鏈接、有效鏈接和鼠標所在的鏈接區分開是明智之舉。在 (X)HTML 中，它們全部具有相同的標記（也就是 < a> 標記），但具有不同的瀏覽器狀態。幸運的是，許多設計人員忽略了這些區別，他們常常向一般鏈接或鼠標所在的鏈接提供樣式。

一項幾乎必要的任務是向一般鏈接應用一種特定的樣式（進而設置它，無論它是未被單擊的、被訪問的、有效的還是其他類型的鏈接）。清單 2 提供了這樣一個應用程序的一個示例。

清單 2. 鏈接修飾的 CSS 示例

此標記設置一個一般鏈接，將字體顏色設置為黑色，取消默認的下劃線，將字體加粗，以及還將背景顏色設置為白色。在懸停狀態下，它重新應用下劃線并創建一種黃色的新背景顏色來突出顯示。當在瀏覽器中測試此標記時，您將會注意到在鼠標懸停自鏈接上時，背景從淺灰色更改為黃色，當鼠標移開時，從黃色變回淺灰色。前面已經看到，還可以向 a:hover 應用文本陰影。
當開發人員建立 CSS3 的概念時，他們撇開了任何與 < a> 標記相關的特定樣式，將更多精力放在泛型上。因此，本文不會介紹所謂的 transform:rotate，舉例而言可將它用于導航中的 < li> 標記。相反，結合本文已經介紹的內容，可以得到類似于清單 3 的樣式。

清單 3. 使用一些 CSS3 屬性增強的 CSS 導航示例

創建沒有表格的列

一般而言，表格存在著與布局技術一樣的缺陷，因為當您布局包含表格的網頁時，您會搞亂數據的邏輯流程。記得在本文開頭我們說過，CSS 是 (X)HTML 之上的一層，而 (X)HTML 實際上是通過一種緊湊方式呈現的數據。不錯，最佳的設計方式是以 (X)HTML 形式提供數據，沒有任何設計或樣式：如果它看起來是緊湊的，那么您可以應用一個 CSS 樣式表。如果確實需要編輯 (X)HTML 來應用某種設計，請確保您禁用了 CSS，以查看它是否仍然是緊湊的。
出于兩種原因，這樣做非常重要。第一個原因是讓它可供擁有特殊的視覺需求的人訪問（因為他們將常常擁有自己的默認樣式表設置或軟件）。第二個原因是機器需要能夠讀取您的網站。搜索引擎和其他軟件需要能夠讀取并跟蹤您網站的代碼，來為它建立索引。
那么，問題是如何創建沒有表格的列？很簡單，使用兩個 < div> 框，如清單 4 所示。

清單 4. 列 div 的 (X)HTML 示例

其中以選擇了 Univers 字體，如果 Univers 在用戶計算機上不可用，默認將使用 sans-serif。

CSS3 通過引入 @font-face 元素稍微改進了此功能，這是一個比較復雜的機制，用于跨 web（特別是對于您的網站）傳輸一個字體。如果希望使用漂亮的字體，它可能非常有用，這是一個適合排版專家的高級主題。但是，此類字形開發工作已由第三方提供商大大簡化，比如字體下載 表中的 Google Font API 和 Typekit。

字體下載

Google Font API 和 Typekit 提供了它們自己的系統來跨系統下載漂亮的字體。它的工作原理類似于 (X)HTML、JavaScript 和 CSS3 的結合，所以可能僅適用于比較現代的瀏覽器。

至于現在，我們主要關注 Google Font API，它可以免費、輕松地使用。要應用此功能，首先在 (X)HTML 頭部添加一行表明您希望使用 Google Font Directory 中的 Architects Daughter 字體：

您的網站現在使用了 Architects Daughter Google 字體。但是，我的建議是不要為整個網站使用 “太過漂亮的” 字體。請確保您的網站繼續保持干凈、緊湊和清新。

結束語

CSS2.1 和 CSS3 都是內涵豐富的主題，值得用一本書來探討。本文僅大概介紹了如何編寫高質量的樣式表，您可以應用這里的知識在萬維網上的其他地方查找 CSS 參考資料。

通過不引人注目的、彼此獨立的方式使用 (X)HTML 和 CSS，您可以最大程度地實現標準兼容性、可訪問性和搜索引擎優化。CSS 是一種優秀的技術，XHTML 和 HTML 也是，但是它必須以一種標準化的方式使用。這些標準可能是 Web 設計的基本資源，但它們不是設計本身，優秀的設計必須通過實踐和不斷完善來獲得。