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