參考書籍《HTML5 & CSS3編程入門經典》（By Rob Larsen）
Chapter 7 層疊樣式表
紀念已跪的面試
繼承：CSS的一項強大特性，當一個屬性被應用于某一元素后，該屬性經常會被子元素（規(guī)則聲明所在的元素中包含的元素）所“繼承”（inherited）冰沙。如果另一條規(guī)則更具體地指明所應用的元素馆类，它會覆蓋
<body>元素或任何包含元素中的任何相關聯(lián)的屬性。-
可以添加CSS規(guī)則的位置：
- 外部樣式表（external style sheet）：將CSS規(guī)則放在一個獨立文件中
- 內部樣式表（internal style sheet）：位于一個
<style>元素內，該元素位于文檔的<head>元素中 - 內聯(lián)樣式規(guī)則（inline style rule）：位于一個可以帶有style特性的元素中骄瓣，作為style特性的值
-
<link>元素：用于在網頁中描述兩個文檔之間的關系斟薇。這種鏈接類型與<a>元素不同师坎，因為兩個文檔是自動關聯(lián)的——用戶不必通過單擊任何東西以激活鏈接。<link>元素永遠是空元素堪滨，且當與樣式表一同使用時胯陋，它必須帶有兩個特性：rel和href。- rel特性：必須屬性袱箱。用于指定包含該鏈接的文檔與鏈接指向文檔間的關系遏乔。用于鏈接樣式表時的鍵值是“stylesheet”
- href特性：用于指定鏈接指向文檔的URL
- media特性：用于指定應該用于該文檔的輸出設備
<style>元素：使用時，盡管并非強制发笔，但應該永遠帶有type屬性外部樣式表的優(yōu)勢
-
CSS屬性：CSS規(guī)則包含了兩個部分：一個選擇器盟萨，用于指定規(guī)則應用的元素；以及一個或多個屬性了讨，用于控制這些元素的呈現(xiàn)捻激。屬性有如下分組：
- 字體
- 文本
- 背景
- 邊框
- 外邊距
- 內邊距
- 尺寸
- 定位
- 輪廓
- 表格
- 列表與標記
- 生成內容
- 分類
除此之外：還有一個新的CSS版本，即關注于“模塊”（module）的CSS3
-
控制文本
- font-family屬性：指定應用CSS規(guī)則的元素中所有文本所應使用的字型
- font-size屬性：為字體設置尺寸
- 長度：px em ex pt in cm pc mm rem vm vh
- 絕對尺寸：xx-small x-small small medium large x-large xx-large
- 相對尺寸：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:指定文本在包含元素中的水平對齊
- vertical-align：指定文本你在包含元素中的垂直對齊
- text-decoration：指定文本是否應具有下劃線残炮、上劃線或中劃線
- text-indent：指定從左側邊框起文本的鎖緊
- text-transform：指定元素內容應全部為大寫韭赘、小寫，或首字母大寫
- text-shadow：指定文本應具有投影
- text-spacing：控制字符間寬度
- word-spacing：控制單詞間的距離
- white-spacing：指定空格是否應該被壓縮势就、保留或阻止換行
- direction：指定文本行文方向（類似于dir特性）
-
文本偽類
- first-letter
- first-line
-
選擇器
- 通用選擇器：由一個“星號”（*）表示
- 類型選擇器：匹配所有在由逗號分隔的列表中指定的元素
- 類選擇器
- id選擇器：#
- 子選擇器：大于號>連接符
- 后代選擇器：連接符是空格
- 相鄰兄弟選擇器：連接符加號+
- 一般兄弟選擇器：連接符~
- 特性選擇器
-
長度
-
相對單位：
- px：一個像素即是屏幕分辨率中最小的單位
- em：1單位em與當前字體的高度等價泉瞻。em單位是最常用于測量包含文本的元素以及控制文本間距的長度單位脉漏。通常認為該值是從小寫字母m的寬度得出
- ex：應為小寫字母x的高度
- rem：與根元素的字體尺寸等價——即一個“根em”
- vh：等價于百分之一的視野高度
- vw：
-
絕對單位
- pt：磅
- pc：pica
- in：英寸
- cm：厘米
- mm：毫米
百分比：
-
-
盒子模型
三個重要屬性：border、margin袖牙、padding
對于外邊距而言侧巨，當一個盒子的下外邊距與另一個盒子的上外邊距相遇時，只有其中盒子尺寸較大的一個會顯示出來（如果兩個盒子尺寸相同鞭达，則外邊距為兩個外邊距中較大的一個）
-
border屬性：
border-color屬性：進一步設置border-bottom-color司忱、border-right-color、border-top-color畴蹭、border-left-color
-
border-style屬性：指定邊框為實現(xiàn)坦仍、虛線還是雙股線，或者其他可能取值叨襟。具體如下：
- none：不存在邊框（等價于border-width：0）
- solid：實心線
- dotted：一系列的點
- dashed：一系列短線
- double：兩條實心線
- groove：邊框具有切入效果
- ridge：與groove效果相反
- inset：使盒子看起來內嵌于頁面中
- outset：使盒子看起來突出于畫布之外
- hidden：與none相同繁扎，但作為表格元素的邊框沖突解決方案
同理設置border-bottom-style、border-right-style糊闽、border-top-style梳玫、border-left-style
border-width屬性：通常以像素為單位。同樣可設置border-bottom-width右犹、border-right-width提澎、border-top-width、border-left-width
縮略形式表達邊框屬性傀履，如p {border: 4px solid red;}值與值之間除空格外不能有任何內容虱朵。同理可設置border-bottom莉炉、border-right钓账、border-top、border-left
padding屬性：多數(shù)使用像素指定絮宁，可以使用任何之前介紹過的長度單位梆暮、百分比或關鍵字inherit。元素的內邊距默認不會繼承绍昂，除非使用關鍵字inherit啦粹。可指定每一邊的不同內邊距大芯接巍：padding-bottom唠椭、padding-top、padding-left忍饰、padding-right
marging屬性：取值與padding屬性完全相同
-
內容盒子的尺寸
- height：盒子高度
- width：盒子寬度
- line-height：文本行的高度（即行距）
- max-height：盒子最大高度
- min-height：盒子最小高度
- max-width：盒子最大寬度
- min-width：盒子最小寬度
-
overflow：用于處理當盒子內容比所允許空間更大時：
- hidden：溢出內容被隱藏
- visible：溢出內容在盒子外可見
- scroll：盒子將添加滾動條以允許用戶滾動查看其內容
- auto：盒子在必要時添加滾動條
- inherit：盒子從父元素繼承overflow屬性
W3C盒子模型和IE盒子模型
