參考書籍《HTML5 & CSS3編程入門經(jīng)典》（By Rob Larsen）
Chapter 7 層疊樣式表
紀(jì)念已跪的面試
繼承：CSS的一項(xiàng)強(qiáng)大特性，當(dāng)一個(gè)屬性被應(yīng)用于某一元素后，該屬性經(jīng)常會(huì)被子元素（規(guī)則聲明所在的元素中包含的元素）所“繼承”（inherited）。如果另一條規(guī)則更具體地指明所應(yīng)用的元素，它會(huì)覆蓋
<body>元素或任何包含元素中的任何相關(guān)聯(lián)的屬性。-
可以添加CSS規(guī)則的位置：
- 外部樣式表（external style sheet）：將CSS規(guī)則放在一個(gè)獨(dú)立文件中
- 內(nèi)部樣式表（internal style sheet）：位于一個(gè)
<style>元素內(nèi)，該元素位于文檔的<head>元素中 - 內(nèi)聯(lián)樣式規(guī)則（inline style rule）：位于一個(gè)可以帶有style特性的元素中，作為style特性的值
-
<link>元素：用于在網(wǎng)頁(yè)中描述兩個(gè)文檔之間的關(guān)系。這種鏈接類型與<a>元素不同，因?yàn)閮蓚€(gè)文檔是自動(dòng)關(guān)聯(lián)的——用戶不必通過(guò)單擊任何東西以激活鏈接。<link>元素永遠(yuǎn)是空元素，且當(dāng)與樣式表一同使用時(shí)，它必須帶有兩個(gè)特性：rel和href。- rel特性：必須屬性。用于指定包含該鏈接的文檔與鏈接指向文檔間的關(guān)系。用于鏈接樣式表時(shí)的鍵值是“stylesheet”
- href特性：用于指定鏈接指向文檔的URL
- media特性：用于指定應(yīng)該用于該文檔的輸出設(shè)備
<style>元素：使用時(shí)，盡管并非強(qiáng)制，但應(yīng)該永遠(yuǎn)帶有type屬性外部樣式表的優(yōu)勢(shì)
-
CSS屬性：CSS規(guī)則包含了兩個(gè)部分：一個(gè)選擇器，用于指定規(guī)則應(yīng)用的元素；以及一個(gè)或多個(gè)屬性，用于控制這些元素的呈現(xiàn)。屬性有如下分組：
- 字體
- 文本
- 背景
- 邊框
- 外邊距
- 內(nèi)邊距
- 尺寸
- 定位
- 輪廓
- 表格
- 列表與標(biāo)記
- 生成內(nèi)容
- 分類
除此之外：還有一個(gè)新的CSS版本，即關(guān)注于“模塊”（module）的CSS3
-
控制文本
- font-family屬性：指定應(yīng)用CSS規(guī)則的元素中所有文本所應(yīng)使用的字型
- font-size屬性：為字體設(shè)置尺寸
- 長(zhǎng)度：px em ex pt in cm pc mm rem vm vh
- 絕對(duì)尺寸：xx-small x-small small medium large x-large xx-large
- 相對(duì)尺寸：smaller larger
- 百分比：2% 10% 25% 50% 100%
- font-weight：基于瀏覽器算法，可能取值為：normal bold bolder lighter 100 200 300 400 500 600 700 800 900
- font-style屬性：指定字體為normal、italic（斜體）、oblique（偽斜體）
- font-variant屬性：可能去職：normal和small-caps（小型大寫字體）
-
文本格式化
- color：指定文本顏色
- text-align:指定文本在包含元素中的水平對(duì)齊
- vertical-align：指定文本你在包含元素中的垂直對(duì)齊
- text-decoration：指定文本是否應(yīng)具有下劃線、上劃線或中劃線
- text-indent：指定從左側(cè)邊框起文本的鎖緊
- text-transform：指定元素內(nèi)容應(yīng)全部為大寫、小寫，或首字母大寫
- text-shadow：指定文本應(yīng)具有投影
- text-spacing：控制字符間寬度
- word-spacing：控制單詞間的距離
- white-spacing：指定空格是否應(yīng)該被壓縮、保留或阻止換行
- direction：指定文本行文方向（類似于dir特性）
-
文本偽類
- first-letter
- first-line
-
選擇器
- 通用選擇器：由一個(gè)“星號(hào)”（*）表示
- 類型選擇器：匹配所有在由逗號(hào)分隔的列表中指定的元素
- 類選擇器
- id選擇器：#
- 子選擇器：大于號(hào)>連接符
- 后代選擇器：連接符是空格
- 相鄰兄弟選擇器：連接符加號(hào)+
- 一般兄弟選擇器：連接符~
- 特性選擇器
-
長(zhǎng)度
-
相對(duì)單位：
- px：一個(gè)像素即是屏幕分辨率中最小的單位
- em：1單位em與當(dāng)前字體的高度等價(jià)。em單位是最常用于測(cè)量包含文本的元素以及控制文本間距的長(zhǎng)度單位。通常認(rèn)為該值是從小寫字母m的寬度得出
- ex：應(yīng)為小寫字母x的高度
- rem：與根元素的字體尺寸等價(jià)——即一個(gè)“根em”
- vh：等價(jià)于百分之一的視野高度
- vw：
-
絕對(duì)單位
- pt：磅
- pc：pica
- in：英寸
- cm：厘米
- mm：毫米
百分比：
-
-
盒子模型
三個(gè)重要屬性：border、margin、padding
對(duì)于外邊距而言，當(dāng)一個(gè)盒子的下外邊距與另一個(gè)盒子的上外邊距相遇時(shí)，只有其中盒子尺寸較大的一個(gè)會(huì)顯示出來(lái)（如果兩個(gè)盒子尺寸相同，則外邊距為兩個(gè)外邊距中較大的一個(gè)）
-
border屬性：
border-color屬性：進(jìn)一步設(shè)置border-bottom-color、border-right-color、border-top-color、border-left-color
-
border-style屬性：指定邊框?yàn)閷?shí)現(xiàn)、虛線還是雙股線，或者其他可能取值。具體如下：
- none：不存在邊框（等價(jià)于border-width：0）
- solid：實(shí)心線
- dotted：一系列的點(diǎn)
- dashed：一系列短線
- double：兩條實(shí)心線
- groove：邊框具有切入效果
- ridge：與groove效果相反
- inset：使盒子看起來(lái)內(nèi)嵌于頁(yè)面中
- outset：使盒子看起來(lái)突出于畫布之外
- hidden：與none相同，但作為表格元素的邊框沖突解決方案
同理設(shè)置border-bottom-style、border-right-style、border-top-style、border-left-style
border-width屬性：通常以像素為單位。同樣可設(shè)置border-bottom-width、border-right-width、border-top-width、border-left-width
縮略形式表達(dá)邊框?qū)傩?，如p {border: 4px solid red;}值與值之間除空格外不能有任何內(nèi)容。同理可設(shè)置border-bottom、border-right、border-top、border-left
padding屬性：多數(shù)使用像素指定，可以使用任何之前介紹過(guò)的長(zhǎng)度單位、百分比或關(guān)鍵字inherit。元素的內(nèi)邊距默認(rèn)不會(huì)繼承，除非使用關(guān)鍵字inherit?？芍付恳贿叺牟煌瑑?nèi)邊距大小：padding-bottom、padding-top、padding-left、padding-right
marging屬性：取值與padding屬性完全相同
-
內(nèi)容盒子的尺寸
- height：盒子高度
- width：盒子寬度
- line-height：文本行的高度（即行距）
- max-height：盒子最大高度
- min-height：盒子最小高度
- max-width：盒子最大寬度
- min-width：盒子最小寬度
-
overflow：用于處理當(dāng)盒子內(nèi)容比所允許空間更大時(shí)：
- hidden：溢出內(nèi)容被隱藏
- visible：溢出內(nèi)容在盒子外可見
- scroll：盒子將添加滾動(dòng)條以允許用戶滾動(dòng)查看其內(nèi)容
- auto：盒子在必要時(shí)添加滾動(dòng)條
- inherit：盒子從父元素繼承overflow屬性
W3C盒子模型和IE盒子模型
