溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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">
h2 {color:blue;}
</style>
書寫于標記內部
內部CSS樣式是通過XHTML標記的style屬性來實現的
<p>普通段落</p>
<p >段落（內部樣式）</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 |
選擇器的權值加到一起，大的優先；如果權值相同，后定義的優先
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
