CSS的全稱
層疊樣式表（Cascading Style Sheets）,是一種樣式表語言，用來描述HTML和XML文檔的呈現(xiàn)入录。CSS描述了在屏幕蛤奥、紙質(zhì)、音頻等其他媒體上的元素應(yīng)該如何被渲染的問題僚稿。
CSS的引入方式
內(nèi)聯(lián)樣式
<h1 style="clolr: red"; font-size: 20px; ></h1>（放在屬性里面）
內(nèi)部樣式
<style type="text/css">
h1{
color:red;
}
</style>
（放在head里面）
外部樣式
<head>
<link rel="stylesheet" type="text/css" href="index.css" >
</head>
<style>
@import url("hello.css");
@import "world.css";
</style>
(放在head里面或者去掉style放在css里面)
瀏覽器默認樣式（user agent styleshet）
link 和@import的區(qū)別
-
老祖宗的差別凡桥。link 屬于xhml標簽，link可以放在html的任何地方蚀同。而@import屬于css可以放在style內(nèi)部放在html中缅刽，也可以放在css中。
link除了可以加載css外蠢络，還可以定義rss,定義rel連接屬性衰猛，而@import
就只能加載css了。 加載順序的差別刹孔。當一個頁面被加載的時候啡省，link引用的css會同時被加載，而@import引用的css會等到頁面全部被加載完再被加載髓霞。
兼容性的差別卦睹。由于@import是css2.1提出的所以老的瀏覽器不支持，@import只有在ie5以上的才能被識別方库。
使用dom控制樣式時的差別结序。當使用javascript控制dom去改變樣式的時候，只能使用link標簽纵潦，因為@import不是dom可以控制的徐鹤。
文件路徑
-
相對路徑（文件之間的關(guān)系，相對于當前文件的路徑）：
下級目錄
css/a.css=./css/a.css同級目錄
b.css父級目錄
../imgs/a.png 絕對路徑（本地文件服務(wù)器上找不到）
/user/hunger/css/a.css(以/開頭的根目錄)網(wǎng)站路徑
/static/css/a.css(主域名下的文件路徑邀层，加上主域名就能訪問)
http://cdn.jirengu.com/kejian1/1-8.jig
如何在js.jirengu.com上展示一個圖片
- 用相對路徑
- 自己開本地服務(wù)器返敬，自己做本地圖片的鏈接
- 用外鏈。把圖片上傳到微博被济，七牛等圖床救赐，或者qq空間獲得url.
html和css的書寫規(guī)范
語法不區(qū)分大小寫涧团，但建議統(tǒng)一使用小寫只磷。
不使用內(nèi)聯(lián)的style 屬性定義樣式经磅。
id和class使用有意義的單詞。
使用縮寫钮追。
0px寫成0.
屬性和屬性值之間有空格预厌。
塊內(nèi)容縮進。
了解chrome開發(fā)者工具元媚。
功能區(qū)的了解
此外功能區(qū)還有：
Memory:顯示頁面js對象和相關(guān)聯(lián)的dom節(jié)點的內(nèi)存分布情況轧叽。
Application:記錄網(wǎng)頁加載的所有資源，包括存儲信息刊棕、緩存信息炭晒、以及頁面用到的圖片、字體甥角、腳本网严、樣式等信息。
Security:用于檢測頁面的安全性嗤无。
Audits:審計面板會對頁面的加載進行分析震束，然后給出提高頁面性能的建議。
Elements
DOM樹
檢查頁面元素
- 右擊頁面任意一處当犯，選擇檢查頁面元素垢村，查看頁面對應(yīng)的dom元素。
- 鼠標懸停在dom樹的任意一個節(jié)點嚎卫，頁面會用淡藍色的蒙版在頁面上標記dom節(jié)點對應(yīng)的頁面嘉栓。
編輯dom
可以任意修改dom樹上的任意信息，比如拓诸，修改節(jié)點的類型胸懈、屬性、或者改變dom節(jié)點的所屬關(guān)系等恰响。不過這些修改都是臨時的趣钱，不會等到保存，當刷新頁面時所有的修改都將重置胚宦。
- 雙擊元素標簽首有，修改dom節(jié)點類型，比如將div改成ul枢劝。
- 雙擊元素屬性井联，修改dom節(jié)點的屬性，比如修改節(jié)點的id您旁。
- 選擇一個dom節(jié)點烙常，并將其拖到目標位置，可以改變頁面結(jié)構(gòu)。
- 選擇一個dom節(jié)點蚕脏，按delete鍵刪除侦副。
- ctrl+z，撤回操作驼鞭。
樣式
- element,style:代表所選元素的內(nèi)聯(lián)樣式秦驯。比如我選的是header塊，如果我直接修改HTML為
<div class="header" style="background:red"></div>那么element,style中就會出現(xiàn)background:red;相反如果我在element,style塊中點擊任意空白處添加css樣式挣棕，那么你就會在對應(yīng)的元素節(jié)點上看到style屬性译隘。 - 最后一個“+”號可以添加新的css規(guī)則。
- 單擊屬性或?qū)傩灾颠M行修改洛心，點擊空白處添加新的樣式固耘。
- 點擊色塊可以打開取色器，對顏色進行可視化編輯词身。
- 以inherited from....為分界玻驻，上面的樣式都是作為元素本身的，下面都是繼承而來的偿枕，繼承的對象不止一個璧瞬，可能是父元素，父元素的父元素渐夸。
- 將鼠標停在一個選擇器上的時候嗤锉，可以看到這個選擇器所影響的所有頁面元素。
- 點擊：hov;可以強制所選元素處于某個狀態(tài)墓塌，這個也能通過右擊元素瘟忱，選擇一個狀態(tài)來實現(xiàn)。
點擊".cls” 查看所有與當前元素直接相關(guān)的樣式規(guī)則苫幢，你可以禁用或允許某個類作用于所選元素访诱，也可以添加新的類。韩肝、
computed
- 所選元素的盒模型
- 所選元素的css樣式以及值触菜，不僅展示了最終所采用的值，也顯示了被覆蓋的值哀峻。
- 每個屬性值所在的文件
鼠標懸停在盒模型的margin,border,padding以及內(nèi)容區(qū)域涡相，可以在網(wǎng)頁中看到與之對應(yīng)的區(qū)域，還可以雙擊盒模型上的數(shù)字來修改它剩蟀，如果所選元素的position屬性值為absolute或者fixed的話催蝗，還可以在margin外圍設(shè)置position。
