一直認(rèn)為自己已經(jīng)掌握了HTML/CSS/JavaScript三劍客梅猿，但孔子說(shuō)：
溫故而知新
最近溫故了一下三劍客，在此將CSS的溫故筆記做個(gè)記錄秒裕。
優(yōu)先級(jí)
內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式>瀏覽器默認(rèn)樣式
優(yōu)先級(jí)順序
下列是一份優(yōu)先級(jí)逐級(jí)增加的選擇器列表：
通用選擇器（*）
元素(類型)選擇器
類選擇器
屬性選擇器
偽類
ID 選擇器
內(nèi)聯(lián)樣式
!important 規(guī)則例外
一些經(jīng)驗(yàn)法則：
Always 要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級(jí)來(lái)解決問(wèn)題而不是 !important
Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁(yè)面中使用 !important
Never 永遠(yuǎn)不要在全站范圍的 css 上使用 !important
Never 永遠(yuǎn)不要在你的插件中使用 !important列表
上一篇HTML教程學(xué)習(xí)筆記中講到袱蚓，可以通過(guò)給<ol>標(biāo)簽添加type屬性來(lái)指定列表序號(hào)，比如type="A"那么列表的序號(hào)就是A,B,C...
如果type="I"几蜻，那么列表的序號(hào)就是Ⅰ,Ⅱ,Ⅲ,Ⅳ...
CSS也可以控制列表的序號(hào)：
<style>
.a{ list-style-type:upper-roman;}
.b{ list-style-type:lower-alpha;}
</style>
<ol class="a">
<li>Cat</li>
<li>Dog</li>
<li>Pig</li>
</ol>
<ol class="b">
<li>Cat</li>
<li>Dog</li>
<li>Pig</li>
</ol>
運(yùn)行結(jié)果：
PS：元素和類名作為組合選擇器時(shí)喇潘，元素和類名之間不能有空格爽撒。
盒模型
只說(shuō)一個(gè)點(diǎn)，就是width的值指content的寬度响蓉，不包括padding、border和margin哨毁，不考慮早期IE的怪異盒模型枫甲。一般屬性值有1~4個(gè)的
例如padding蛋哭、margin等奖年，
1個(gè)值——四邊都一樣
2個(gè)值——上下瘤泪、左右
3個(gè)值——上春弥、左右绘沉、下
4個(gè)值——上增蹭、右疚颊、下霜瘪、左display:none和visibility:hidden
都可以隱藏元素幔崖，但后者仍然占據(jù)空間食店，會(huì)影響頁(yè)面布局。absolute
與文檔流無(wú)關(guān)赏寇，可以產(chǎn)生重疊媒體類型
為不同媒體設(shè)置不同樣式屬性選擇器
第一次知道還有屬性選擇器
[title]
{
color:blue;
}
表示所有含title屬性的元素變?yōu)樗{(lán)色吉嫩。
- background-image
該屬性的值可以有多張圖片，不同的圖片之間用逗號(hào)分隔嗅定，還可以指定不同的圖片處于容器的不同位置自娩。
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
也可以寫成：
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
- background-origin
前面我們了解到盒子模型，該屬性的屬性值有三種渠退，分別是content-box/padding-box/border-box忙迁。background-clip的屬性值也有上面三種。
天哪碎乃，CSS的東西好多哦姊扔！好難記住呀，有人可以分享經(jīng)驗(yàn)嗎梅誓？
