#00你認真學了css？
這裡先搞清楚幾個基本概念：
標籤、元素、屬性，一圖釋所有：
一、CSS介紹
1、什麼是css？
CSS（Cascading Style sheets），是用來為網頁添加樣式的代碼
2、盒模型：
（1）內邊距（padding）：圍繞著內容的空間，比如圍繞段落的空間
（2）邊框（border）：緊接著內邊距的實體線段
（3）外邊距（margin）：圍繞元素外部的空間
（4）寬度（width）
（5）高度（height）
二、應用
1、簡單示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css</title></head><body> <h1>hello css!</h1> <p>css 很6666</p></body></html>
/*style.css*/h1{ padding:10px; background-color: orange; border:1px sold black;}
2、CSS的工作原理
三階段：
瀏覽器輸入url——瀏覽器向伺服器發送請求——伺服器將相關數據處理返返至瀏覽器——瀏覽器拿到並載入頁面——解析html的字元串，詞法分析解析成樹狀結構——create Dom tree
解析html時，載入css，文件被下載——解析css文件對其分析——attach style to Dom nodes，加入create Dom tree
兩樹狀結構對應起來——新的dom樹（節點相關的元素、參數）——渲染、繪製頁面
？：白屏、載入順序、載入時機
3、css應用方式
（1）外部樣式表（推薦）
A、鏈接方式：通過<link>引入css
如：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css</title> <link rel="stylesheet" href="style.css"></head><body> <h1>hello css!</h1> <p>css 很6666</p></body></html>
B、導入方式：過@import引入樣式，放入css中，不要忘記分號
可選擇以下幾種方式：如
@import style2.css;@import "style2.css";@import url("style2.css");@import url(style2.css);@import url(style2.css);
/*加入條件限制，如媒體查詢屬性 */
@import url(landscape.css) screen and (orientation:landscape);
（2）內部樣式（內嵌方式）
即將CSS放在頁面的<style>元素中
如：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css</title> <link rel="stylesheet" href="style.css"> <style> @import "style2.css"; p{ font-size: 50px; } </style></head><body> <h1>hello css!</h1> <p>你好</p></body></html>
題外話：
- 注意文件路徑
- 右鍵——檢查——查看源代碼——點擊顯示錯誤鏈接：
failed to load resource：net：ERR_FILE_NOT_FOUND
即提示有可能是以下錯誤可能：
- 文件不存在
- 文件路徑寫錯了
（3）內聯樣式（行內方式）（不推薦）
即直接在html的標記中使用style屬性，將css元素屬性的代碼直接寫在其中
如：
<p stylex="background:orange; font-size:24pax;">css很棒</p>
（4）屬性樣式（廢棄）
如：
<img src="a.png" width_=100 height=200>
三、css選擇器
1、選擇器類型
A、基礎選擇器
（1）* ：通用元素選擇器，匹配頁面任何元素（比較少用）
（2）#id：id選擇器，匹配特定id的元素
（3）.class：類選擇器，匹配class包含（不是等於）特定類的元素
（4）element：標籤選擇器
B、組合選擇器
（1）E,F ：多元選擇器，相當於並列選擇器。用 , 分隔，同時匹配元素E或者元素F
（2）E F ：後代選擇器。用空格分隔，匹配E元素所有的後代（不只是子元素，子元素向下遞歸），元素F
（3）E>F ：子元素選擇器。用 > 分隔，匹配E元素的所有直接子元素（再嵌套的子元素就沒有用）
（4）E+F ：直接相鄰選擇器。匹配E元素之後的相鄰的同級元素F
（5）E~F ：普通相鄰選擇器（弟弟選擇器），匹配E元素之後的同級元素F （無論直接相鄰與否）
（6）.class1.class2 : （既、又）id和class選擇器和選擇器連寫的時候中間沒有分隔符， . 和 #本身充當分隔符的元素
（7）element#id ：id和class選擇器和選擇器連寫的時候中間沒有分隔符， . 和 #本身充當分隔符的元素
C、屬性選擇器
D、偽類選擇器
E、偽元素選擇器
2、基礎選擇器
（1）* ：通用元素選擇器，匹配頁面任何元素（比較少用）
（2）#id：id選擇器，匹配特定id的元素
（3）.class：類選擇器，匹配class包含（不是等於）特定類的元素
（4）element：標籤選擇器
演示圖：
3、組合選擇器
（1）E,F ：多元選擇器，相當於並列選擇器。用 , 分隔，同時匹配元素E或者元素F
（2）E F ：後代選擇器。選擇它所有的後代子元素。用空格分隔，匹配E元素所有的後代（不只是子元素，子元素向下遞歸），元素F
（3）E>F ：子元素選擇器。（普遍）選擇它第一子元素，對再嵌套的子元素沒用。用 > 分隔，匹配E元素的所有直接子元素
（4）E+F ：直接相鄰選擇器。匹配E元素之後的相鄰同級所有元素F
（5）E~F ：普通相鄰選擇器（弟弟選擇器），匹配E元素之後的同級元素F （無論直接相鄰與否）
（6）.class1.class2 : 既、又，直接靠在一起，同時擁有這兩個類選擇器特性的一個元素。id和class選擇器和選擇器連寫的時候中間沒有分隔符， . 和 #本身充當分隔符的元素
（7）element#id ：id和class選擇器和選擇器連寫的時候中間沒有分隔符， . 和 #本身充當分隔符的元素
4、屬性選擇器
（1）E[attr] ：匹配所有具有屬性attr的元素，如div[id] 就能取到所有有id屬性的div
（2）E[attr=value] :匹配屬性attr值為value的元素，如div[id=test]，匹配id=test的div
5、偽類選擇器
（1）定義：代表一個元素的另一種狀態
（2）類型：
A、第一類：
- E: first-child 匹配元素E的第一個子元素
- E：link 匹配所有未被點擊的鏈接
- E: visited 匹配所有已被點擊的鏈接
- E：active 匹配滑鼠已經其上按下，還沒被釋放的E元素
- E：hover 匹配滑鼠懸停器上的E元素
- E： focus 匹配獲得當前焦點的E元素
- E： lang(c) 匹配lang屬性等於c的E元素
- E：enabled 匹配表單中可用的元素
- E：disabled 匹配表單中禁用的元素
- E： checked 匹配表單中被選中的radio或checkbox元素
- E： selection 匹配用戶當前選中的元素
例子1：
如設置E：hover時，滑鼠懸停元素時字體顏色就會變成藍色。
選擇器權重會使得a:hover{ color:blue;}大於a{ color：red;}的權重
所以樣式產生了覆蓋，如圖：
例子2:
a鏈接上常用的css屬性選擇器：
E：link 匹配所有未被點擊的鏈接
E: visited 匹配所有已被點擊的鏈接
E：hover 匹配滑鼠懸停器上的E元素
E：active 匹配滑鼠已經其上按下，還沒被釋放的E元素
由於css元素按順序填寫，依次展現元素屬性，這裡涉及到：a這個元素下的偽類選擇器權重，從而造成樣式覆蓋，如圖演示：
例子3：
E：enabled 匹配表單中可用的元素
E：disabled 匹配表單中禁用的元素
如輸入框被禁用，如何設置css里的元素屬性，如圖：
B、第二類：
- E：root 匹配文檔的根元素，對於html文檔，實際上就是html元素
- E：nth-child（n） 匹配其父元素的第n個子元素，第一個編號為1
- E:nth-of-type(n) 與：nth-child（）作用類似，但僅匹配使用同種標籤的元素
如圖當n=1時，
如圖當n=？（1除外的任意數）
n的取值
1，2，3，4，5
2n+1，2n，4n-1
odd，even：
如何運用：
做一個表格上，分別可以做兩色相間的表格效果，那麼就可以運用odd，even
/* nth-child(odd) 與 :nth-child(even) 分別匹配序號為奇數與偶數的元素 */
.h-table tr:nth-child(even){ background-color: #f1f1f1;}
參見：https://github.com/wxq393/project_work/blob/master/test2_table/table.css
6、偽元素選擇器
（1）E::first-line 匹配E元素內容的第一行
（2）E::first-letter 匹配E元素內容的第一個字母
（3）E::before 在E元素之前插入生成的內容
（4）E::after 在E元素之後插入生成的內容
舉例如圖：
7、選擇器的優先順序
（1）定義
如果多條規則作用於同一個元素上，且定義的相同屬性的不同值。
（2）如圖
<style>#test{color:#666;}p {color:#333;}</style><p id="text">Text</p>
（3）CSS優先順序
從高到低分別是：
A、在屬性後面使用 ：！important 即會覆蓋頁面內任何位置定義的元素樣式
B、作為style屬性寫在元素標籤上的內聯樣式
C、id選擇器
D、類選擇器
E、偽類選擇器
F、屬性選擇器
G、標籤選擇器
H、通配符選擇器
I、瀏覽器自定義
（4）複雜場景(按順序）
a、行內樣式<div stylex="XXX"><div>
b、ID選擇器
c、類、屬性選擇器、偽類選擇器
d、標籤選擇器、偽元素
註：選擇器的優先順序是如何計算的？
A、按順序來計算的：假設：
a等級：行內樣式<div stylex="XXX"><div>
b等級：ID選擇器c等級：類、屬性選擇器、偽類選擇器d等級：標籤選擇器、偽元素
即a-d等級權值依次為5、4、3、2，按照a-d等級的屬性順序依次得分，若取到相應等級的權值，最高的則為最優先順序別。
B、參考：當不同類別的多個選擇器混合使用個怎麼計算優先順序？有一個簡單的演算法，設
a.內聯樣式表的權值為1000
b.ID選擇器的權值為100c.class類選擇器的權值為10d.HTML標籤選擇器的權值為1
（5）樣式覆蓋
後面的樣式會覆蓋到前面的樣式
（6）選擇器使用經驗
- 遵守css書寫規範
- 使用合適的命名空間
- 合理地復用class
習題練習：
1、CSS 載入方式有幾種？
答：
（1）外部樣式表（鏈接+導入）（推薦）
- 通過<link>引入css
- 通過@import導入樣式，放入css中，不要忘記分號。在html或者css文件中都可以導入@import
（2）內部樣式（內嵌方式），即將CSS放在頁面的<style>元素中
（3）內聯樣式（行內方式）（不推薦），即直接在html的標記中使用style屬性，將css元素屬性的代碼直接寫在其中
（4）屬性樣式（廢棄）
2、@charset有什麼作用？
在外部樣式表文件內使用，指定該樣式表使用的字元編碼。該規則後面的分號是必需的，如果省略了此分號，會生成錯誤信息。如在外部css文件中寫：
@charset "utf-8";* {sRules}.class{sRules}
3、@import有什麼作用？如何使用？
答：作用：通過@import引入樣式或者css文件，可以減少文件的容量，加快文件載入速度
用法：
@import style2.css;@import "style2.css";@import url("style2.css");@import url(style2.css);@import url(style2.css);
4、id 選擇器和 class 選擇器的使用場景分別是什麼？
答：
（1）id選擇器，用於匹配特定id的元素，具有獨一無二不可代替性
（2）class選擇器，用於匹配class包含（不是等於）特定類的元素，描述一組元素的樣式，你可以多次使用class賦值，來命名元素名
5、CSS選擇器常見的有幾種？
答：基礎選擇器、組合選擇器、屬性選擇器、偽類選擇器、偽元素選擇器
6、偽類選擇器有哪些？偽元素有哪些？
答：（1）偽類選擇器：
E: first-child 匹配元素E的第一個子元素
E：link 匹配所有未被點擊的鏈接
E: visited 匹配所有已被點擊的鏈接
E：active 匹配滑鼠已經其上按下，還沒被釋放的E元素
E：hover 匹配滑鼠懸停器上的E元素
E：focus 匹配獲得當前焦點的E元素
E：lang(c) 匹配lang屬性等於c的E元素
E：enabled 匹配表單中可用的元素
E：disabled 匹配表單中禁用的元素
E： checked 匹配表單中被選中的radio或checkbox元素
E： selection 匹配用戶當前選中的元素
E：root 匹配文檔的根元素，對於html文檔，實際上就是html元素
E：nth-child（n） 匹配其父元素的第n個子元素，第一個編號為1
E:nth-of-type(n) 與：nth-child（）作用類似，但僅匹配使用同種標籤的元素
（2）偽元素：
E::first-line 匹配E元素內容的第一行
E::first-letter 匹配E元素內容的第一個字母
E::before 在E元素之前插入生成的內容
E::after 在E元素之後插入生成的內容
7、以下選擇器分別是什麼意思?
#header{}
答：id選擇器，匹配id為header的元素
.header{}
答： 類選擇器，匹配class為header元素
.header .logo{}
答：後代選擇器，匹配class為header的元素logo
.header.mobile{}
答：即又關係的並列元素，同時匹配這兩個類選擇器特性的一個元素
.header p, .header h3{}
答：多元選擇器，同時匹配.header p 和 .header h3兩個元素
#header a:hover{}
答：在id為header元素下匹配a元素滑鼠懸停屬性
#header .logo~p{}
答：在id為header元素下匹配logo元素之後的同級所有元素p （無論直接相鄰與否）
#header .logo+p{}
答：在class為header元素下匹配logo元素之後的相鄰同級元素p
#header .logo p{}
答：在id為header元素下匹配class為logo的後代元素p
#header .logo>p{}
答：在id為header元素下匹配class為logo元素的所有直接子元素，即第一子元素p
#header p.logo{}
答：在id為header元素下同時匹配p元素和class為logo元素這類既又關係（並列）的元素的特性
#header .logo.p{}
答：在id為header元素下同時匹配class為logo和p的元素
#header input[checked]{}
答：在id為header元素下匹配checked值的input的元素
8、運行如下代碼，並對結果做出解釋
<style> .box:first-child { color: red;}.box:first-of-type { background: blue;}.box :first-child { font-size: 30px;}.box :first-of-type { font-weight: bold;} </style> <div class="container"> <div class="box">div.box</div> <p class="box">p.box</p> <div class="box">div.box</div> <div class="box"> <div class="item">div.item</div> <p class="item">p.item</p> </div> <p class="box"></p> </div>
（1）效果圖展示：
（2）對其結果作出解釋：
運行1：
.box:first-child { color: red;}
選擇同級第一個元素,並且這個元素class是 box,顯示該標籤元素的內容顏色為紅色
運行2：
.box:first-of-type { background: blue;}
選擇同級第一個標籤元素,並且這個元素是這個同級中的第一個標籤，顯示背景色為藍色
運行3：（.box : .box和: 之間要有空格）
.box :first-child { font-size: 30px;}
表示 .box 裡面的第一個元素，顯示字體大小為30px的結果
運行4：
.box :first-of-type { font-weight: bold;}
選擇 .box里第一個同類型的元素，字體粗細為粗體
推薦閱讀：
※CSS 中，position：absolute、float、display：inline-block 都能實現相同效果，區別是什麼？
※IE6 下 margin:0 auto 不能居中的 bug 問題如何解決？
※單行網頁文字如何在移動端實現兩端對齊？
※css脫離文檔流到底是什麼意思，脫離文檔流就不佔據空間了嗎？脫離文檔流是不是指該元素從dom樹中脫離？