css引入方式
- 內(nèi)聯(lián)方式, 內(nèi)聯(lián)方式指的是直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS平绩。
<div style="background: red"></div>
- 嵌入方式, 嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書(shū)寫(xiě) CSS 代碼啡浊。
<head>
<style>
.content {
background: red;
}
</style>
</head>
... <div class="content">...</div>
- 鏈接方式, 鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件督怜。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
- 導(dǎo)入方式,導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。
<style>
@import url(style.css);
</style>
鏈接方式（下面用 link 代替）和導(dǎo)入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式衩茸，下面我們來(lái)比較這兩種方式，并且說(shuō)明為什么不推薦使用 @import淮菠。
link 屬于 HTML爹耗，通過(guò) <link> 標(biāo)簽中的 href 屬性來(lái)引入外部文件，而 @import 屬于 CSS艾岂，所以導(dǎo)入語(yǔ)句應(yīng)寫(xiě)在 CSS 中顺少，要注意的是導(dǎo)入語(yǔ)句應(yīng)寫(xiě)在樣式表的開(kāi)頭，否則無(wú)法正確導(dǎo)入外部文件王浴；
@import 是 CSS2.1 才出現(xiàn)的概念脆炎，所以如果瀏覽器版本較低，無(wú)法正確導(dǎo)入外部樣式文件氓辣；
當(dāng) HTML 文件被加載時(shí)秒裕，link 引用的文件會(huì)同時(shí)被加載，而 @import 引用的文件則會(huì)等頁(yè)面全部下載完畢再被加載钞啸；
CSS 優(yōu)先級(jí)
最近祖先樣式優(yōu)先級(jí)比其他祖先樣式優(yōu)先級(jí)高
直接樣式比祖先及優(yōu)先級(jí)高
選擇器優(yōu)先級(jí)
內(nèi)聯(lián)樣式 > ID選擇器 > 類(lèi)選擇器 = 屬性選擇器 = 偽類(lèi)選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器計(jì)算選擇符中 ID 選擇器的個(gè)數(shù)（a）几蜻，計(jì)算選擇符中類(lèi)選擇器、屬性選擇器以及偽類(lèi)選擇器的個(gè)數(shù)之和（b）体斩，計(jì)算選擇符中標(biāo)簽選擇器和偽元素選擇器的個(gè)數(shù)之和（c）梭稚。按 a、b硕勿、c 的順序依次比較大小哨毁，大的則優(yōu)先級(jí)高，相等則比較下一個(gè)源武。若最后兩個(gè)的選擇符中 a扼褪、b想幻、c 都相等，則按照"就近原則"來(lái)判斷话浇。
如果外部樣式表和內(nèi)部樣式表中的樣式發(fā)生沖突會(huì)出現(xiàn)什么情況呢脏毯？這與樣式表在 HTML 文件中所處的位置有關(guān)。樣式被應(yīng)用的位置越在下面則優(yōu)先級(jí)越高幔崖，其實(shí)這仍然可以用規(guī)則 4 來(lái)解釋食店。如果樣式引用沖突，與引用的位置無(wú)關(guān)赏寇，而與樣式書(shū)寫(xiě)順序有關(guān)吉嫩，最后的書(shū)寫(xiě)的優(yōu)先級(jí)高屬性后插有 !important 的屬性擁有最高優(yōu)先級(jí)。若同時(shí)插有 !important嗅定，則再利用規(guī)則 3自娩、4 判斷優(yōu)先級(jí)。
注意:選擇器的權(quán)值不能進(jìn)位渠退，如規(guī)則4中忙迁，a比較完后，如果不相等將不比較b碎乃，不是abc求和比較
.blue {
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <link rel="stylesheet" href="style/sty.css"> -->
<style>
@import url("style/sty.css");
.red {
color: red;
}
</style>
<link rel="stylesheet" href="style/sty.css">
</head>
<body>
<div class="blue red">什么顏色</div>
<div class="red blue">什么顏色</div>
</body>
</html>
本片的所有內(nèi)容大部分來(lái)自You-Dont-Need-Javascript 姊扔，建議直接看這個(gè)
