css是層疊樣式表，它是網(wǎng)頁之皮
本文主要內(nèi)容：
1. css語法格式（怎么寫拍皮？）
2. css引入方式（怎么用仅炊？）
3. css文件地址（想用到哪找？）
4. css選擇器分類（一共有幾種愚战？）
5. css選擇器優(yōu)先級（用上了娇唯，誰優(yōu)先？）
寫法：
選擇器:{屬性:屬性值; 屬性:屬性值;}
ps：（【屬性:屬性值;】這個組合叫做css的聲明）
@xx.css;
a:hover
CSS使用的第一步：引入方式
css的引入方式有三種：
- 內(nèi)聯(lián)樣式
寫在html標簽內(nèi)寂玲，很不常用塔插，難閱讀難維護。
<h1 style='color:red;'></h1> - 內(nèi)部樣式
寫在style標簽里拓哟，不便于維護想许，盡量不要用。
<head>
<style type='text/css'>
h1 {color:red;}
</style>
</head>
- 外部樣式
把樣式先寫在一個css文件內(nèi)断序，再把這個css文件引入到頁面內(nèi)流纹，容易維護，結(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的一個標簽漱凝，它可以出現(xiàn)在html的任何地方；@其實使用的css語法诸迟，需要寫在style標簽里或者css文件里茸炒。
可以在link引入的css文件內(nèi)使用@import哦～
CSS使用的第二步：確定css文件地址
如果我們已經(jīng)確定使用link的方式引入css文件，那么我寫好了css文件阵苇，如何才能找到它呢扣典？
尋找文件的路徑分為三種，相對路徑慎玖，絕對路徑，網(wǎng)站路徑笛粘。
- 相對路徑
相對路徑是以目前文件未基準趁怔，一步步指向目標文件，
css/xx.css
../image/123.png
- 絕對路徑
絕對路徑是本地文件的全部地址薪前，或者說是文件在計算機內(nèi)的真實地址润努。長度比較長。 - 網(wǎng)站路徑
上傳以后示括，盡量使用相對路徑铺浇；也可以直接用文件的絕對網(wǎng)絡(luò)地址。
CSS使用的第三步：了解css選擇器（選擇器有幾種垛膝？）
css的語法是 選擇器{屬性：屬性值;}
那么css的選擇器都有哪些呢鳍侣？
· 基礎(chǔ)選擇器
· 組合選擇器
· 屬性選擇器
· 偽類選擇器
· 偽元素選擇器
- 基礎(chǔ)選擇器
最常見的選擇器，由下面幾種組成：
- 通配符選擇器（*）選擇頁面所有元素吼拥。
- id選擇器（#id）選擇特定的id元素(唯一性)
- 類選擇器（.class）選擇特定的class元素（某一類）
- 標簽選擇器（element）按標簽名選擇頁面內(nèi)所有該標簽
- 組合選擇器
首先假設(shè)E和F是兩個基礎(chǔ)選擇器
- E,F 多元素選擇倚聚，用
,分隔，同時選擇了E和F凿可。 - E F 后代選擇器惑折，用空格分隔，選擇了E的所有后代里的F元素。
- E>F 子元素選擇器惨驶，用>分隔白热，選擇了E的直接子元素里的F元素。
- E+F 兄弟相鄰選擇器粗卜，用+分隔屋确，選擇了和E相鄰的、同級的F元素休建。
- E~F 普通相鄰選擇器乍恐，用~分隔，選擇了和E同級的测砂、不一定相鄰的F元素茵烈。
- .class1.class2 過濾選擇器，id或者class 沒有分隔砌些，選擇了同時擁有這兩者的元素呜投。
- 屬性選擇器
不常用，假設(shè)E是一個基礎(chǔ)選擇器
- E[attr] 選擇所有具有attr的E元素存璃，例：
div[id]會選擇所有擁有ID屬性的div仑荐。 - E[value=xxx] 選擇所有value=xxx的E標簽，例：
input[type=password]會選擇所有type=password的input標簽纵东。
- 偽類選擇器
選擇了某個元素的某一種狀態(tài)粘招。
css代碼是自上而下的被讀，最下面的代碼會覆蓋上面的,所以越特別的狀態(tài)越寫在下面偎球。
- E:link 選擇所有未被點擊的E元素
- E:visited 選擇所有已被點擊的E元素洒扎。
- E:hover 選擇所有被鼠標懸浮其上的E元素。
- E:active 選擇所有正在被點擊的E元素衰絮。
ps：LVHA也是在網(wǎng)頁中鏈接使用偽類組合的常見順序袍冷，可以良好的表現(xiàn)樣式。 - E:foucs 選擇現(xiàn)在的焦點E元素猫牡。
- E:first-child 選擇E元素的父元素的第一個子元素胡诗。
- E:last-child 選擇E元素的父元素的最后一個子元素。
- E:nth-child(n) 選擇E元素的父元素的第n個子元素淌友。
- E:enabled 選擇可以使用的E元素 例：
input:enabled{xxx: xxx;} - E:disabled 選擇表單中不可使用的input元素
input:disabled{xxx: xx;} - E:checked ; E:selection 同上
- 偽元素選擇器
- E::after 在E元素里生成一個子元素煌恢，并且該子元素位于所有子元素之前。
#wrap::after{content: 'xxx';} - E::before 在E元素里生成一個子元素震庭，該子元素在所有子元素之后症虑。
- E::first-line 選擇E元素的第一行。
- E::first-letter 選擇E元素的第一個字母归薛。
CSS使用的第四步：css選擇器的優(yōu)先級（用上css了谍憔，誰優(yōu)先起作用匪蝙？）
首先有三種特殊情況：
- 無論什么情況，!important都是最優(yōu)先
h1 {color: red !important;} - 同等權(quán)重习贫，下面的會覆蓋上面的逛球，就近原則。
- 繼承得來的最弱苫昌。
css權(quán)重原則：
行內(nèi)選擇符為一檔
id選擇符為二檔
類選擇符／屬性選擇符／偽類選擇符為三檔
標簽選擇符／偽元素選擇符尾四檔
從一檔比較到四檔豹芯，如果同檔選擇器數(shù)量相等簿盅，向下一檔比較诫肠。
