傳送門：
1. 簡介
CSS 是層疊樣式表(Cascading Style Sheets)，用于定義 HTML 內容的樣式。通過一次定義多次調用的方式可以減少代碼復用。
p {
font-size:12px;
color:red;
font-weight:bold;
}
如上代碼即為一個 CSS 樣式，定義了字體大小為 12 px 、紅色、粗體。
定義
CSS 樣式由選擇器和聲明組成：
-
選擇器：在 HTML 代碼中使用的標簽名，如上例中的p。 -
聲明：大括號里的內容。
聲明樣式，按照 k:v 格式，以分號隔開。
注釋
/*我是注釋*/
2. 三種插入方式
內聯式：把樣式寫在首標簽里
<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 代表連接關系是樣式表。
優先級
這三種插入方式是有優先級關系的，也就是說，如果我們同時使用三種功能不同的方式以相同的選擇器名定義了三種樣式，那么將會按照就近原則來判斷具體采取哪種樣式。
下面是個簡單的證明：
首先定義一個外部樣式：
然后再 HTML 代碼中使用一個藍色的外部式、一個紅色嵌入式、一個綠色內聯式樣式：
結果是這樣：
如果調換外部式與嵌入式的順序:
那么結果就變成：
總結
- 就近原則，樣式的聲明與所作用的內容之間的行數越近，優先級越高。
- 通常，我們會把嵌入式寫在外部式的后邊，以保證嵌入式的優先級大于外部式。
- 外部式多用于式樣的全局定義，減少代碼復用。
- 嵌入式確保當前頁面的樣式統一。
- 內聯式用來實現局部特殊化。
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 標簽。
通用選擇器
通用選擇器用通配符 "*" 來表示，可以匹配當前頁面所有的標簽。
偽類選擇器
先來個例子，主場跟客場踢球，無論哪個隊贏，總會有觀眾在體育館歡呼。盡管我們無法確定什么時候哪個隊伍會贏，但是我們能預測總會有觀眾歡呼。偽類選擇器其實就是在定義還沒有發生但是肯定會發生的樣式。
聲明：
a: hover {
color: red;
}
調用：
<a href="www.google.com"></p>
hover 可以讓鼠標懸停的元素觸發效果，如上即是變成紅色。偽類選擇器就是對這種將會發生的事情進行樣式聲明。
常用的偽類選擇器有 active、focus、hover、link、visited。
分組選擇器
分組選擇器旨在簡化選擇器的聲明。
h1, span {
color: red;
}
上邊的代碼等價于：
h1 {
color: red;
}
span {
color: red;
}
