css全稱為“層疊樣式表”，它主要用于定義HTML內(nèi)容在瀏覽器內(nèi)顯示樣式，如文字大小、顏色、字體加粗等。
css有四種引入方式：
-
行內(nèi)式----把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽內(nèi)，如：
<p style="color:red">紅色</p> -
內(nèi)嵌式----把css樣式代碼寫在
<style type="text/css"></style>標(biāo)簽之間,如：
<style type="text/css">
p {
color:red;
}
</style>
-
外聯(lián)式----把css代碼寫在一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)，如：
<link rel="stylesheet" type="text/css" href="index.css"/> -
@import----也屬于外聯(lián)式，一般不使用，須寫在
<style type="text/css"></style>標(biāo)簽之間，也可寫在link引入的css文件內(nèi)，有兩種寫法，如：
<style>
1. @import url("index.css");
2. @import "index.css";
</style>
link和@import的區(qū)別：
1.link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
2.link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。
3.link是XHTML標(biāo)簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
4.link支持使用Javascript控制DOM去改變樣式；而@import不支持。
5.@import可以在CSS中再次引入其他樣式表。
每一條css樣式聲明由兩部分組成，形式如下：
選擇器{
樣式;
}
常用的選擇器如下：
- 基礎(chǔ)選擇器
| 選擇器 | 含義 | 示例 |
|---|---|---|
| * | 通用元素選擇器，匹配任何元素 | * { margin:0; padding:0; } |
| Element | 標(biāo)簽選擇器，匹配所有使用E標(biāo)簽的元素 | p { font-size:2px; } |
| .wrap | 類選擇器，匹配所有class屬性中包含wrap的元素 | .wrap { color:red;} |
| #main | id選擇器，匹配所有id屬性等于footer的元素 | #main{ color:red;} |
- 組合選擇器
| 選擇器 | 含義 | 示例 |
|---|---|---|
| E,F | 多元素選擇器，用,分隔，同時匹配元素E或元素F | h1,p { color:#f00;} |
| E F | 后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F | #nav li { display:inline; } |
| E>F | 子元素選擇器，用>分隔，匹配E元素的所有直接子元素 | div > p{ color:#f00; } |
| E+F | 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F | p + p { color:#f00; } |
- 屬性選擇器
| 選擇器 | 含義 | 示例 |
|---|---|---|
| E[att] | 匹配所有具有att屬性的E元素，不考慮它的值。 | p[title] { color:#f00; } |
| E[att=val] | 匹配所有att屬性等于“val”的E元素 | div[class=”error”] { color:#f00; } |
| E[att~=val] | 匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素 | td[class~=”name”] { color:#f00; } |
- 偽類選擇器
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配元素E的第一個子元素 |
| E:last-child | 匹配父元素的最后一個子元素 |
| E:link | 匹配所有未被點擊的鏈接 |
| E:visited | 匹配所有已被點擊的鏈接 |
| E:active | 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素 |
| E:hover | 匹配鼠標(biāo)懸停其上的E元素 |
| E:focus | 匹配獲得當(dāng)前焦點的E元素 |
| E:disabled | 匹配表單中禁用的元素 |
| E:nth-child(n) | 匹配其父元素的第n個子元素，第一個編號為1 |
- 偽元素選擇器
| 選擇器 | 含義 |
|---|---|
| E::first-line | 匹配E元素內(nèi)容的第一行 |
| E::first-letter | 匹配E元素內(nèi)容的第一個字母 |
| E::before | 在E元素之前插入生成的內(nèi)容 |
| E::after | 在E元素之后插入生成的內(nèi)容 |
a標(biāo)簽有四個偽類選擇器，a:link, a:hover, a:active, a:visited，他們的順序是怎樣的呢？
a:link > a:visited > a:hover > a:active
原因是：
瀏覽器解析會遵循一個原則：當(dāng)選擇器的優(yōu)先級相等時，寫在后面的會覆蓋前面的。
a:link, a:hover, a:active, a:visited這四個選擇器的優(yōu)先級都一樣，當(dāng)a標(biāo)簽指向的鏈接沒有訪問過時，默認觸發(fā)link狀態(tài)，所以會用到a:link指定的樣式，當(dāng)a標(biāo)簽指向的鏈接被訪問過時，它同時處于a:link和a:visited狀態(tài)，而a:link和a:visited的優(yōu)先級相同，后面的會覆蓋前面的，所以用哪個樣式由它們的順序決定，將a:visited寫在a:link后，讓訪問過的鏈接使用a:visited指定的樣式，同理，當(dāng)用戶的鼠標(biāo)懸停在a標(biāo)簽指向的鏈接上時，它同時處于link，visited， hover狀態(tài)，將a:hover寫在 a:link和a:visited之后，讓這個鏈接使用 a:hover指定的樣式，當(dāng)用戶鼠標(biāo)點擊a標(biāo)簽指向的鏈接時(鼠標(biāo)按住沒有松開的狀態(tài))，這個時候鏈接同時處于link, visited，hover，active四種狀態(tài)，要讓鏈接用到a:active指定的樣式，就要將a:active寫在最后。
選擇器的優(yōu)先級怎么計算呢？
CSS優(yōu)先級從高到低依次是：
- 在屬性后面使用
！important會覆蓋頁面內(nèi)任何位置定義的元素樣式 - 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配選擇器
- 瀏覽器自定義
