CSS加載方式有幾種？
- 外部樣式表(推薦)
- 通過
<link>引入外部css<link rel="stylesheet" href="index.css"> - 通過@import引入樣式，放入CSS中（后面一定要加分號）
@import url("index.css");
- 內(nèi)部樣式表
- 將CSS放在頁面的style元素內(nèi)
<style>p{color: red; }</style> - 內(nèi)聯(lián)樣式（不推薦，但有時候很有用）
<p style="backgroundcolor:orange; font-size: 24px;">Css</p> - 屬性樣式（已被廢棄）
<img src="a.png" width=100 height=200>
@charset有什么作用？
- 指定樣式表中使用的字符編碼。它必須是樣式表中的第一個元素，而前面不得有任何字符。因為它不是一個嵌套語句，所以不能在@規(guī)則條件組中使用。如果有多個 @charset @規(guī)則被聲明，只有第一個會被使用，而且不能在HTML元素或HTML頁面的字符集相關(guān) <style> 元素內(nèi)的樣式屬性內(nèi)使用。
- 此 @規(guī)則 在某些 CSS 屬性中使用非 ASCII 字符時非常有用，例如 content。
- 在樣式表中有多種方法去聲明字符編碼，瀏覽器會按照以下順序嘗試下邊的方法（一旦找到就停止并得出結(jié)果）：
- 文件的開頭的 Unicode byte-order 字符值。
- 由Content-Type：HTTP header 中的 charset 屬性給出的值或用于提供樣式表的協(xié)議中的等效值。
- CSS @規(guī)則 @charset。
- 使用參考文檔定義的字符編碼： <link> 元素的 charset 屬性。 該方法在 HTML5 標(biāo)準(zhǔn)中已廢除，無法使用。
- 假設(shè)文檔是 UTF-8。
@import有什么作用？如何使用？
作用
- 用來引入外部樣式放入css中，告訴 CSS 引擎引入一個外部樣式表。這些規(guī)則必須先于所有其他類型的規(guī)則，@charset規(guī)則除外; 因為它不是一個嵌套語句。 用法
@import 'style.css';
用法
- 既可以放入CSS中，用于引入外部樣式
- 也可以放入html的style標(biāo)簽內(nèi)
id 選擇器和 class 選擇器的使用場景分別是什么？
- 在CSS文件里書寫時，ID加前綴
"#"；CLASS用"." - id一個頁面只可以使用一次；class可以多次引用。
- ID是一個標(biāo)簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，就象名字，如果一個屋子有2個人同名，就會出現(xiàn)混淆；class是一個樣式，可以套在任何結(jié)構(gòu)和內(nèi)容上，就象一件衣服；
- 從概念上說就是不一樣的：id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；class是先定義好一種樣式，再套給多個結(jié)構(gòu)/內(nèi)容。
總結(jié)如下
- id選擇器，用于匹配特定id的元素，具有獨一無二不可代替性
- class選擇器，用于匹配class包含（不是等于）特定類的元素，描述一組元素的樣式，你可以多次使用class賦值，來命名元素名
CSS選擇器常見的有幾種？
- 基礎(chǔ)選擇器
四類（*匹配所有元素，#id匹配id，.class匹配相關(guān)屬性，element匹配元素） - 屬性選擇器
- 組合選擇器
七類
-
E,F同時匹配E或F。 -
E F匹配E元素所有的后代元素F。 -
E>F匹配E元素的子代F。 -
E+F匹配E之后的相鄰?fù)塅。 -
E~F匹配E之后的同級F。 -
.class1.class2匹配同時具有class1和clss2屬性的元素。 -
element#id匹配element元素id的元素）**
- 偽類選擇器
- 偽元素選擇器
偽類選擇器有哪些？偽元素有哪些？
偽類選擇器定義：代表一個元素的另一種狀態(tài)
-
E: first-child匹配元素E的第一個子元素 -
E：link匹配所有未被點擊的鏈接 -
E: visited匹配所有已被點擊的鏈接 -
E：active匹配鼠標(biāo)已經(jīng)其上按下，還沒被釋放的E元素 -
E：hover匹配鼠標(biāo)懸停器上的E元素 -
E：focus匹配獲得當(dāng)前焦點的E元素 -
E：lang(c)匹配lang屬性等于c的E元素 -
E：enabled匹配表單中可用的元素 -
E：disabled匹配表單中禁用的元素 -
checke匹配表單中被選中的radio或checkbox元素 -
election匹配用戶當(dāng)前選中的元素
偽元素選擇器 -
E::first-line匹配E元素內(nèi)容的第一行 -
E::first-letter匹配E元素內(nèi)容的第一個字母 -
E::before在E元素之前插入生成的內(nèi)容 -
E::after在E元素之后插入生成的內(nèi)容
以下選擇器分別是什么意思?
-
#header{}匹配id為header的所有元素 -
.header{}匹配class為header的所有元素 -
.header .logo{}匹配class為header的元素后代class為logo的所有元素 -
.header.mobile{}匹配同時具有header和mobile class的所有元素 -
.header p, .header h3{}匹配class為header后代里面的所有p元素和所有h3元素 -
#header a:hover{}在id為header元素下匹配a元素鼠標(biāo)懸停屬性 -
#header .logo~p{}在id為header元素下匹配與class為logo的元素處于后面同級的p元素 -
#header .logo+p{}在id為header元素下匹配與class為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元素這類既又關(guān)系（并列）的元素的特性 -
#header .logo.p{}在id為header元素下同時匹配class為logo和p的元素 -
#header input[checked]{}在id為header元素下匹配checked值的input的元素
選擇器的優(yōu)先級是如何計算的？
- 優(yōu)先級從高到低分別是：
- 在屬性后面使用
!important會覆蓋頁面內(nèi)任何位置定義的元素樣式 - 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- Id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
復(fù)雜場景情況下
- 行內(nèi)樣式 <div style="xxx"></div>
==> a - ID 選擇器
==> b - 類，屬性選擇器和偽類選擇器
==> c - 標(biāo)簽選擇器、偽元素
==> d
abcd優(yōu)先級依次降低 - 舉幾個例子
-
a{color: yellow;}特殊性值：0,0,0,1/ -
·div a{color: green;}特殊性值：0,0,0,2/ -
.demo a{color: black;}特殊性值：0,0,1,1/ -
.demo input[type="text"]{color: blue;}特殊性值：0,0,2,1/ -
.demo *[type="text"]{color: grey;}特殊性值：0,0,2,0/ -
#demo a{color: orange;}特殊性值：0,1,0,1/ -
div#demo a{color: red;}特殊性值：0,1,0,2*/
運行如下代碼，并對結(jié)果做出解釋
<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.png
-
.box:first-child {color: red;}選擇class為box的父元素下第一個子元素,顯示顏色為紅色 -
.box:first-of-type {background: blue;}選擇class為box的父元素下的標(biāo)簽子元素,并且這個元素是這個同級中的第一個標(biāo)簽，顯示背景色為藍(lán)色 -
.box :first-child { font-weight: bold;}選擇屬性為box的父元素下后代中的同級第一個元素，層層選擇，使其字體加粗。 -
.box :first-of-type { font-size: 30px;}選擇屬性為box的父元素下后代中的同類別第一個元素，層層選擇，使其字體大小為30px，
出現(xiàn)下圖報錯可能的原因是：
1.jpg
- 文件不存在
- 文件路徑寫錯啦
