1 什么是CSS
CSS(Cascading Style Sheets)層疊樣式表，主要是用來(lái)修飾網(wǎng)頁(yè)漠另。
CSS的語(yǔ)法格式：
選擇器{
屬性： 值探遵；
屬性： 值盛险；
}
eg:h1{
color: red;
font-size: 30px;
}
2 如何在頁(yè)面上引用CSS
- 內(nèi)聯(lián)樣式:將css的屬性值放到HTML標(biāo)簽的的style屬性里。
eg:<h1 style="color: red; font-size: 30px;></h1> - 內(nèi)部樣式：將css放到<style>標(biāo)簽里雀摘。屬性type="text/css"
eg:
<style type="text/css">
h1{
color: red;
font-size: 30px;
}
</style>
- 外部樣式：link和import兩種方法
1 link:在head標(biāo)簽中使用link鏈接到CSS樣式表裸删，是HTML標(biāo)簽
使用鏈接時(shí)是它會(huì)以網(wǎng)頁(yè)文件主體裝載前裝載CSS文件，因此顯示出來(lái)的網(wǎng)頁(yè)從一開(kāi)始就是帶樣式的效果的阵赠，這是鏈接式的優(yōu)點(diǎn)涯塔。
eg:<link href="mystyle.css" rel="stylesheet" type="text/css"/>
2 import：在style標(biāo)簽中加上@import + css的地址，import是CSS的語(yǔ)法清蚀。
import在整個(gè)網(wǎng)頁(yè)裝載完后再裝載CSS文件匕荸，因此這就導(dǎo)致了一個(gè)問(wèn)題，如果網(wǎng)頁(yè)比較大則會(huì)兒出現(xiàn)先顯示無(wú)樣式的頁(yè)面枷邪，閃爍一下之后榛搔，再出現(xiàn)網(wǎng)頁(yè)的樣式。這是import固有的一個(gè)缺陷齿风。
eg:
<style type="text/css">
@import "mystyle.css"; //此處要注意.css文件的路徑
@import url("mystyle.css"); //該方法引號(hào)可以去掉
</style>
- 默認(rèn)樣式
3 關(guān)于文件路徑
1 相對(duì)路徑：是指相對(duì)于當(dāng)前所處路徑的其他目錄的表示方法
css/a.css當(dāng)前目錄下css目錄的a.css文件
./css/a.css同上
b.css當(dāng)前目錄下的b.css
../imgs/a.png當(dāng)前目錄的上一級(jí)目錄下的imgs目錄下的a.png文件
/static/css/a.css當(dāng)前目錄下static目錄下css目錄下的a.css文件
2 絕對(duì)路徑： 是指該文件自己所處的磁盤(pán)根目錄
/Users/hunger/project/css/a.css
3 網(wǎng)頁(yè)路徑：是指該文件存放于某個(gè)網(wǎng)頁(yè)的網(wǎng)頁(yè)地址
http://cdn.jirengu.com/kejian1/8-1.png
4 js.jirengu.com上展示圖片
html上展示圖片使用<img>標(biāo)簽药薯。
css的圖片起到裝飾的作用，可以使用背景圖片來(lái)顯示救斑。
eg:
5 html和 css 的書(shū)寫(xiě)規(guī)范
1語(yǔ)法格式：
HTML：標(biāo)簽語(yǔ)言
css語(yǔ)法格式：
選擇器{
屬性： 值童本；
屬性： 值；
}
2適當(dāng)縮進(jìn)脸候，體現(xiàn)元素的嵌套關(guān)系
3只能出現(xiàn)小寫(xiě)字符或者中劃線（破折號(hào)符）穷娱，不用下劃線，駝峰命名法运沦。
4避免過(guò)度任意的簡(jiǎn)寫(xiě)泵额。
5class 名稱應(yīng)當(dāng)盡可能短，并且意義明確携添。
詳細(xì)參見(jiàn)：http://www.cnblogs.com/lwwen/archive/2016/08/29/5818043.html
6 chrome 開(kāi)發(fā)者工具的功能區(qū)簡(jiǎn)介
打開(kāi)網(wǎng)頁(yè)右鍵檢查或是按F12嫁盲。
Elements介紹
Elements這個(gè)就比如頁(yè)面的每個(gè)元素吧，比如百度搜索這個(gè)圖片烈掠，可以通過(guò)Elements找到羞秤，搜索框也可以，在底下的“放大鏡”類似的控件左敌，點(diǎn)擊然后選擇自己想要查看要素或位置瘾蛋，Elements會(huì)跳轉(zhuǎn)到相應(yīng)的實(shí)現(xiàn)代碼。
NetWork介紹
NetWork可以看到網(wǎng)頁(yè)加載的腳本和資源的時(shí)間矫限，還可以看到某些不能加載成功的資源哺哼；這里有位是百度首頁(yè)演示佩抹，百度首頁(yè)內(nèi)容很干凈所以不需要加載什么圖片等資源
Sources介紹
Sources可以查看運(yùn)行的腳本，調(diào)試一般都是在Sources調(diào)試的取董，所以程序開(kāi)發(fā)者需要了解和熟悉Sources的使用
Resources介紹
Resources里可以查看web程序跑起來(lái)后所加載的一些資源（Resources）棍苹，包括圖片或者其他“值”，以及Cookies
Console介紹
Console可以查看網(wǎng)頁(yè)運(yùn)行后提示的消息甲葬，錯(cuò)誤或者警告以及輸出內(nèi)容等廊勃，網(wǎng)頁(yè)后臺(tái)可以使用Console.debug("輸出內(nèi)容")；來(lái)在Console輸出顯示经窖，可以做到調(diào)試的作用吧坡垫，不過(guò)一般真正調(diào)試不是拿Console。console.debug("Console使用介紹");console是小寫(xiě)形式画侣，不然提示沒(méi)有Console
