一、谷歌瀏覽器開發(fā)者工具

1. 網(wǎng)頁(yè)右鍵-->檢查（審查元素）
2. F12快捷鍵
3. Elements選項(xiàng)查看元素
4. network查看網(wǎng)絡(luò)
5. console控制臺(tái)
6. 右邊styles表示當(dāng)前選中標(biāo)簽設(shè)置了什么屬性，可以修改直接查看效果但不會(huì)保存影響到源碼

二、CSS三大特性

1. 繼承性

1. 給父元素設(shè)置一些屬性，所有的子元素都可以繼承
2. 并不是所有的屬性都可以繼承，只有以color、font-、text-、line開頭的屬性才可以繼承
3. a標(biāo)簽的字體顏色和下劃線是不能繼承的
4. h標(biāo)簽的文字大小是不能繼承的
5. 可通過(guò)谷歌瀏覽器開發(fā)者工具右邊的style標(biāo)簽中查看
6. 一般用于設(shè)置網(wǎng)頁(yè)上的一些共性信息，例如網(wǎng)頁(yè)的文字顏色，字體大小等

2. 層疊性

1. css處理沖突的一種能力
2. 層疊性只有在多個(gè)選擇器同時(shí)選中同一個(gè)標(biāo)簽，然后又設(shè)置了相同的屬性，才會(huì)發(fā)生層疊
3. 可通過(guò)谷歌瀏覽器開發(fā)者工具右邊的style標(biāo)簽中查看

3. 優(yōu)先級(jí)

1. 當(dāng)多個(gè)選擇器同時(shí)選中同一個(gè)標(biāo)簽，然后又設(shè)置了相同的屬性，如何層疊就由優(yōu)先級(jí)來(lái)確定
2. 如果是間接選中（繼承），誰(shuí)離目標(biāo)標(biāo)簽近就聽誰(shuí)的
3. 如果是直接選中，而且選擇器類型相同，那么誰(shuí)寫在后面就聽誰(shuí)的
4. 如果是直接選中，選擇器類型不同，那么就會(huì)按照選擇器的優(yōu)先級(jí)來(lái)層疊：id選擇器>類選擇器>標(biāo)簽選擇器>通配符選擇器>繼承>瀏覽器默認(rèn)

4. !important

1. 用于提升某個(gè)直接選中標(biāo)簽的選擇器中的某個(gè)屬性的優(yōu)先級(jí)，可以將被指定的屬性的優(yōu)先級(jí)提升為最高
2. 通配符選擇器也可以使用
3. 只能提升某個(gè)被指定的屬性，那些沒(méi)有被標(biāo)記的不影響
4. 必須寫在分號(hào)前面，感嘆號(hào)也不能省略

5. 權(quán)重的計(jì)算

1. 當(dāng)多個(gè)選擇器混合在一起使用時(shí)，我們可以通過(guò)計(jì)算權(quán)重來(lái)判斷誰(shuí)的優(yōu)先級(jí)最高
2. 首先數(shù)id選擇器的個(gè)數(shù)，誰(shuí)的多誰(shuí)的優(yōu)先級(jí)就高
3. 如果id選擇器的個(gè)數(shù)相同，那么數(shù)類選擇器的個(gè)數(shù)，誰(shuí)的多誰(shuí)的優(yōu)先級(jí)高
4. 如果id和類的個(gè)數(shù)都相同，那么數(shù)標(biāo)簽選擇器的個(gè)數(shù)，誰(shuí)的多誰(shuí)的優(yōu)先級(jí)高
5. 如果id、類和標(biāo)簽個(gè)數(shù)都一樣，那么就不進(jìn)行計(jì)算了，誰(shuí)寫在后面聽誰(shuí)的

注意：必須是直接選中標(biāo)簽

三、CSS顯示模式

div：一般用于配合css完成網(wǎng)頁(yè)的基本布局，是一個(gè)容器級(jí)別的標(biāo)簽
span：一般用于配合css修改網(wǎng)頁(yè)中的一些局部信息，是一個(gè)文本級(jí)別的標(biāo)簽
區(qū)別：div是塊級(jí)元素，會(huì)單獨(dú)占一行。span是行內(nèi)元素，一行內(nèi)可以有多個(gè)
容器級(jí)的標(biāo)簽：可以層疊多個(gè)標(biāo)簽
文字級(jí)的標(biāo)簽：只能放文字，圖片和超鏈接等
在企業(yè)中一般嵌套都是用div或者按照標(biāo)簽來(lái)嵌套

1. 塊級(jí)元素：p div h ul ol li dl dt dd

獨(dú)占一行，如果沒(méi)有設(shè)置寬高，默認(rèn)和父元素一樣，如果設(shè)置了就按設(shè)置的來(lái)

2. 行內(nèi)元素：span b u i s strong em ins del

行內(nèi)元素不可以設(shè)置寬高，默認(rèn)和內(nèi)容一樣

3. 行內(nèi)塊級(jí)元素：img

元素既不獨(dú)占一行，也能設(shè)置寬高

4. 相互轉(zhuǎn)換

在每個(gè)選擇器的屬性里都有display這個(gè)屬性
display:inline(di+tab)：轉(zhuǎn)化為行內(nèi)元素
display:inline-block(dib+tab)：轉(zhuǎn)化為行內(nèi)塊級(jí)元素
display:block(db+tab)：轉(zhuǎn)化為塊級(jí)元素

三、CSS背景屬性

1. 背景顏色：background-color:(bc + tab)
2. 背景圖片：background-image:url()(bi + tab)
3. 背景圖片的平鋪：background-repeat:(bgr + tab)
   repeat：默認(rèn)值，在水平和垂直方向都平鋪
   repeat-x：只在水平方向平鋪
   repeat-y：只在垂直方向平鋪
   no-repeat：不平鋪
4. 背景定位：background-position:水平方向 垂直方向(bp + tab)
   水平方向：left/center/right或者具體像素，默認(rèn)值為left，越往右越大，可設(shè)置負(fù)數(shù)即圖片往左移，可只設(shè)置水平方向值為center，圖片自動(dòng)居中顯示
   垂直方向：top/center/bottom或者具體像素，默認(rèn)值為top，越往下越大，可設(shè)置負(fù)數(shù)即圖片往上移
   具體像素用來(lái)與精靈圖結(jié)合使用
5. 關(guān)聯(lián)方式：background-attachment:(ba + tab)默認(rèn)值為scroll，背景圖片會(huì)隨著滾動(dòng)條滾動(dòng)而滾動(dòng)，如果不想讓他隨著滾動(dòng)可以將值該為fixed
6. 連寫：background：背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式(bg+ + tab)
7. 背景重疊的應(yīng)用可以理解為PS當(dāng)中的圖層多個(gè)圖層重疊顯示

注意：

1. 同個(gè)標(biāo)簽可以同時(shí)設(shè)置背景顏色和背景圖片，默認(rèn)是圖片覆蓋顏色
2. 如果要設(shè)置background-repeat屬性，必須有background-image屬性
3. 連寫中任何一個(gè)屬性都可以被省略
4. 由于是背景圖片,需要先給div設(shè)置一個(gè)高度
5. background-image屬性與img標(biāo)簽的區(qū)別:
6. 背景圖片僅僅是一個(gè)裝飾,不會(huì)占用位置
7. 背景圖片有定位屬性,可以隨便改變位置
8. 插入標(biāo)簽的語(yǔ)義比背景圖片更強(qiáng),容易被搜索引擎搜到