級聯樣式表非常簡單，也就是 (X)HTML 網頁之上的分層設計。使樣式表 “級聯”，這樣您就可以跨站點應用它 — 也就是說，將樣式應用到網站，它就會自行應用到每個網頁的每個元素。
常用縮略語
●API：應用程序接口
●CSS：層疊樣式表
●HTML：超文本標記語言
●XHTML：可擴展 HTML
對於網站，將數據與設計分離是一個重要的概念：數據使用 (X)HTML 發送到浏覽器，而設計使用 CSS 應用到該數據。這種分離使人們在擁有特殊可訪問性需要時無需您的設計即可渲染網頁，還使機器（比如搜索引擎）能夠建立網站索引而不會受到設計的阻礙。
本文詳細介紹各種已經存在和現代的 CSS 技術，以增強網站觀感性。本文需要一定的 (X)HTML 知識，它應被視為開發的一個參考點，充當設計網站的初始平台。
CSS 的格式
CSS 樣式元素的結構很簡單：
1 2 3 4 html-tag-name { css-property-key-1: css-value-1; css-property-key-2: css-value-2; }其中 html-tag-name 可以是您能在 HTML 代碼中找到的任何標記（比如 < a>、< /a>、< div>、< ul>< li>或 < label>）。除了 HTML 標記，在 CSS 代碼中它也可以是前面帶有井號（#）的 ID 引用，如下所示：
1 2 3 #id-of-html-tag { … }或者在 CSS 代碼中這個標記可以是一個前面帶有點/句點（.）的類引用：
1 2 3 .class-of-html-tag { … }CSS 的這些部分（html-tag-name、id-of-html-tag 或 class-of-html-tag）稱為簡單選擇器，可嵌套（使用空格分開）使用以在 HTML 中實現更高的粒度，如下所示：
1 outer-html-tag-name inner-html-tag-name { … }或者作為一個列表來將一種設計元素應用到多個選擇器：
1 1st-html-tag-name, 2nd-html-tag-name { … }誠然，上述代碼對於理解 CSS 形式化語法而言比較抽象。因此，本章其余部分將著重介紹更具體、更有幫助的示例，凸顯 CSS 的簡單性、潛能和靈活性。
基礎樣式
在進行網站設計時，要做的第一件事是建立基礎樣式。為此，可以設置標記的樣式，如清單 1 所示。
清單 1. body 標記的 CSS 基礎樣式
1 2 3 4 5 6 7 8 9 body{ background-color: #EEEEEE; color: #000000; margin: 0; padding: 0; text-align: left; font-size: 100%; font-family: sans-serif; }此標記將背景顏色設置為白色 (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 標記中：
quick and clean：悄悄鏈接到 CSS 此方法可能是應用樣式的比較整潔的方法。如果 CSS 位於外部文件中，可以從其他網頁鏈接到它，進而確保您擁有整潔的 HTML 和較小的頁面（再次說明，這裡指的是 KB 而不是寬度和高度）。使用此方法更加簡單：將以下代碼添加到您的 HTML < head> 標記部分：
1 2 < link href="http://www.example.com/styles/style.css" media="screen" rel="stylesheet" type="text/css" />
其中 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> 的樣式。其中一些元素包括邊框調整，比如：
1 border: size type color其中：
●size 是一個數字值。
●type 是實線、虛線、點線、雙線或一些 3D 樣式的邊框。
●color 通常是一個 RGB 十六進制值。
舉例而言，您可以使用 border: 1px solid #000000; 表示 1 像素寬的黑色實線。
類似於 body，也可以更改標准背景顏色以及文本的字體和顏色。可以像其他基礎樣式一樣進行這些更改。
CSS3 增強的 < div> 效果
一種呼聲最高的設計元素（在 CSS2.1 中未找到）是邊框的圓角邊緣。這意味著過去的許多設計人員必須構建基於圖像的邊框或使用某種組合了 CSS 和 JavaScript 的 dirty 技術。幸運的是，在 CSS3 中不再存在此情況，它引入了 border-radius 屬性（例如 border-radius: 10px;）。
要將此屬性應用到一些浏覽器中，必須包含類似以下形式的標記：
1 2 3 -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;此示例只是為了讓該標記適用於基於 Mozilla（比如 Mozilla Firefox）和基於 Webkit（比如 Apple Safari）的舊浏覽器。如果您願意，可以將上述 3 個屬性設置為不同值並讓樣式在 Firefox 和 Google Chrome 中顯示不同的效果。
也可以在 < div> 上生成一個陰影。為此，可以使用以下 3 個屬性（再次說明，一定要處理各種浏覽器）：
1 2 3 -webkit-box-shadow: 8px 8px 6px #AAAAAA; -moz-box-shadow: 8px 8px 6px #AAAAAA; box-shadow: 8px 8px 6px #AAAAAA;在這種情況下，第一個屬性是水平陰影，第二個是垂直陰影，第三個是模糊量，第四個是陰影的顏色。可以在模糊量和陰影之間放置另一個屬性（另一個與陰影的覆蓋范圍相關的大小值），但是此屬性似乎沒有廣泛使用。
列表
(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 實際上會為每個字母添加陰影。所以，當將它應用到列表項時，可以使用以下標記：
1 2 3 li { text-shadow: 2px 2px 2px #AA00FF; }舉例而言，如果擁有一個無序列表，它的 (X)HTML ID 為 nav，顯示為一個導航欄，那麼可以構建類似以下形式的內容：
1 2 3 ul#nav li:hover { text-shadow: 2px 2px 2px #AA00FF; }這將僅在將鼠標懸停在 #nav 無序列表中的一個列表元素上時提供 text-shadow。
鏈接
在過去，CSS3 標准的開發人員認為將未單擊的鏈接、已訪問的鏈接、有效鏈接和鼠標所在的鏈接區分開是明智之舉。在 (X)HTML 中，它們全部具有相同的標記（也就是 < a> 標記），但具有不同的浏覽器狀態。幸運的是，許多設計人員忽略了這些區別，他們常常向一般鏈接或鼠標所在的鏈接提供樣式。
一項幾乎必要的任務是向一般鏈接應用一種特定的樣式（進而設置它，無論它是未被單擊的、被訪問的、有效的還是其他類型的鏈接）。清單 2 提供了這樣一個應用程序的一個示例。
清單 2. 鏈接修飾的 CSS 示例
1 2 3 4 5 6 7 8 9 10 a, a:link, a:active, a:visited { color: #000000; text-decoration: none; font-weight: bold; background-color: #EEEEEE; } a:hover { text-decoration: underline; background-color: #FFFFAA; }此標記設置一個一般鏈接，將字體顏色設置為黑色，取消默認的下劃線，將字體加粗，以及還將背景顏色設置為白色。在懸停狀態下，它重新應用下劃線並創建一種黃色的新背景顏色來突出顯示。當在浏覽器中測試此標記時，您將會注意到在鼠標懸停自鏈接上時，背景從淺灰色更改為黃色，當鼠標移開時，從黃色變回淺灰色。前面已經看到，還可以向 a:hover 應用文本陰影。
當開發人員建立 CSS3 的概念時，他們撇開了任何與 < a> 標記相關的特定樣式，將更多精力放在泛型上。因此，本文不會介紹所謂的 transform:rotate，舉例而言可將它用於導航中的 < li> 標記。相反，結合本文已經介紹的內容，可以得到類似於清單 3 的樣式。
清單 3. 使用一些 CSS3 屬性增強的 CSS 導航示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 a, a:link, a:active, a:visited { color: #000000; text-decoration: none; font-weight: bold; background-color: #EEEEEE; } li { text-align: center; list-style-type: none; width: 50px; padding: 10px; margin: 10px; background-color:#EEEEEE; border: 1px solid #000000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); transform:rotate(-20deg); } li:hover { text-decoration: underline; background-color: #FFFFAA; }創建沒有表格的列
一般而言，表格存在著與布局技術一樣的缺陷，因為當您布局包含表格的網頁時，您會搞亂數據的邏輯流程。記得在本文開頭我們說過，CSS 是 (X)HTML 之上的一層，而 (X)HTML 實際上是通過一種緊湊方式呈現的數據。不錯，最佳的設計方式是以 (X)HTML 形式提供數據，沒有任何設計或樣式：如果它看起來是緊湊的，那麼您可以應用一個 CSS 樣式表。如果確實需要編輯 (X)HTML 來應用某種設計，請確保您禁用了 CSS，以查看它是否仍然是緊湊的。
出於兩種原因，這樣做非常重要。第一個原因是讓它可供擁有特殊的視覺需求的人訪問（因為他們將常常擁有自己的默認樣式表設置或軟件）。第二個原因是機器需要能夠讀取您的網站。搜索引擎和其他軟件需要能夠讀取並跟蹤您網站的代碼，來為它建立索引。
那麼，問題是如何創建沒有表格的列？很簡單，使用兩個 < div> 框，如清單 4 所示。
清單 4. 列 div 的 (X)HTML 示例
1 2 3 4 5 6 < div id="left" class="equal-column"> < /div> < div id="right" class="equal-column"> < /div> < div class="something-below"> < /div>然後可以在 CSS 內設置各種設計屬性。清單 5 提供了一個示例。
清單 5. 創建 div 列的 CSS 樣式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 div.equal-column { width: 45%; height:100%: } div#left { float: left; } div#right { float: right; } div.something-below { width: 100%; clear: both; }此標記將兩列都設置為寬 45%，然後將左側的列固定到左側，將右側的列固定到右側。最後，使用另一個帶有類 something-below 的 < div>，我們希望它占據兩列下的整個屏幕。這是一種有用的技術，可用於快速、輕松地在屏幕上獲得兩列。
在 CSS3 中，還有另一個巧妙的概念，那就是文本列。換句話說，如果 column-count 屬性設置為一個數字，一個段略會自動拆分為兩段：
1 2 3 4 5 div#textual-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }此標記設置一個 ID 為 textual-columns 的 < div> 來得到兩個文本列。但是，您可能已注意到，它讓每列的高度相等，與您可以在報紙或雜志上看到列相比，這可能有點出乎意料。
字體版式
CSS2.1 定義了 3 種一般的字體集：serif、sans-serif 和 monospace。這些字體將始終適用於每個系統，它們不一定看起來完全一樣，但是一般而言，如果主要字體出現故障，它們至少可以作為備用字體。所以，舉例而言，在您的 body CSS 聲明中，可以使用類似以下形式的內容：
1 2 3 body { font-family: Univers, sans-serif; }其中以選擇了 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 字體：
1 < link href='http://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>然後，使用 CSS 應用樣式：
1 2 3 body { font-family: 'Architects Daughter', serif; }您的網站現在使用了 Architects Daughter Google 字體。但是，我的建議是不要為整個網站使用 “太過漂亮的” 字體。請確保您的網站繼續保持干淨、緊湊和清新。
結束語
CSS2.1 和 CSS3 都是內涵豐富的主題，值得用一本書來探討。本文僅大概介紹了如何編寫高質量的樣式表，您可以應用這裡的知識在萬維網上的其他地方查找 CSS 參考資料。
通過不引人注目的、彼此獨立的方式使用 (X)HTML 和 CSS，您可以最大程度地實現標准兼容性、可訪問性和搜索引擎優化。CSS 是一種優秀的技術，XHTML 和 HTML 也是，但是它必須以一種標准化的方式使用。這些標准可能是 Web 設計的基本資源，但它們不是設計本身，優秀的設計必須通過實踐和不斷完善來獲得。