CSS（Cascading Style Sheets）：層疊樣式表，又叫級聯樣式表，簡稱樣式表
CSS實現了將結構與表現分離
提高了代碼的可重用性和可維護性
CSS與XHTML之間的關係
XHTML用於構建網頁的結構
CSS用於構建HTML元素的樣式
XHTML是結構，CSS樣式是表現
XHTML屬性與CSS樣式的使用原則
W3C建議儘量使用CSS樣式取代XHTML屬性
如果屬性爲XHTML特有屬性，則使用XHTML屬性
如果屬性爲CSS樣式特有屬性，則使用CSS樣式屬性
鏈接到外部CSS文件
創建CSS文件，並且書寫CSS規則
-CSS文件的拓展名.css
鏈接到外部CSS文件
在HTML文檔的<head>元素內添加<link/>元素
<link type="text/css" rel="stylesheet" media="媒體類型" href="" />
書寫於頭部文檔中
在<head>元素內部書寫<style>元素
在<style>元素中添加樣式規則
<style type="text/css">
h1 {color:blue;}
</style>
書寫於標記內部
內部CSS樣式是通過XHTML標記的style屬性來實現的
<p>普通段落</p>
<p style="color:red;">段落（內部樣式）</p>
CSS應用方式的優先級
內聯樣式最高
內部樣式其次
外部樣式最低
內部樣式和外部樣式衝突的話，取決於二者的書寫順序
CSS選擇器
類型選擇器
類型選擇器也被稱爲元素選擇器
類型選擇器匹配文檔樹中的特定的HTML元素
<style>
p{
text-align: left;
color: red;
}
</style>類選擇器
類選擇器以點開頭，類名稱不能以數字開頭。
類選擇器匹配使用指定類的元素
類選擇器的使用通過元素的class屬性來實現
多個類名稱之間以空格分隔
<style>
.class{
text-align: left;
color: red;
}
<style>
span.class{
text-align: left;
color: red;
}僅對具有class屬性的span元素生效
ID選擇器
ID選擇器以#開頭
ID選擇器匹配文檔中的唯一元素
ID選擇器的使用通過HTML元素的ID實現
注：某HTML元素存在ID屬性，那麼該ID可以應用於
-CSS樣式
-JavaScript
-jQuery
羣組選擇器
羣組選擇器是具有相同屬性的選擇器的簡寫方式
選擇器之間以逗號分隔
後代選擇器
後代選擇器也被稱爲派生選擇器
依據元素在其位置的上下文關係來定義樣式
後代選擇器要求選擇器之間至少存在父子關係
選擇器之間以空格分隔
子代選擇器
依據元素在其位置的上下文關係來定義樣式
後代選擇器要求選擇器之間只能存在父子關係
選擇器之間以大於號分隔
僞類選擇器
CSS僞類用於向某些選擇器添加特殊的效果
CSS僞類選擇器的語法是：
選擇器：僞類選擇器
CSS僞類選擇器可以分爲
-動態元素
-UI元素狀態僞類
動態僞類是基於HTML元素的特徵進行分類
動態僞類不能出現在文檔源代碼或者文檔樹
動態僞類又可以分爲
-鏈接僞類
：link，適用於尚未訪問的鏈接
：visited，適用於訪問過的鏈接
-用戶動作僞類，用於呈現用戶操作
：hover，用戶指定HTML元素
：active，HTML元素被用戶激活
：focus，應用於HTML元素獲取焦點
a:link {
color : red;
text-decoration : none;
}
a:visited{
color : black;
text-decoration : underline;
}UI元素狀態僞類
：enabled，表示處於啓用狀態的UI元素
：disabled，表示處於禁用狀態的UI元素
：checked，表示被選定的UI元素
僞元素選擇器
CSS僞元素用於向某些選擇器設置特殊效果
：before，用於在呀un蘇的內容前面插入新內容
：after，用於在元素的內容後面插入新內容
選擇器的優先級
| 選擇器類型 | 權值 |
| 類型選擇器 | 0,0,0,1 |
| 僞元素選擇器 | 0,0,0,1 |
| 類選擇器 | 0,0,1,0 |
| 僞類選擇器 | 0,0,1,0 |
| ID選擇器 | 0,1,0,0 |
| 內聯樣式 | 1,0,0,0 |
選擇器的權值加到一起，大的優先；如果權值相同，後定義的優先