因?yàn)楣厩岸诵枰然痍?duì)員，所以臨危受命履婉，擺正心態(tài)煤篙，閱讀第一手資料，從MDN文檔入手毁腿。
定義
CSS： (Cascading Style Sheets) 是用來樣式化和排版你的網(wǎng)頁的辑奈，是一種用于向用戶指定文檔如何呈現(xiàn)的語言 — 它們?nèi)绾伪恢付邮健⒉季值?/p>
CSS是如何工作的已烤？
當(dāng)瀏覽器顯示文檔時(shí)鸠窗，它分為兩個(gè)階段處理文檔：
- 瀏覽器將HTML和 CSS 轉(zhuǎn)化成 DOM。DOM在計(jì)算機(jī)內(nèi)存中表示文檔胯究。它把文檔內(nèi)容和其樣式結(jié)合在一起稍计。
-
瀏覽器顯示 DOM 的內(nèi)容
CSS引用方式
- 外部樣式表
保存為.css文件，如何用<link>元素引用裕循。這種方法可以說是最好的臣嚣，因?yàn)槟憧梢允褂靡粋€(gè)樣式表來設(shè)置多個(gè)文檔的樣式，并且需要更新 CSS 的時(shí)候只要在一個(gè)地方更新剥哑。 - 內(nèi)部樣式表
CSS 放置在<style>元素中茧球，該元素包含在 HTML head 內(nèi)。 - 內(nèi)聯(lián)樣式
<p style="color:red;">This is my first CSS example</p> 如非必要不要這樣做星持，很難維護(hù)。
CSS語法 (這部分需要?jiǎng)邮志?+ 隨時(shí)查詢文檔)
CSS聲明
如果使用了未知屬性弹灭，或者給屬性賦予了無效值督暂，該聲明會(huì)被視為無效，瀏覽器的 CSS 引擎會(huì)完全忽略它
CSS聲明塊
CSS 選擇器和規(guī)則
如果鏈或組中的某個(gè)選擇器無效穷吮，比如使用了未知的偽元素或偽類逻翁，整個(gè)組的選擇器仍然是有效的，除了這個(gè)無效的將被忽略的選擇器捡鱼。
CSS 語句
CSS 規(guī)則是樣式表的主要組成塊 —— 是你在 CSS 中最常見的塊八回。但這有一些其它類型的塊，你以后偶爾會(huì)碰上 —— CSS 規(guī)則只是被稱為 CSS 語句中的一種
@-規(guī)則(At-rules)在CSS中被用來傳遞元數(shù)據(jù)驾诈、條件信息或其它描述性信息缠诅。它由（@）符號(hào)開始，緊跟著一個(gè)表明它是哪種規(guī)則的描述符乍迄，之后是這種規(guī)則的語法塊闯两，并最終由一個(gè)半角分號(hào)（;）結(jié)束。每種由描述符定義的@-規(guī)則饥臂，都有其特有的內(nèi)部語法和語義隅熙。一些例子如下：
@charset 和 @import （元數(shù)據(jù)）
@media 或 @document （條件信息猛们，又被稱為嵌套語句弯淘，見下方庐橙。)
@font-face （描述性信息）
簡(jiǎn)寫
比如 font ,background,padding,border,magin允許一行設(shè)置多個(gè)屬性态鳖，使代碼簡(jiǎn)潔浆竭。
/* 在padding和margin這樣的簡(jiǎn)寫屬性中邦泄，值賦值的順序是top顺囊、right、bottom午乓、left硅瞧。它們還有其他簡(jiǎn)寫方式腕唧，例如給padding兩個(gè)值枣接，則第一個(gè)值表示top/bottom耳鸯，第二個(gè)值表示left/right */
padding: 10px 15px 15px 5px;
等同于
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
再比如：
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
等同于
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;
選擇器
- 簡(jiǎn)單選擇器（Simple selectors）：通過元素類型、class或者id匹配一個(gè)或多個(gè)元素财喳。
- 屬性選擇器（Attribute selectors）：通過 屬性 / 屬性值 匹配一個(gè)或多個(gè)元素耳高。
[attr]：該選擇器選擇包含 attr 屬性的所有元素泌枪，不論 attr 的值為何碌燕。
[attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素陆蟆。
[attr~=val]：該選擇器僅選擇具有 attr 屬性的元素改鲫，而且要求 val 值是 attr
[attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開頭的元素（注意，這里的 “-” 不是一個(gè)錯(cuò)誤，這是用來處理語言編碼的）截歉。
[attr^=val] : 選擇attr屬性的值以 val 開頭（包括 val）的元素瘪松。
[attr$=val] : 選擇attr屬性的值以 val 結(jié)尾（包括 val）的元素宵睦。
[attr*=val] : 選擇attr屬性的值中包含子字符串 val 的元素（一個(gè)子字符串就是一個(gè)字符串的一部分而已桐智，例如说庭，”cat“ 是 字符串 ”caterpillar“ 的子字符串）刊驴。
值包含的被空格分隔的取值列表里中的一個(gè)。
- 偽類（Pseudo-classes）：匹配處于確定狀態(tài)的一個(gè)或多個(gè)元素攻礼，比如被鼠標(biāo)指針懸停的元素，或當(dāng)前被選中或未選中的復(fù)選框太伊，或元素是DOM樹中一父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)。
a:link { color: blue } /* 未訪問鏈接 */
a:visited { color: purple } /* 已訪問鏈接 */
a:hover { font-weight: bold } /* 用戶鼠標(biāo)懸停 */
a:active { color: lime } /* 激活鏈接 */
- 偽元素（Pseudo-elements）:匹配處于相關(guān)的確定位置的一個(gè)或多個(gè)元素芳悲，例如每個(gè)段落的第一個(gè)字，或者某個(gè)元素之前生成的內(nèi)容肮韧。
q::before {
content: "?";
color: blue;
}
q::after {
content: "?";
color: red;
}
- 組合器（Combinators）：這里不僅僅是選擇器本身弄企，還有以有效的方式組合兩個(gè)或更多的選擇器用于非常特定的選擇的方法淋纲。例如，你可以只選擇divs的直系子節(jié)點(diǎn)的段落，或者直接跟在headings后面的段落为障。
| 名稱 | 組合器 | 選擇 |
|---|---|---|
| 選擇器組 | A,B | 匹配滿足A（和/或）B的任意元素 |
| 后代選擇器 | A B | 匹配B元素，滿足條件：B是A的后代結(jié)點(diǎn)（B是A的子節(jié)點(diǎn)，或者A的子節(jié)點(diǎn)的子節(jié)點(diǎn)） |
| 子選擇器 | A > B | 匹配B元素侦香，滿足條件：B是A的直接子節(jié)點(diǎn) |
| 相鄰兄弟選擇器 | A + B | 匹配B元素污朽，滿足條件：B是A的下一個(gè)兄弟節(jié)點(diǎn)（AB有相同的父結(jié)點(diǎn)矾睦，并且B緊跟在A的后面） |
| 通用兄弟選擇器 | A ~ B | 匹配B元素柬赐，滿足條件：B是A之后的兄弟節(jié)點(diǎn)中的任意一個(gè)（AB有相同的父節(jié)點(diǎn)州藕，B在A之后毁涉，但不一定是緊挨著A） |
- 多重選擇器（Multiple selectors）：這些也不是單獨(dú)的選擇器待牵；這個(gè)思路是將以逗號(hào)分隔開的多個(gè)選擇器放在一個(gè)CSS規(guī)則下面， 以將一組聲明應(yīng)用于由這些選擇器選擇的所有元素蛤袒。
h1, h2, h3, h4, h5, h6 {
font-family: helvetica, 'sans serif';
}
CSS數(shù)值與單位
數(shù)值
像素 (px) 是一種絕對(duì)單位（absolute units）询一， 因?yàn)闊o論其他相關(guān)的設(shè)置怎么變化，像素指定的值是不會(huì)變化的。其他的絕對(duì)單位如下：
- mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）
- pt, pc: 點(diǎn)（Points (1/72 of an inch)）及皂， 十二點(diǎn)活字（ picas (12 points.)）
也有相對(duì)單位又跛，他們是相對(duì)于當(dāng)前元素的字號(hào)（ font-size ）或者視口尺寸。
-
em:1em與當(dāng)前元素的字體大小相同（更具體地說济丘，一個(gè)大寫字母M的寬度）。CSS樣式被應(yīng)用之前峡碉，瀏覽器給網(wǎng)頁設(shè)置的默認(rèn)基礎(chǔ)字體大小是16像素近哟，這意味著對(duì)一個(gè)元素來說1em的計(jì)算值默認(rèn)為16像素。但是要小心—em單位是會(huì)繼承父元素的字體大小鲫寄，所以如果在父元素上設(shè)置了不同的字體大小吉执，em的像素值就會(huì)變得復(fù)雜。現(xiàn)在不要過于擔(dān)心這個(gè)問題地来，我們將在后面的文章和模塊中更詳細(xì)地介紹繼承和字體大小設(shè)置戳玫。em是Web開發(fā)中最常用的相對(duì)單位。 -
ex,ch: 分別是小寫x的高度和數(shù)字0的寬度未斑。這些并不像em那樣被普遍使用或很好地被支持咕宿。 -
rem: REM（root em）和em以同樣的方式工作，但它總是等于默認(rèn)基礎(chǔ)字體大小的尺寸蜡秽；繼承的字體大小將不起作用府阀，所以這聽起來像一個(gè)比em更好的選擇，雖然在舊版本的IE上不被支持（查看關(guān)于跨瀏覽器支持 Debugging CSS.) -
vw,vh: 分別是視口寬度的1/100和視口高度的1/100芽突，其次试浙，它不像rem那樣被廣泛支持。
- 0為無單位數(shù)值
百分比
針對(duì)父元素的百分比
顏色
- 關(guān)鍵詞
- 十六進(jìn)制值 如：#e0b0ff
- RGB 如 rgb(255,0,0)
- HSL 如 hsl(0,100%,50%)
- RGBA 和 HSLA 多了透明度 如rgba(255,0,0,0.5) hsla(240,100%,50%,0.5);
- 不透明度（Opacity）
函數(shù)
每當(dāng)你看到一個(gè)名字后跟著括號(hào),括號(hào)里包含用逗號(hào)分隔的一個(gè)或多個(gè)值,那么你所使用的就是一個(gè)函數(shù)寞蚌。例如:
/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90%-15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');
層疊和繼承
層疊性 ： 就近原則
一般情況下田巴，如果出現(xiàn)樣式?jīng)_突力细，則會(huì)按照CSS書寫的順序，以最后的樣式為準(zhǔn)固额。
- 樣式?jīng)_突，遵循的原則是就近原則煞聪。 那個(gè)樣式離著結(jié)構(gòu)近斗躏，就執(zhí)行那個(gè)樣式。
- 樣式不沖突昔脯，不會(huì)層疊
- 貢獻(xiàn)值
關(guān)于CSS權(quán)重啄糙，我們需要一套計(jì)算公式來去計(jì)算，這個(gè)就是 CSS Specificity云稚，我們稱為CSS 特性或稱非凡性隧饼，它是一個(gè)衡量CSS值優(yōu)先級(jí)的一個(gè)標(biāo)準(zhǔn) 具體規(guī)范入如下：
specificity用一個(gè)四位的數(shù) 字串(CSS2是三位)來表示，更像四個(gè)級(jí)別静陈，值從左到右燕雁，左面的最大，一級(jí)大于一級(jí)鲸拥，數(shù)位之間沒有進(jìn)制拐格，級(jí)別之間不可超越。
| 繼承或者* 的貢獻(xiàn)值 | 0,0,0,0 |
|---|---|
| 每個(gè)元素（標(biāo)簽）貢獻(xiàn)值為 | 0,0,0,1 |
| 每個(gè)類刑赶，偽類貢獻(xiàn)值為 | 0,0,1,0 |
| 每個(gè)ID貢獻(xiàn)值為 | 0,1,0,0 |
| 每個(gè)行內(nèi)樣式貢獻(xiàn)值 | 1,0,0,0 |
| 每個(gè)!important貢獻(xiàn)值 重要的 | ∞ 無窮大 |
權(quán)重是可以疊加的
比如的例子：
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
繼承性： 子承父業(yè)
所謂繼承性是指書寫CSS樣式表時(shí)捏浊，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)撞叨。想要設(shè)置一個(gè)可繼承的屬性金踪，只需將它應(yīng)用于父元素即可。
恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼牵敷，降低CSS樣式的復(fù)雜性胡岔。子元素可以繼承父元素的樣式（text-，font-劣领，line-這些元素開頭的都可以繼承姐军，以及color屬性）
CSS為處理繼承提供了四種特殊的通用屬性值：
-
inherit： 該值將應(yīng)用到選定元素的屬性值設(shè)置為與其父元素一樣。 -
initial：該值將應(yīng)用到選定元素的屬性值設(shè)置為與瀏覽器默認(rèn)樣式表中該元素設(shè)置的值一樣尖淘。如果瀏覽器默認(rèn)樣式表中沒有設(shè)置值奕锌，并且該屬性是自然繼承的，那么該屬性值就被設(shè)置為inherit村生。 -
unset：該值將屬性重置為其自然值惊暴，即如果屬性是自然繼承的，那么它就表現(xiàn)得像inherit趁桃，否則就是表現(xiàn)得像initial辽话。 -
revert：如果當(dāng)前的節(jié)點(diǎn)沒有應(yīng)用任何樣式肄鸽，則將該屬性恢復(fù)到它所擁有的值。換句話說油啤，屬性值被設(shè)置成自定義樣式所定義的屬性（如果被設(shè)置）典徘， 否則屬性值被設(shè)置成用戶代理的默認(rèn)樣式。
注意: initial 和 unset 不被IE支持益咬。
