CSS實(shí)際上如何工作？
當(dāng)瀏覽器顯示文檔時(shí)，它必須將文檔的內(nèi)容與其樣式信息結(jié)合。它分兩個(gè)階段處理文檔：
- 瀏覽器將HTML和CSS轉(zhuǎn)化成DOM（文檔對(duì)象模型）。DOM在計(jì)算機(jī)內(nèi)存中表
示文檔。它把文檔內(nèi)容和其樣式結(jié)合在一起。瀏覽器顯示 DOM 的內(nèi)容。
CSS工作原理圖
CSS 加載方式有幾種
外部樣式表（推薦）
- 通過(guò) <link> 引入 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>
p { background: red; }
</style>
</head>
<body>
<p>Hello CSS!</p>
</body>
</html>
內(nèi)聯(lián)樣式
不推薦，但在某些情況下很有用。
<p style="background: orange; font-size: 24px;">CSS 很 ??<p>
@charset有什么作用
@charset "utf-8";
@charset CSS @規(guī)則, 指定樣式表中使用的字符編碼。它必須是樣式表中的第一個(gè)元素，而且前面不得有任何字符。
如果有多個(gè)@charset @規(guī)則被聲明，只有第一個(gè)會(huì)被使用，而且不能在HTML元素或HTML頁(yè)面的字符集相關(guān)<style>元素內(nèi)的樣式屬性內(nèi)使用。
此 @規(guī)則 在某些 CSS 屬性中使用非 ASCII 字符時(shí)非常有用，例如 content
。
再比如CSS注釋中，如果使用了中文，不加以指定字符編碼，若和編碼不一致，則可能在瀏覽器中顯示亂碼：
@charset "UTF-8";
@import "style2.css";
h1 {
color: blue;
}
/*****
我是注釋
*****/
@import有什么作用？如何使用？
@import 'style.css';
@importCSS @規(guī)則 , 用于從其他樣式表導(dǎo)入樣式規(guī)則，告訴 CSS 引擎引入一個(gè)外部樣式表。這些規(guī)則必須先于所有其他類型的規(guī)則，@charset規(guī)則除外; 因?yàn)樗皇且粋€(gè)嵌套語(yǔ)句。
@import 可以在HTML元素或者<style>元素內(nèi)的樣式屬性內(nèi)使用。
參考MDN文檔：@import
id 選擇器和 class 選擇器的使用場(chǎng)景分別是什么？
id 就像是一個(gè)公民的身份證號(hào)，代表大的分類，盡量不要濫用id選擇器，
class代表標(biāo)簽，一個(gè)人可以有很多個(gè)標(biāo)簽，大學(xué)生，男生，單身狗，高富帥。
一個(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;
}
CSS選擇器常見(jiàn)的有哪幾種?
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
a:link代表一個(gè)未訪問(wèn)過(guò)的鏈接；
a:hover代表處于鼠標(biāo)指向狀態(tài)下的鏈接；
a:active，代表鼠標(biāo)點(diǎn)擊下去未松手；
a:visited，代表訪問(wèn)過(guò)的鏈接，一般用不同的顏色表示，未訪問(wèn)，和已訪問(wèn)。
所以正常的邏輯順序，是 LVHA，可以愛(ài)恨原則，記憶~~L(O)V(E)/HA(TE）
原因：
在CSS中，如果對(duì)于相同元素有針對(duì)不同條件的定義，宜將最一般的條件放在最上面，并依次向下，保證最下面的是最特殊的條件。如果按照標(biāo)題上的順序，把visited放在了hover的后面，那么當(dāng)鼠標(biāo)移動(dòng)到訪問(wèn)過(guò)的鏈接上面時(shí)，便沒(méi)有了hover 的效果，顯然我們是希望無(wú)論是否訪問(wèn)過(guò)，都應(yīng)該有hover效果的。
解釋下列選擇器含義
.item+p {color: red}
選中匹配class屬性中包含item的元素的下一相鄰p元素，將顏色設(shè)為紅色
.item~p {color: yellow}
選中匹配class屬性中包含item的元素的下N個(gè)相鄰p元素，將顏色設(shè)為黃色
.item p {color: blue}
之間有空格表示，選中匹配class屬性中包含item的元素的后代p元素，將顏色設(shè)為紅色
p.item {color: blue}
之間沒(méi)有空格表示，選中同時(shí)匹配p元素和class屬性中包含item的元素，將顏色設(shè)為藍(lán)色
.item>p{color: blue}
選中class屬性中包含item的元素的直接子元素p元素，將顏色設(shè)為藍(lán)色
em、rem分別是什么？
px、em、rem 都是CSS中的單位：
- px像素（Pixel）相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的；
- em相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸；
- rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），rem 和em 不同在于，相對(duì)于HTML根元素。
參考：徹底弄懂css中單位px和em,rem的區(qū)別——博客園leejersey
顏色有幾種寫(xiě)法？
- 使用一個(gè)關(guān)鍵字，如blue;
- 使用RGB ,如 #808080; 或rbg（255,0，51）
- 使用HSL 圓柱坐標(biāo)，如 hsl(30, 100%,50%)；
- 其他還有rgba()以及hsla()，這是在rgb和hsl基礎(chǔ)上增加了阿爾法通道，即顏色的透明度。
