一 概述
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲在樣式表中
- 把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在 CSS 文件中
- 多個樣式定義可層疊為一
二 層疊次序
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的規則層疊于一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
1. 瀏覽器缺省設置
2. 外部樣式表
3. 內部樣式表（位于 <head> 標簽內部）
4. 內聯樣式（在 HTML 元素內部）
三 CSS 基本語法
CSS語法由三部分構成：選擇器、屬性和值：
selector {property: value}
選擇器 (selector) 通常是你希望定義的 HTML 元素或標簽，屬性 (property) 是你希望改變的屬性，并且每個屬性都有一個值（value）。屬性和值被冒號分開，并由花括號包圍，這樣就組成了一個完整的樣式聲明（declaration）。
提示：如果值為若干單詞，則要給值加引號：
p {font-family: "sans serif";}
提示：如果要定義不止一個聲明，則需要用分號將每個聲明分開。下面的例子展示出如何定義一個紅色文字的居中段落。最后一條規則是不需要加分號的，但是加上分號是良好的習慣：
p {text-align:center; color:red;}
提示：應該在每行只描述一個屬性，這樣可以增強樣式定義的可讀性：
p {
text-align: center;
color: black;
font-family: arial;
}
提示：是否包含空格不會影響 CSS 在瀏覽器的工作效果，但是可以增加可讀性；與 XHTML 不同，CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。
提示：不要在屬性值與單位之間留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。
四 CSS 高級語法
1. 選擇器分組
可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
h1,h2,h2,h3,h5,h6 {
color: green;
}
2. 繼承及其問題
根據 CSS，子元素從父元素繼承屬性。但是它并不總是按此方式工作。看看下面這條規則：
body {
font-family: Verdana, sans-serif;
}
根據上面這條規則，站點的 body 元素將使用 Verdana 字體（假如訪問者的系統中存在該字體的話）。
通過 CSS 繼承，子元素將繼承最高級元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子元素都應該顯示 Verdana 字體，子元素的子元素也一樣。在大部分的現代瀏覽器中，確實是這樣的。但是在那個瀏覽器大戰的血腥年代里，這種情況就未必會發生。比方說，Netscape 4 就不支持繼承，它不僅忽略繼承，而且也忽略應用于 body 元素的規則。IE/Windows 直到 IE6 還存在相關的問題，在表格內的字體樣式會被忽略。我們又該如何是好呢？
辦法：
//:定義一個父元素風格，應用于整體
body {
font-family: Verdana, sans-serif;
}
//:采用組選擇器來預防某些瀏覽器拒絕繼承
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
//:如果某子元素不愿繼承風格，可以定義特殊規則來擺脫父元素規則
p {
font-family: Times, "Times New Roman", serif;
}
3. 派生選擇器