CSS及選擇器歸納
今天把ＣＳＳ樣式表的分類和選擇器分類做一個總結和歸納，供初學者參考：
1.樣式表的分類：
A)行類樣式：寫在HTML標籤裡面
例如：<h1 style=”樣式規則.......”></h1>,此例使用行類樣式
B)內嵌樣式：寫在<head></head>之間
例如：<style type=”text/css”>
H1{
樣式規則;
...............................
}
</style>
C)外部樣式：寫在外部，HTML頁面要使用時連結或者匯入
例如：連結
匯入:： <style type="text/css">
@import url("style/index.css");
</style>
2.選擇器
A)HTML選擇器：選擇器的名字就是HTML標籤名
B)CLASS選擇器：以.號開頭，引用時使用class=”類名”
C)ID選擇器：以#開頭，引用時使用ID＝”ID名”
3.A標籤樣式
|
名稱 |
涵義 |
|
a或a:link |
連結靜止狀態 |
|
a:hover |
滑鼠懸停 |
|
a:active |
滑鼠正在點選 |
|
a:visited |
滑鼠點選後 |
4.選擇器的分類：
1. HTML選擇器：選擇器的名字就是HTML標籤
2. 類選擇器：以.號開頭命名，引用時使用class=“類名”
3. ID選擇器：以#號開頭，引用時使用“ID=選擇器名”
|
4．群組選擇器： |
|
例如：h2,li,.myca{ } 表示h2和li和類選擇器都採用同一種樣式 |
|
5.包含選擇器(也叫後代選擇器) |
|
例如：#d1 ul li{ } 表示包含在d1下面的ul下面，ul下面的li採用此樣式 |
|
6.子元素選擇器 |
|
例如：h1 > em{ color:red } <h1><span>這是<em>第一</em>個H1</span></h1> <h1>這是<em>第二</em>個H1</h1> 表示第2個em會起作用，第一個不會起作用 |
|
7.相鄰兄弟選擇器 |
|
例如：h1+p{ } 表示“緊跟在h1後面的段落起作用，h1和p擁有共同的父親” |
|
8.萬用字元選擇器* |
|
例如：*{ font-size:12px; } 表示網頁中所有的元素都採用這種樣式 實際應用中，下面的情況比較常見： *{ margin:0; Padding:0 } |