一、CSS加載方式
外部樣式表（推薦）
- 通過(guò)
<link>在html中引入CSS：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Hello CSS!</h1>
</body>
</html>
- 通過(guò)
@import引入樣式，放入CSS中，不要忘記分號(hào)“;”：
<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>
內(nèi)部樣式表
將CSS放在頁(yè)面的<style>元素中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<style>
h1 { background: orange; }
</style>
</head>
<body>
<h1>Hello CSS!</h1>
</body>
</html>
內(nèi)聯(lián)樣式（不推薦）
某些情況下很有用：
<p style="background: orange; font-size: 24px;">CSS 很 6<p>
屬性樣式（廢棄）
<img src="a.png" width=100 height=200 >
二、@charset的作用
@charset是用來(lái)聲明CSS文件的編碼類型，如@charset "utf-8"，當(dāng)文件保存為utf-8編碼時(shí)，打開將正常顯示，否則會(huì)出現(xiàn)亂碼。
三、@import的作用
@import是用來(lái)在CSS文件中使用，來(lái)導(dǎo)入樣式表。
優(yōu)點(diǎn)是把多個(gè)樣式表導(dǎo)入到一個(gè)樣式表中，在頁(yè)面里面只需要導(dǎo)入一個(gè)樣式表即可。
缺點(diǎn)是：
- 兼容性的差異。由于@import是CSS2.1提議的因而老的閱讀器不支持，@import只有在IE5以上的才力辨認(rèn)，而link標(biāo)簽無(wú)此題目。
- 應(yīng)用dom控制樣式時(shí)的差異。當(dāng)應(yīng)用javascript控制dom去轉(zhuǎn)變樣式的時(shí)間，只能應(yīng)用link標(biāo)簽，由于@import不是dom可以控制的。
- 老祖宗的差異。link屬于XHTML標(biāo)簽，而@import完備是CSS提供的一種格式。
四、id選擇器和class選擇器的應(yīng)用場(chǎng)景
id選擇器
id選擇器用來(lái)為標(biāo)有特定id的html元素指定特定的樣式，html元素以id屬性來(lái)設(shè)置id選擇器，CSS中id選擇器以#來(lái)定義。
通常要保證id是唯一的(便于js中的getElementById的正常使用)，所以id選擇器一般在一個(gè)頁(yè)面中只能被單個(gè)的html元素引用。并且不能為一個(gè)html元素指定多個(gè)id選擇器。
class選擇器
用于描述一組元素的樣式，html元素通過(guò)class屬性來(lái)設(shè)置class選擇器，可以用于多個(gè)html元素，一個(gè)元素也可以有多個(gè)class選擇器。以.來(lái)定義。
class選擇器可以被多個(gè)html元素使用，因?yàn)樵氐腸lass屬性沒有必要保證唯一性。另外一個(gè)html元素也可以有多個(gè)class屬性值，值之間用,隔開。
五、CSS選擇器的種類
1. 元素選擇器 Element Seletors
p {
color: red;
}
div {
color: blue;
}
2. ID選擇器 ID Selectors
<p id="123">123</p>
#123{
color:red;
}
3. 類選擇器 Class Selectors
一個(gè) CSS 類可以應(yīng)用到多個(gè)不同的元素，一個(gè)元素也可以應(yīng)用多個(gè)不同的 CSS 類:
<ul>
<li class="first done">起床</li>
<li class="second done">刷牙</li>
<li class="third">洗臉</li>
</ul>
.first {
font-weight: bold;
}
.done {
text-decoration: line-through;
}
4. 通用選擇器 Universal Selector
* {
box-sizing: border-box;
}
.flex-container * {
flex-basis: 100%;
}
5. 屬性選擇器 Attribute Selectors
6. 偽類 Pseudo-classes
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
li:first-child { ... }
li:last-child { ... }
body :not(p) { ... }
p:not(.warning) { ... }
-
:link：選擇未被訪問(wèn)的鏈接 -
:visited：選擇已被訪問(wèn)的鏈接 -
:hover：選擇鼠標(biāo)懸浮在上方的元素 -
:active：選擇被激活的元素 -
:first-child：選擇元素的第一個(gè)子元素 -
:last-child：選擇元素的最后一個(gè)子元素 -
:not(p)：選擇不含p元素的元素 -
:not(.warning)：選擇不含warning類的元素
7. 偽元素 Pseudo-elements
-
::after：應(yīng)用于整塊文字的尾端 -
::before：應(yīng)用于整塊文字的開頭 -
::selection：應(yīng)用于文檔中被用戶高亮的部分（比如鼠標(biāo)選中的部分）。 -
::backdrop：實(shí)驗(yàn)特性 -
::first-letter：選中一整塊文字第一行的第一個(gè)字母，當(dāng)文字所處的行之前沒有其他內(nèi)容（如圖片和內(nèi)聯(lián)的表格）。 -
::first-line：將樣式只應(yīng)用于一個(gè)塊狀元素的首行。 -
::-webkit-input-placeholder：應(yīng)用于input元素的placeholder
8. 組合選擇器 Combinators
-
A,B：選中匹配 A 或/和 B 的元素 -
A B：選中匹配 B 且為匹配 A 的元素的后代元素。 -
A>B：選中匹配 B 且為匹配 A 的元素的直接子元素。 -
A+B：選中匹配 B 且為匹配 A 的元素的下一相鄰元素。 -
A~B：選中匹配 B 且為匹配 A 的元素的下 N 個(gè)相鄰元素。
9.多個(gè)選擇器 Multiple Selectors
練習(xí)：選擇器含義
- #header{}：選擇ID為header的元素
- .header{}：選擇匹配header的元素
- .header .logo{}：選擇匹配header的元素中，匹配logo的后代元素
- .header.mobile{}：選擇匹配header與mobile的元素
- .header p, .header h3{}：選擇匹配header，類型為p或h3的元素
- #header a:hover{}：選擇id為header元素的后代中，類型為a，狀態(tài)為hover的元素
- #header .logo~p{}：匹配id為header元素后代中，匹配logo的下N個(gè)類型為p的相鄰元素
- #header .logo+p{}：匹配id為header元素后代中，匹配logo的下一個(gè)類型為p且相鄰的元素
- #header .logo p{}：匹配id為header的元素后代-->匹配logo的元素后代-->類型為p的元素
- #header .logo>p{}：匹配id為header的元素后代-->匹配logo的元素后代-->類型為p的直接子元素
- #header p.logo{}：選擇匹配id為header的元素后代中，類型為p且匹配logo的元素
- #header .logo.p{}：選擇匹配id為header的元素后代中，匹配logo與p的元素
- #header input[checked]{}：選擇匹配id為header的元素后代中，類型為input且狀態(tài)為checked的元素
六、選擇器優(yōu)先級(jí)的計(jì)算
優(yōu)先級(jí)分類
CSS的優(yōu)先級(jí)通常由高到低分為6級(jí)：
- 第一優(yōu)先級(jí)：無(wú)條件優(yōu)先的屬性只需要在屬性后面使用
！important。它會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。 - 第二優(yōu)先級(jí)：在html中給元素標(biāo)簽加
style，即內(nèi)聯(lián)樣式。該方法會(huì)造成css難以管理，所以不推薦使用。 - 第三優(yōu)先級(jí)：由一個(gè)或多個(gè)id選擇器來(lái)定義。例如
#id{margin:0;}會(huì)覆蓋.classname{margin:3pxl}。 - 第四優(yōu)先級(jí)：由一個(gè)或多個(gè)類選擇器、屬性選擇器、偽類選擇器定義如
.classname{margin:3px}會(huì)覆蓋div{margin:6px;}。 - 第五優(yōu)先級(jí)：由一個(gè)或多個(gè)類型選擇器定義。如
div{marigin:6px;}覆蓋*{margin:10px；}。 - 第六優(yōu)先級(jí)：通配選擇器，如
*{marigin:6px;}。
優(yōu)先規(guī)則
在css中，會(huì)根據(jù)選擇器的特殊性來(lái)決定所定義的樣式規(guī)則的次序，具有更特殊選擇器的規(guī)則優(yōu)先于一般選擇器的規(guī)則。如果兩個(gè)規(guī)則的特殊性相同，那么后定義的規(guī)則優(yōu)先。
我們可以把各類選擇器按如下定義分為四個(gè)等級(jí)，每個(gè)等級(jí)分配比重不同的權(quán)值，計(jì)算優(yōu)先級(jí)時(shí)將每級(jí)的權(quán)值相加，得到選擇器的權(quán)值。
- 第一級(jí)：內(nèi)聯(lián)樣式，權(quán)值為1000，如
style="" - 第二級(jí)：id選擇器，權(quán)值為100，如
#header - 第三級(jí)：類，偽類和屬性選擇器，權(quán)值為10，如
.header - 第四級(jí)：標(biāo)簽選擇器和偽元素選擇器，權(quán)值為1，如
div p
注意：通用選擇器*，子選擇器>，和相鄰?fù)x擇+的權(quán)值為0。
