傳送門：
1. 簡介
CSS 是層疊樣式表(Cascading Style Sheets)，用于定義 HTML 內容的樣式。通過一次定義多次調用的方式可以減少代碼復用。
p {
font-size:12px;
color:red;
font-weight:bold;
}
如上代碼即為一個 CSS 樣式，定義了字體大小為 12 px 、紅色、粗體洗搂。
定義
CSS 樣式由選擇器和聲明組成：
-
選擇器：在 HTML 代碼中使用的標簽名，如上例中的p载弄。 -
聲明：大括號里的內容耘拇。
聲明樣式，按照 k:v 格式宇攻，以分號隔開惫叛。
注釋
/*我是注釋*/
2. 三種插入方式
內聯(lián)式：把樣式寫在首標簽里
<p style="color:red;font-size:12px">這里文字是紅色。</p>
- 寫在頭標簽里逞刷，不能寫在尾標簽中
- 所有屬性都要寫在 style="" 的雙引號中
- 屬性之間用分號隔開
嵌入式：寫在 style 標簽中
<style type="text/css">
span {
color:red;
}
</style>
外部式：寫在外部文件中
第一步：建立文件
建立一個以 .css 為擴展名的文件嘉涌，然后如下定義樣式：
span {
color:red;
font-size:20px;
}
第二步：鏈接到 CSS 文件
在 HTML 文件中的 head 標簽中添加 <link> 標簽：
<link href="base.css" rel="stylesheet" type="text/css">
-
href="base.css"指定 CSS 文件 -
rel="stylesheet" type="text/css"是固定寫法，rel 指的是 relationship夸浅，stylesheet 代表連接關系是樣式表仑最。
優(yōu)先級
這三種插入方式是有優(yōu)先級關系的，也就是說帆喇，如果我們同時使用三種功能不同的方式以相同的選擇器名定義了三種樣式警医，那么將會按照就近原則來判斷具體采取哪種樣式。
下面是個簡單的證明：
首先定義一個外部樣式：
然后再 HTML 代碼中使用一個藍色的外部式坯钦、一個紅色嵌入式预皇、一個綠色內聯(lián)式樣式：
結果是這樣：
如果調換外部式與嵌入式的順序:
那么結果就變成：
總結
- 就近原則，樣式的聲明與所作用的內容之間的行數(shù)越近婉刀，優(yōu)先級越高吟温。
- 通常，我們會把嵌入式寫在外部式的后邊突颊，以保證嵌入式的優(yōu)先級大于外部式鲁豪。
- 外部式多用于式樣的全局定義，減少代碼復用律秃。
- 嵌入式確保當前頁面的樣式統(tǒng)一呈昔。
- 內聯(lián)式用來實現(xiàn)局部特殊化。
3. 選擇器
標簽選擇器
** 聲明：**
span {
color: red;
}
調用：
<span>內容</span>
類選擇器
類選擇器通常用與復雜友绝、重疊的元素樣式。
** 聲明：**
.green {
color: green;
}
調用：
<span class="green">內容</span>
聲明有 "
." 肝劲，調用沒 "." 迁客。
id選擇器
id 選擇器與類選擇器基本相同郭宝，只是：
"
." 換 "#"，"class" 換成 "id"
** 聲明：**
#blue {
color: blue;
}
調用：
<span id="blue">內容</span>
同一個 id 選擇器在一個 HTML 文件中只能被使用一次掷漱。
id 選擇器再調用時不能使用詞列表的方式粘室，即：
<span id="blue green yellow">內容</span>
但類選擇器可以。
子選擇器
子選擇器作用于（使用類選擇器的）標簽的第一代子標簽卜范。
聲明：
.food>span {
color: red;
}
調用：
<p class="food"><span>內容</span></p>
注意：子選擇器在聲明的時候衔统，"
>" 左邊是類選擇器，右邊是標簽選擇器海雪！
后代選擇器
后代選擇器作用于（使用類選擇器的）標簽的所有后代標簽锦爵。后代選擇器的聲明就是把子選擇器的 ">" 換成 ""（）空格。
聲明：
.food span {
color: red;
}
調用：
<p class="food"><a>嘿<b>啊<span>內容</span></b></a></p>
后代選擇器會作用于所有后代標簽奥裸。比如上例中的a险掀、b、span 標簽湾宙。
通用選擇器
通用選擇器用通配符 "*" 來表示樟氢，可以匹配當前頁面所有的標簽。
偽類選擇器
先來個例子侠鳄，主場跟客場踢球埠啃，無論哪個隊贏，總會有觀眾在體育館歡呼伟恶。盡管我們無法確定什么時候哪個隊伍會贏碴开，但是我們能預測總會有觀眾歡呼。偽類選擇器其實就是在定義還沒有發(fā)生但是肯定會發(fā)生的樣式知押。
聲明：
a: hover {
color: red;
}
調用：
<a href="www.google.com"></p>
hover 可以讓鼠標懸停的元素觸發(fā)效果叹螟，如上即是變成紅色。偽類選擇器就是對這種將會發(fā)生的事情進行樣式聲明台盯。
常用的偽類選擇器有 active罢绽、focus、hover静盅、link良价、visited。
分組選擇器
分組選擇器旨在簡化選擇器的聲明蒿叠。
h1, span {
color: red;
}
上邊的代碼等價于：
h1 {
color: red;
}
span {
color: red;
}
