CSS的全稱
CSS的全稱是Cascading Style Sheets石洗，層疊樣式表缀雳。是一種樣式表語(yǔ)言羞延，用于為HTML文檔定義布局渣淳。
CSS的引入方式
CSS有4種引入方式。
- 內(nèi)聯(lián)式
<h1 style="color:red; font-size: 20px;">...</h1>
- 內(nèi)部式
CSS代碼寫(xiě)在<style type="text/css">...</style>內(nèi)伴箩，一般置于<head>標(biāo)簽中入愧。
<style type="text/css">
h1 {
color:red;
font-size:20px;
}
</style>
- 外部式
把css代碼寫(xiě)一個(gè)單獨(dú)的外部文件中，這個(gè)css樣式文件以“.css”為擴(kuò)展名嗤谚，在<head>內(nèi)棺蛛，使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)。
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
- 導(dǎo)入@import
<style>
@import url(a.css);
@import "b.css";
</style>
使用實(shí)例（參考其他學(xué)員）
JS Bin地址
JS Bin效果展示.png
link 和@import 的區(qū)別
- 語(yǔ)法結(jié)構(gòu)的區(qū)別：link屬于HTML標(biāo)簽呵恢，只能放入html源代碼中使用鞠值，而@import是CSS提供的一種方式，只能加載CSS了渗钉。
- 加載順序的區(qū)別：link引用的CSS會(huì)在一個(gè)頁(yè)面被加載的時(shí)候（即被瀏覽者瀏覽的時(shí)候）同時(shí)被加載彤恶，而@import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載钞钙。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開(kāi)始會(huì)沒(méi)有樣式（閃爍）。
- 兼容性的區(qū)別：由于@import是CSS2.1提出的所以老的瀏覽器不支持声离，@import只有在IE5以上的才能識(shí)別芒炼，而link標(biāo)簽無(wú)此問(wèn)題。
- 使用dom控制樣式時(shí)的區(qū)別：當(dāng)使用javascript控制dom去改變樣式的時(shí)候术徊，只能使用link標(biāo)簽本刽，因?yàn)锧import不是dom可以控制的。
路徑
- 相對(duì)路徑（即相對(duì)當(dāng)前文件所在位置而言的路徑）
假設(shè)當(dāng)前文件為index赠涮。 - css/a.css——index所處目錄下的css文件夾中的a.css文件
- ./css/a.css——同上子寓，“./”表示當(dāng)前文件所處目錄
- b.css——index所處目錄下的b.css文件
- ../imgs/a.png——index的上級(jí)目錄中imgs文件中的a.png文件
- 絕對(duì)路徑（電腦中的完整的路徑，不以任何為參考）
- /Users/hunger/project/css/a.css——本地絕對(duì)（完整）路徑中的a.css文件
- /static/css/a.css——表示某網(wǎng)站目錄下static目錄中css目錄下的a.css文件
- http://cdn.jirengu.com/kejian1/8-1.png ——絕對(duì)意義上的網(wǎng)站中kejian1目錄中的圖片
如何在網(wǎng)站上展示圖片
- 圖片上傳到網(wǎng)上（如某某相冊(cè)）笋除，獲得地址斜友，利用標(biāo)簽：
<img s-r-c="XXX">(省略掉“-”)
- 上傳到服務(wù)器，獲取相對(duì)路徑（適用于本地調(diào)試）
HTML 和 CSS 的書(shū)寫(xiě)規(guī)范
- HTML
- 用兩個(gè)空格來(lái)代替制表符（Tab）
- 嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）垃它。
- 對(duì)于屬性的定義鲜屏，確保全部使用雙引號(hào)，絕不要使用單引號(hào)国拇。
- 不要省略可選的結(jié)束標(biāo)簽（closing tag）（例如
</li>或</body>）洛史。 - 統(tǒng)一使用小寫(xiě)（包括標(biāo)簽、屬性酱吝、命名id class等）也殖。
- id class命名使用有意義的單詞，盡量使用縮寫(xiě)掉瞳，分隔符用 “-”毕源。
- 使用注釋，方便閱讀陕习。
- CSS
- 為選擇器分組時(shí)霎褐，將單獨(dú)的選擇器單獨(dú)放在一行。
- 為了代碼的易讀性该镣，在每個(gè)聲明塊的左花括號(hào)前添加一個(gè)空格冻璃。
- 聲明塊的右花括號(hào)應(yīng)當(dāng)單獨(dú)成行。
- 每條聲明語(yǔ)句的 : 后應(yīng)該插入一個(gè)空格损合。
- 為了獲得更準(zhǔn)確的錯(cuò)誤報(bào)告省艳，每條聲明都應(yīng)該獨(dú)占一行。
- 所有聲明語(yǔ)句都應(yīng)當(dāng)以分號(hào)結(jié)尾嫁审。最后一條聲明語(yǔ)句后面的分號(hào)是可選的跋炕，但是，如果省略這個(gè)分號(hào)律适，你的代碼可能更易出錯(cuò)辐烂。
- 對(duì)于以逗號(hào)分隔的屬性值遏插，每個(gè)逗號(hào)后面都應(yīng)該插入一個(gè)空格（例如，box-shadow）纠修。
chrome 開(kāi)發(fā)者工具的功能區(qū)
開(kāi)發(fā)者工具.png
- **Elements: **查看胳嘲、編輯頁(yè)面上的元素，并可在瀏覽器得到反饋扣草。
- Console: 記錄開(kāi)發(fā)者開(kāi)發(fā)過(guò)程中的日志信息了牛，且可以作為與JS進(jìn)行交互的命令行Shell。
- Sources: 主要顯示網(wǎng)頁(yè)加載的腳本文件辰妙，如CSS鹰祸、JS等。
- Network: 可以看到頁(yè)面向服務(wù)器請(qǐng)求了哪些資源密浑、資源的大小以及加載資源花費(fèi)的時(shí)間福荸，當(dāng)然也能看到哪些資源不能成功加載。
- Application: 記錄網(wǎng)站加載的所有資源信息肴掷，包括存儲(chǔ)數(shù)據(jù)（Local Storage、Session Storage背传、IndexedDB呆瞻、Web SQL、Cookies）径玖、緩存數(shù)據(jù)痴脾、字體、圖片梳星、腳本赞赖、樣式表等。
- **Security: **判斷當(dāng)前網(wǎng)頁(yè)是否安全冤灾。
- ** Audits: **可以優(yōu)化前端頁(yè)面前域，加快網(wǎng)頁(yè)加載速度。
- Style:可以實(shí)時(shí)修改CSS的屬性值韵吨，這里面的所有樣式Name和Value都是可以編輯的匿垄。
- Computed:可以編輯左側(cè)選中的盒子模型參數(shù)，所有的值都是可以修改的归粉。
