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="https://www.cnblogs.com/msunh/p/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 名稱，然后撰寫樣式，在對應的標簽中用 參考，
好比分配一個班級的班干部，給予他們同一類屬性，
例：
// css 樣式
.title{
background-color: red
}
// html 頁面
<div >幼ò肝代表</div>
<div >數學課代表</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 >
<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 的簡單復盤就到這里了，所有的實體都沒有用截圖展示，還是希望各位能自己去試一試，看看效果，多敲才是正道，
如果有一些地方寫的不對，也歡迎指正，分享即學習，
公眾號「我是玖柒后」首發，分享即學習！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/93670.html
標籤：Html/Css
上一篇：前端最佳實踐——DOM操作