1.CSS簡(jiǎn)介
CSS 的全稱(chēng)是Cascading Style Sheets，層疊樣式表
2.CSS的引入方式
- 內(nèi)聯(lián)樣式
也叫行內(nèi)樣式，直接在HTML標(biāo)簽中的style屬性中添加CSS。
它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè)<div>擁有相同的樣式，你不得不重復(fù)地為每個(gè)<div>添加相同的樣式，如果想要修改一種樣式，又不得不改變所有的style中的代碼。很顯然，內(nèi)聯(lián)方式引入CSS代碼會(huì)導(dǎo)致HTML代碼變的冗長(zhǎng)，且使得網(wǎng)頁(yè)難以維護(hù)。 - 內(nèi)部樣式
將樣式規(guī)則寫(xiě)在HTML頭部的<style>...</style>標(biāo)簽之中，通常是將整個(gè)<style>...</style>結(jié)構(gòu)寫(xiě)在網(wǎng)頁(yè)的<head> </head>部分中。
優(yōu)點(diǎn)：整篇文章有了統(tǒng)一性，只要是有聲明的元件即會(huì)套用該樣式規(guī)則。
缺點(diǎn)：個(gè)別元件的靈活度不足，整站的功能性較弱。 - 外部樣式
(1).該樣式規(guī)則寫(xiě)在一個(gè).css的樣式文件中，再以<link>標(biāo)簽引入。這樣引入該css樣式表文件以后，就可以直接套用該樣式檔案中制定的樣式了。通常是將link標(biāo)簽寫(xiě)在網(wǎng)頁(yè)的<head> </head>部分中。
優(yōu)點(diǎn)：可以把要套用相同樣式規(guī)則的數(shù)篇文件都指定到同一個(gè)樣式文件中，可以進(jìn)行統(tǒng)一的修改，也便于整站的設(shè)置有統(tǒng)一的風(fēng)格。
缺點(diǎn)：在個(gè)別文件或元素的靈活度不足。
一般css網(wǎng)頁(yè)布局都使用此種方法。這種方法可以說(shuō)是最好的，可以使用一個(gè)樣式表來(lái)設(shè)計(jì)多個(gè)文檔，并且只需要在需要更改的地方更新CSS。
(2). 外部引用@import引用CSS
跟link方法很像，但必須放在<style>...</style>中，行末必須要有分號(hào)！
優(yōu)點(diǎn)：靈活的引入css文件對(duì)xhtml元素進(jìn)行控制。
缺點(diǎn)：在個(gè)別文件或元素的靈活度不足。
3. link和@import的區(qū)別
- 本質(zhì)的區(qū)別：
link屬于XHTML標(biāo)簽，而@import是CSS提供的一種方法。link標(biāo)簽除了可以加載CSS外，還可以做很多其他的事情，可以放在任何地方，而@import就只能加載CSS，必須放在<style> </style>標(biāo)簽內(nèi)部。 - 加載順序的區(qū)別：
當(dāng)一個(gè)頁(yè)面被加載時(shí)，link引用的CSS會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面全部被下載完才被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開(kāi)始會(huì)沒(méi)有樣式（閃爍）。 - 兼容性的差別：
由于@import是CSS2.1提出的，@import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無(wú)此問(wèn)題。 - 使用DOM控制樣式時(shí)的差別：
當(dāng)時(shí)用JavaScript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的。
4. 相對(duì)路徑、絕對(duì)路徑和網(wǎng)站路徑。
- 相對(duì)路徑
文件夾都上傳到服務(wù)器上，在線(xiàn)上和本地都能看到文件夾。相對(duì)路徑是相對(duì)當(dāng)前的路徑。一般使用相對(duì)路徑。 - 絕對(duì)路徑
本地文件的一個(gè)絕對(duì)地址，是真實(shí)地址。路徑長(zhǎng)，且放到服務(wù)器上不能被找到。一般不用這種絕對(duì)尋址的方式。 - 網(wǎng)站路徑
使用一個(gè)線(xiàn)上的地址，自己在做測(cè)試時(shí)可以臨時(shí)用一下。
以下這幾種文件路徑分別用在什么地方，代表什么意思?
- css/a.css 相對(duì)路徑 當(dāng)前css目錄下的a.css文件
- ./css/a.css 相對(duì)路徑 ./代表當(dāng)前，同上。
- b.css 相對(duì)路徑 當(dāng)前目錄下的b.css
- ../imgs/a.png 相對(duì)路徑 父目錄下imgs文件夾下的a.png文件
- /Users/hunger/project/css/a.css 絕對(duì)路徑 通過(guò)這個(gè)真實(shí)地址區(qū)絕對(duì)尋址，C盤(pán)下用戶(hù)目錄下hunger文件夾下project文件夾下的css文件夾中的a.css文件
- /static/css/a.css 網(wǎng)站路徑 引用網(wǎng)站路徑下static文件夾下css文件夾中的a.css文件（域名+端口號(hào)+/static/css/a.css）
- http://cdn.jirengu.com/kejian1/8-1.png 網(wǎng)站路徑 是一個(gè)線(xiàn)上的圖片地址，引用此URL中的8-1.png圖片
- 如果我想在js.jirengu.com上展示一個(gè)圖片，需要怎么操作?
把本地圖片上傳到一個(gè)地方，生成一個(gè)網(wǎng)址。還有一個(gè)投機(jī)取巧的方法，在本地開(kāi)一個(gè)服務(wù)器，通過(guò)localhost方式加載圖片，這個(gè)方法適用于本地測(cè)試臨時(shí)用一下。
5. HTML的書(shū)寫(xiě)規(guī)范
- 不使用內(nèi)聯(lián)級(jí)樣式
- 閉合HTML標(biāo)簽
- 文檔類(lèi)型聲明及編碼：統(tǒng)一為html5聲明類(lèi)型<!DOCTYPE html>；編碼統(tǒng)一為<meta charset="gbk"/>，書(shū)寫(xiě)時(shí)利用IDE實(shí)現(xiàn)層次分明的縮進(jìn)
- 重要圖片必須加上alt屬性
- 在頁(yè)面底部引入JavaScript文件
5. CSS的書(shū)寫(xiě)規(guī)范
- 編碼統(tǒng)一為utf-8
- 語(yǔ)法不區(qū)分大小寫(xiě)，但一般全小寫(xiě)。
- 不使用內(nèi)聯(lián)的style屬性定義樣式，不要把樣式寫(xiě)在標(biāo)簽上。
- id和class使用有意義的單詞，id與class 間的分隔符用"-"
- 有一定的縮進(jìn)，使代碼美觀(guān)易讀。
- 屬性名冒號(hào)后需要添加一個(gè)空格。
6. chrome谷歌瀏覽器開(kāi)發(fā)者工具
- 如何去調(diào)試？鼠標(biāo)右鍵點(diǎn)擊審查元素（我的是檢查）。
Elements、CSS、控制臺(tái)
Network調(diào)試AJAX接口 Sources用來(lái)調(diào)試JS
Resources是當(dāng)前頁(yè)面的一些資源
Timeline分析時(shí)序
Profiles分析CPU和內(nèi)存
Emulation模擬不同分辨率（例如iPhone5）的瀏覽器、不同的標(biāo)識(shí)頭部和不同的網(wǎng)絡(luò)環(huán)境和網(wǎng)速。
-
在做前端開(kāi)發(fā)時(shí)，要養(yǎng)成一個(gè)好習(xí)慣，如果你很欣賞這個(gè)頁(yè)面的風(fēng)格和布局，最簡(jiǎn)單的方式時(shí)審查元素，可以借鑒這些方式，因?yàn)榍岸耸菦](méi)有隱藏的。
chrome開(kāi)發(fā)者工具.png
console用來(lái)調(diào)試css代碼，console.log(變量)，報(bào)錯(cuò)，雙擊定位到出錯(cuò)點(diǎn)
