CSS 加載方式有幾種在辆？
外部樣式表(推薦)
-
link
將CSS 保存在一個(gè)獨(dú)立的擴(kuò)展名為 .css 的文件中播聪，并從HTML的 <link> 元素中引用它投剥。
示例：<link rel="stylesheet" href="style.css"> -
@import
用于從其他樣式表導(dǎo)入樣式規(guī)則榴鼎。
示例：@import 'index.css';
這種方法可以說(shuō)是最好的，因?yàn)槟憧梢允褂靡粋€(gè)樣式表來(lái)設(shè)置多個(gè)文檔的樣式炼绘，并且需要更新 CSS 的時(shí)候只要在一個(gè)地方更新。
內(nèi)部樣式表
內(nèi)部樣式表是指不使用外部 CSS 文件妄田，而是將你的 CSS 放置在<style>元素中俺亮，該元素包含在 HTML head 內(nèi)驮捍。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
這在某些情況下很有用（也許你正在使用一個(gè)內(nèi)容管理系統(tǒng)，不能直接修改 CSS 文件）脚曾，但它不如外部樣式表高效 —— 在網(wǎng)站中东且，CSS 將需要在每個(gè)頁(yè)面重復(fù)，并且需要更新時(shí)要更改的多個(gè)位置本讥。
內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式是僅影響一個(gè)元素的CSS聲明珊泳，被 style屬性包括著。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
在非必要拷沸，否則不要這么做色查！這很難維護(hù)（你可能不得不在每份文檔里更新多次同樣的信息），并且它還混合了 CSS 表示的樣式信息和 HTML 的結(jié)構(gòu)信息撞芍，使 CSS 難以閱讀和理解秧了。保持不同類(lèi)型代碼的分離和純凈使處理該代碼的任何人工作更為容易。
您唯一可能需要使用內(nèi)聯(lián)樣式是當(dāng)您的工作環(huán)境真的非常受限（也許您的CMS只允許您編輯 HTML 的 body）序无。
@charset有什么作用验毡？
指定樣式表中使用的字符編碼。它必須是樣式表中的第一個(gè)元素愉镰，而前面不得有任何字符米罚。示例 @charset "utf-8";若文件編碼和頁(yè)面不一致的話(huà)，則會(huì)出現(xiàn)亂碼丈探。
@import有什么作用录择？如何使用？
用于從其他樣式表導(dǎo)入樣式規(guī)則碗降。語(yǔ)法：
@import url;
@import url list-of-media-queries;
其中:
url
是一個(gè)表示要引入資源位置的 <string>或者<uri>隘竭。 這個(gè)URL可以是絕對(duì)路徑或者相對(duì)路徑。 要注意的是這個(gè) URL 不需要指明一個(gè)文件讼渊； 可以只指明包名动看，然后合適的文件會(huì)被自動(dòng)選擇
list-of-media-queries
是一個(gè)逗號(hào)分隔的 媒體查詢(xún)條件列表，決定通過(guò)URL引入的 CSS 規(guī)則 在什么條件下應(yīng)用爪幻。如果瀏覽器不支持列表中的任何一條媒體查詢(xún)條件菱皆，就不會(huì)引入U(xiǎn)RL指明的CSS文件。
id 選擇器和 class 選擇器的使用場(chǎng)景分別是什么挨稿？
兩者異同：
兩者都可以選擇到DOM節(jié)點(diǎn)并添加樣式仇轻。不同在于元素的ID屬性具有唯一性，一個(gè)元素只能添加一個(gè)id選擇器奶甘，而一個(gè)元素可以有多個(gè)class篷店。ID選擇器的優(yōu)先級(jí)是高于class選擇器的。
使用技巧：
在編寫(xiě)樣式時(shí)盡量使用類(lèi)選擇器臭家，即使該DOM節(jié)點(diǎn)可能只出現(xiàn)一次疲陕。因?yàn)镮D選擇器的優(yōu)先級(jí)比類(lèi)選擇器高,在后期樣式的控制中會(huì)越來(lái)越難控制方淤。也許有人會(huì)問(wèn)：我可不可以全篇都使用ID選擇器，那么就不存在和類(lèi)選擇器比較優(yōu)先級(jí)了蹄殃。理論上這是可以的携茂，但是請(qǐng)注意上一點(diǎn)——ID必須能夠唯一的確定DOM節(jié)點(diǎn)。如果你全篇都使用ID選擇器窃爷，那么即使兩個(gè)DOM節(jié)點(diǎn)樣式完全相同邑蒋，那么你也必須把節(jié)點(diǎn)樣式寫(xiě)兩遍, 如果后期要進(jìn)行維護(hù),那么你必須對(duì)兩處的代碼都進(jìn)行維護(hù)！０蠢濉医吊！極大的增加了維護(hù)的成本。
既然有了類(lèi)選擇器為什么還要規(guī)定一個(gè)ID選擇器逮京？
在一個(gè)完整的HTML+CSS+JavaScript的頁(yè)面體系中卿堂，對(duì)一個(gè)DOM節(jié)點(diǎn)的ID使用最多的其實(shí)是JavaScript(因?yàn)橥ㄟ^(guò)ID能唯一的確定DOM節(jié)點(diǎn)，方便控制),CSS中的使用的ID選擇器一般情況下只會(huì)添加少量樣式懒棉，更多對(duì)DOM節(jié)點(diǎn)的樣式控制都是使用類(lèi)選擇器,既能夠產(chǎn)生樣式疊加,又方便后期的維護(hù)草描。請(qǐng)盡量避免在CSS中使用大量的ID選擇器
常規(guī)情況下，CSS中會(huì)出現(xiàn)大量的ID選擇器的情況——JavaScript插件配套的樣式表中策严。
CSS選擇器常見(jiàn)的有幾種穗慕？
http://www.reibang.com/p/67c6ba93787f
偽類(lèi)選擇器有哪些？偽元素有哪些妻导？
CSS偽類(lèi)是用來(lái)添加一些選擇器的特殊效果。
http://www.reibang.com/p/67c6ba93787f
以下選擇器分別是什么意思?
#header{
}/*匹配id為header的元素*/
.header{
}/*匹配header類(lèi)的元素*/
.header .logo{
}/*匹配header類(lèi)下所有的后代（不只是子元素倔韭、子元素向下遞歸）logo類(lèi)元素*/
.header.mobile{
}/*匹配同時(shí)為header類(lèi)和mobile類(lèi)的元素*/
.header p, .header h3{
}/*匹配header類(lèi)下p標(biāo)簽和h3標(biāo)簽*/
#header a:hover{
}/*匹配鼠標(biāo)懸停其上的id為header的元素下的a元素*/
#header .logo~p{
}/*匹配id為header下的logo類(lèi)的所有相鄰的標(biāo)簽p*/
#header .logo+p{
}/*匹配id為header下的logo類(lèi)的直接相鄰的標(biāo)簽p*/
#header .logo p{
}/*匹配id為header下的logo類(lèi)的所有子標(biāo)簽p*/
#header .logo>p{
}/*匹配id為header下的logo類(lèi)的直接子標(biāo)簽p*/
#header p.logo{
}/*匹配id為header下同時(shí)為logo類(lèi)和標(biāo)簽p的元素*/
#header .logo.p{
}/*匹配id為header下同時(shí)為logo類(lèi)和p類(lèi)的元素*/
#header input[checked]{
}/*匹配id為header下input標(biāo)簽中attr為checked的元素*/
選擇器的優(yōu)先級(jí)是如何計(jì)算的？
優(yōu)先級(jí)從高到低：
在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
id選擇器
類(lèi)選擇器
偽類(lèi)選擇器
屬性選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義
計(jì)算方法：
- 獲取選擇器中ID選擇器的個(gè)數(shù)胰苏，賦值給a
- 獲取選擇器中類(lèi)選擇器，屬性選擇器([type="text"])和偽類(lèi)選擇器(:hover)的個(gè)數(shù)醇疼，賦值給b
- 獲取選擇器中標(biāo)簽(type)選擇器和偽元素選擇器(::before)的個(gè)數(shù)硕并，賦值給c
- 通用選擇器(*)不占優(yōu)先級(jí)權(quán)重
將abc三個(gè)數(shù)串聯(lián)成一個(gè)基數(shù)絕對(duì)大的數(shù)字(既無(wú)論數(shù)字再大也不進(jìn)位)。
Examples:
* /* a=0 b=0 c=0 -> specificity = 0 */
LI /* a=0 b=0 c=1 -> specificity = 1 */
UL LI /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
如果兩個(gè)specificity值一樣呢鲤孵？那自然是看樣式表中出現(xiàn)的先后順序辰如，后者可以覆蓋前者的樣式。
注：寫(xiě)于HTML中行內(nèi)的樣式(style="width:100px")總會(huì)覆蓋外部樣式表的樣式贵试，具有絕對(duì)的優(yōu)先級(jí)琉兜。
參考： https://www.w3.org/TR/css3-selectors/#specificity
