css是層疊樣式表，它是網(wǎng)頁之皮
本文主要內(nèi)容：
1. css語法格式（怎么寫？）
2. css引入方式（怎么用？）
3. css文件地址（想用到哪找？）
4. css選擇器分類（一共有幾種？）
5. css選擇器優(yōu)先級(jí)（用上了，誰優(yōu)先？）
寫法：
選擇器:{屬性:屬性值; 屬性:屬性值;}
ps：（【屬性:屬性值;】這個(gè)組合叫做css的聲明）
@xx.css;
a:hover
CSS使用的第一步：引入方式
css的引入方式有三種：
- 內(nèi)聯(lián)樣式
寫在html標(biāo)簽內(nèi)，很不常用，難閱讀難維護(hù)。
<h1 style='color:red;'></h1> - 內(nèi)部樣式
寫在style標(biāo)簽里，不便于維護(hù)，盡量不要用。
<head>
<style type='text/css'>
h1 {color:red;}
</style>
</head>
- 外部樣式
把樣式先寫在一個(gè)css文件內(nèi)，再把這個(gè)css文件引入到頁面內(nèi)，容易維護(hù)，結(jié)構(gòu)樣式分離。
<link rel='stylesheet' type='text/css' href='xxx.css'>寫在head里
@import url('xxx.css'); @import 'xxx.css';寫在style里
ps：外部樣式有l(wèi)ink和@兩種方式,link本質(zhì)是html的一個(gè)標(biāo)簽，它可以出現(xiàn)在html的任何地方；@其實(shí)使用的css語法，需要寫在style標(biāo)簽里或者css文件里。
可以在link引入的css文件內(nèi)使用@import哦～
CSS使用的第二步：確定css文件地址
如果我們已經(jīng)確定使用link的方式引入css文件，那么我寫好了css文件，如何才能找到它呢？
尋找文件的路徑分為三種，相對(duì)路徑，絕對(duì)路徑，網(wǎng)站路徑。
- 相對(duì)路徑
相對(duì)路徑是以目前文件未基準(zhǔn)，一步步指向目標(biāo)文件，
css/xx.css
../image/123.png
- 絕對(duì)路徑
絕對(duì)路徑是本地文件的全部地址，或者說是文件在計(jì)算機(jī)內(nèi)的真實(shí)地址。長(zhǎng)度比較長(zhǎng)。 - 網(wǎng)站路徑
上傳以后，盡量使用相對(duì)路徑；也可以直接用文件的絕對(duì)網(wǎng)絡(luò)地址。
CSS使用的第三步：了解css選擇器（選擇器有幾種？）
css的語法是 選擇器{屬性：屬性值;}
那么css的選擇器都有哪些呢？
· 基礎(chǔ)選擇器
· 組合選擇器
· 屬性選擇器
· 偽類選擇器
· 偽元素選擇器
- 基礎(chǔ)選擇器
最常見的選擇器，由下面幾種組成：
- 通配符選擇器（*）選擇頁面所有元素。
- id選擇器（#id）選擇特定的id元素(唯一性)
- 類選擇器（.class）選擇特定的class元素（某一類）
- 標(biāo)簽選擇器（element）按標(biāo)簽名選擇頁面內(nèi)所有該標(biāo)簽
- 組合選擇器
首先假設(shè)E和F是兩個(gè)基礎(chǔ)選擇器
- E,F 多元素選擇，用
,分隔，同時(shí)選擇了E和F。 - E F 后代選擇器，用空格分隔，選擇了E的所有后代里的F元素。
- E>F 子元素選擇器，用>分隔，選擇了E的直接子元素里的F元素。
- E+F 兄弟相鄰選擇器，用+分隔，選擇了和E相鄰的、同級(jí)的F元素。
- E~F 普通相鄰選擇器，用~分隔，選擇了和E同級(jí)的、不一定相鄰的F元素。
- .class1.class2 過濾選擇器，id或者class 沒有分隔，選擇了同時(shí)擁有這兩者的元素。
- 屬性選擇器
不常用，假設(shè)E是一個(gè)基礎(chǔ)選擇器
- E[attr] 選擇所有具有attr的E元素，例：
div[id]會(huì)選擇所有擁有ID屬性的div。 - E[value=xxx] 選擇所有value=xxx的E標(biāo)簽，例：
input[type=password]會(huì)選擇所有type=password的input標(biāo)簽。
- 偽類選擇器
選擇了某個(gè)元素的某一種狀態(tài)。
css代碼是自上而下的被讀，最下面的代碼會(huì)覆蓋上面的,所以越特別的狀態(tài)越寫在下面。
- E:link 選擇所有未被點(diǎn)擊的E元素
- E:visited 選擇所有已被點(diǎn)擊的E元素。
- E:hover 選擇所有被鼠標(biāo)懸浮其上的E元素。
- E:active 選擇所有正在被點(diǎn)擊的E元素。
ps：LVHA也是在網(wǎng)頁中鏈接使用偽類組合的常見順序，可以良好的表現(xiàn)樣式。 - E:foucs 選擇現(xiàn)在的焦點(diǎn)E元素。
- E:first-child 選擇E元素的父元素的第一個(gè)子元素。
- E:last-child 選擇E元素的父元素的最后一個(gè)子元素。
- E:nth-child(n) 選擇E元素的父元素的第n個(gè)子元素。
- E:enabled 選擇可以使用的E元素 例：
input:enabled{xxx: xxx;} - E:disabled 選擇表單中不可使用的input元素
input:disabled{xxx: xx;} - E:checked ; E:selection 同上
- 偽元素選擇器
- E::after 在E元素里生成一個(gè)子元素，并且該子元素位于所有子元素之前。
#wrap::after{content: 'xxx';} - E::before 在E元素里生成一個(gè)子元素，該子元素在所有子元素之后。
- E::first-line 選擇E元素的第一行。
- E::first-letter 選擇E元素的第一個(gè)字母。
CSS使用的第四步：css選擇器的優(yōu)先級(jí)（用上css了，誰優(yōu)先起作用？）
首先有三種特殊情況：
- 無論什么情況，!important都是最優(yōu)先
h1 {color: red !important;} - 同等權(quán)重，下面的會(huì)覆蓋上面的，就近原則。
- 繼承得來的最弱。
css權(quán)重原則：
行內(nèi)選擇符為一檔
id選擇符為二檔
類選擇符／屬性選擇符／偽類選擇符為三檔
標(biāo)簽選擇符／偽元素選擇符尾四檔
從一檔比較到四檔，如果同檔選擇器數(shù)量相等，向下一檔比較。
