CSS 認識一下
1、CSS 的那些事
CSS（Cascading Style Sheets）譯「層疊樣式表」，我的理解是：各種樣式疊加的表。
一個網頁，如果沒有 CSS，就是穿着“國王的新衣”，在裸奔！CSS 的重要性不言而喻！
作為 HTML 的衣服，CSS 為 HTML 元素提供了一種樣式描述，定義其顯示方式，TA 能夠對網頁中元素進行像素級精確控制。
CSS 的歷史不做過多贅述，先了解幾種引入方式以及其區別。
2、外部樣式
外部樣式是指單獨建立一個擴展名為 .css 的樣式表，在 head 標簽中采用 link 方式引入，也可以使用 import 方式引入：
// link 引入
<link rel="stylesheet" type="text/css" href="css/style.css" />
// @import 引入
<style type="text/css">
@import url("css/style.css");
</style>
引入外部樣式的好處就是，一個樣式表可以在多個頁面中復用，牆裂建議使用 link 方式引入，import 新手慎用。
3、內嵌樣式
內嵌樣式主要通過 <style> 標簽 在頁面中編輯樣式：
<style>
.title {
color: red
}
</style>
該方法編寫的樣式僅在當前頁面有效，無法用於其他頁面，<style> 標簽可以放在任意位置，建議放在 head 中。
4、行內樣式
行內樣式是在 HTML 頁面中的某個元素上直接對其直接定義，以 p 元素為例：
<p style="color: red"></p>
行內樣式只對其所在的標簽生效，實際上寫頁面時建議少用或者不用。
引用樣式最好是采用第一種 link 方式引入，分離 HTML 頁面代碼與 CSS 樣式，方便項目的維護管理，以及提高 CSS 樣式的復用性。
其他兩種方法少用或者不用，盡量降低頁面的的復雜性。
5、CSS 選擇器
HTML 頁面中的元素樣式大多是通過 CSS 選擇器進行控制的。
要想用 CSS 對 HTML 頁面中的元素實現一對一，一對多或者多對一的控制，離不開 CSS 選擇器。
CSS 的選擇器大概有這些：
- 通用選擇器
- 標簽選擇器
- class 選擇器（類選擇器）
- id 選擇器
- 后代選擇器
- 子代選擇器
- 組合選擇器
- 相鄰兄弟選擇器
- 偽類選擇器
- 媒體查詢（姑且也算吧）
還有一些可能漏掉了，歡迎留言補充，先復盤一些常見選擇器。
5.1 通用選擇器
通用選擇器用 * 開頭，后面直接跟上樣式，作用於所有標簽，表示通用定義。
就好比定義所有正常人：一個頭、兩只手、兩條腿。
例：
* {
font-size: 18px;
color: red
}
這里表示所有標簽中的字體大小為 18px，顏色為紅色。
5.2 標簽選擇器
標簽選擇器可以選中所有的同類標簽元素，標簽后面直接跟上樣式。
好比規定學生穿校服，不同工廠的工人有對應的工服。
例：
p {
font-size: 16px;
color: blue
}
這里表示所有 p 標簽中的字體大小為 16px，顏色為藍色。
5.3 class 選擇器（類選擇器）
class 選擇器可以選中帶有特定類名的標簽進行樣式定義，也就是一對多，書寫時以 . 開頭，跟上 class 名稱，然后編寫樣式，在對應的標簽中用 class="" 引用。
好比分配一個班級的班干部，給予他們同一類屬性。
例：
// css 樣式
.title{
background-color: red
}
// html 頁面
<div class="title">語文課代表</div>
<div class="title">數學課代表</div>
這里就能把兩個課代表的背景顏色都設置成紅色，一對多設置。
5.4 id 選擇器
id 選擇器以 # 開頭，后面跟上 id 名，然后書寫樣式。在對應的標簽中使用 id="" 引用，其 id 名具有唯一性。
以一個學校為例，定義校長的屬性，一個學校只有一個校長。
例：
// css 樣式
#title{
background-color: black
}
// html 頁面
<div id="title">校長</div>
這里是定義校長的背景顏色為黑色，雖然說 id 選擇器具有唯一性，如果把幾個元素都命名成相同的 id 名字，CSS 選擇器還是會把被標記的元素都選中應用樣式（和 class 選擇器一樣）。
乍一看，id 選擇器的唯一性似乎不存在。然而，在 javascript 中只會選擇具有相同 id 名字元素中的第一個。所以，養成一個好習慣，同一 id 不要在同一頁面中出現第二次。
注意，由於 CSS 的解釋是自上而下的，對於一個元素的相同屬性賦值，下面的屬性描述會把上面的覆蓋掉，因此在一定要注意屬性的書寫順序。
5.5 后代選擇器
后代選擇器也稱為包含選擇器，用來選擇特定元素的后代，將父元素放在前面，子元素放在后面，中間加一個空格分開。
這個應該比較好理解吧，打個比方，我是中國人，我所有的后代都留着中國人的血液。
例：
// css 樣式
.china p {
background-color: yellow
}
// html 頁面
<div class="china">
<p>兒子</p>
<p>女兒</p>
</div>
這里的兒子和女兒的背景顏色都會是黃色。
后代選擇器中的元素不限制兩個，也可適用於多層后代關系，用多個空格加以分開最大嵌套層數不超過 256 層。
5.6 子代選擇器
與后代選擇器的不同的是，子代選擇器僅是指 TA 的第一代，后代選擇器通過空格來選擇，子代選擇器通過 > 選擇。
好比我只給我的子女們發紅衣服，其他后代，例如孫輩，曾孫輩都不發。
例：
// css 樣式
div > strong {
color:red
}
// html 頁面
<div>
<strong>兒子</strong>
<span>
<strong>孫子</strong>
</span>
</div>
子女的字體顏色是紅色的，而孫輩是默認的顏色。
5.7 組合選擇器
對多個不同元素做相同的操作的情況下，可以共同使用同一樣式代碼，元素之間用英文逗號分隔，這就是組合選擇器。
好比給不同身份的人發一個“感動玖柒十大青年獎”，可以把他們全部叫到一起來頒獎。
例：
// css 樣式
div, p, span, h1 {
color: red
}
// html 頁面
<div>小明</div>
<p>小紅</p>
<span>小剛</span>
<h1>小利</h1>
這里小明、小紅、小剛和小利的顏色都是紅色的，采用組合選擇器最大的好處就是：簡化 CSS 代碼，提高了編碼效率。
5.8 相鄰兄弟選擇器 & 通用兄弟選擇器
相鄰兄弟選擇器還是挺好理解的，MDN 的介紹是：介於兩個選擇器之間，當第二個元素緊跟在第一個元素之后，並且兩個元素都是屬於同一個父元素的子元素，則第二個元素將被選中。
好比皇帝說下一個生的是兒子就當太子，那就是以當前的最后一個子女為參照物，下一個兒子就是太子，如果先生了個女兒，則不算。
例：
// css 樣式
div + p {
color: red
}
// html 頁面
<div>大兒子</div>
<span>二女兒</span>
<p>二兒子</p>
<p>三兒子</p>
這里都是默認顏色，因為中間相隔了一個二女兒，所以二兒子不能當太子了。
相鄰兄弟選擇器總結起來就兩個關鍵點：
- 緊接在另一元素后的第一個
- 二者有相同父元素
通用兄弟選擇器類似於相鄰兄弟選擇器，但肯定是不一樣的，首先不同的是通用兄弟選擇器是用 ~ 連接后面的元素。
繼續拿皇帝兒子舉例，皇帝說大兒子之后所有的兒子都封王，那就是以大兒子為參照，之后所有的兒子就是王，如果生了個女兒，則略過。
例：
// css 樣式
div ~ p {
color: red
}
// html 頁面
<div>大兒子</div>
<span>二女兒</span>
<p>二兒子</p>
<p>三兒子</p>
這里都是你猜一下會是神馬樣子？
5.9 偽類選擇器
偽類選擇器通常是用來描述元素在一些特定狀態下的樣式，最常見的就是用在 a 元素（超鏈接）中了，當然其他元素也可以，只不過相對來說少一些。
就好比拿人來說，不開心的時候會皺眉，開心的時候會笑，發火的時候可能會摔東西，主要是對不同的狀態定義。
例：
// 沒有被訪問過a標簽的樣式
a:link {
color: black
}
// 訪問過后a標簽的樣式
a:visited {
color: yellow
}
// 鼠標懸浮時a標簽的樣式
a:hover {
color: red
}
// 鼠標摁住的時候a標簽的樣式
a:active {
color: blue
}
偽類選擇器我覺得應該是最有趣的選擇器了，試試就知道了。
5.10 媒體查詢
媒體查詢應該算是選擇器吧，不管那么多我先把 TA 拉進來。
TA 能在不同的條件下使用不同的樣式，使頁面在不同在設備下達到不同的渲染效果。
好比一個人在不同的場景下做不同的事，為父親的時候教育子女，為丈夫的時候保護妻子，為人子的時候照顧父母。
例：
@media screen and (max-width: 300px) {
body {
background-color: red
}
}
這里的樣式表示如果頁面寬度小於 300px 則修改背景顏色為紅色，簡單易理解吧。
6、最后
CSS 的簡單復盤就到這里了，所有的實例都沒有用截圖展示，還是希望各位能自己去試一試，看看效果，多敲才是正道。
如果有一些地方寫的不對，也歡迎指正，分享即學習。
