閱讀本書主要目的：

自從學會CSS以來，雖然熟練掌握了其使用方法和技巧，但對其底層的原理和實現並不清晰，閱讀本書想進一步系統化的學習和深入研究其本質，對這門前端基礎語言從熟練使用到真正理解。 

第1章 CSS和文件

1.1 WEB的衰落（為了表現增加很多標記元素如font等，這些阻礙了頁面的結構化）

1.2 CSS作救星（95年W3C釋出正在進行的CSS計劃）

CSS特點：豐富的樣式；易於使用和維護；可以在多個頁面重複使用；方便層疊；縮減檔案大小；為將來做準備（為解決HTML結構化而生，實現結構和表現分離）

1.3 元素（文件結構的基礎，至少在CSS2.1中，每個元素生成一個框，也成為盒）

　　替換元素：用來替換元素內容的部分並未由文件內容直接表示，如img、input等

　　非替換元素：大多數都屬於非替換元素，內容由使用者在元素本身生成的框中顯示，如段落、標題、單元格等

　　元素顯示角色（塊級元素：生成一個元素框，它會填充其父元素的內容區；行內元素：在一個文字行內生成元素框，而不會打斷這行文字）

　　在HTML和XHTML中塊級元素不能巢狀在行內元素中，但在CSS中對巢狀沒有任何限制

1.4 結合CSS和XHTML（外部、內聯、匯入、行內）

<link rel="stylesheet" type="text/css" href="sheet.css" media="all" />
<!--link標記（外部樣式表），link必須放在head內，rel“關係”（relation），media樣式應用的媒體型別（大部分型別不被支援）-->
 

<style type="text/css">
...
</style><!--style元素（內聯樣式表）-->

@import url(sheet2.css);
/*@import指令（匯入樣式表），此指令寫在樣式檔案中或style元素內*/

<p style="...">test</p><!--行內樣式表，不推薦，因為不利於內容和表現的分離-->

第2章 選擇器

2.1 基本規則

　　CSS的核心特性是向文件中的一組元素型別應用某些規則；每個規則由選擇器和宣告塊組成

2.2 分組

h2,p{ color:green}/*選擇器分組:為多個元素應用同一樣式*/
/*宣告分組：為一個元素應用多個宣告*/
h3{color:orange;}
h3{ font-size:18px;}
 

2.3 類選擇器和ID選擇器

　　多類選擇器：通過將多個類選擇器連線在一起，僅可選擇同時包含這些類的元素（類名順序不限）

.warning.urgent{background:red;}/*注意中間不含空格：同時包含不限順序，可以是class="urgent warning"*/

　　ID選擇器與類選擇器類似，但它僅適用一次

2.4 屬性選擇器

img[alt]{border:solid 1px red;}  /*簡單屬性選擇，選擇有此屬性的元素，不論屬性是何值*/
a[title="w3c"]{color:red;} /*根據具體屬性值選擇，選擇屬性值為指定值的元素*/
p[class~="warning"]{color:red;} /*根據部分屬性值選擇，選擇屬性值含有指定值的元素*/
*[foo^="bar"]{color:red;}/*選擇foo屬性以“bar”開頭的所有元素*/
*[foo$="bar"]{color:red;}/*選擇foo屬性以“bar”結尾的所有元素*/
*[foo*="bar"]{color:red;}/*選擇foo屬性包含“bar”的所有元素*/
*[lang|="en"]{color:red;}/*選擇lang屬性等於“en”或以“en-”開頭的所有元素*/

2.5 使用文件結構

h1 em{color:red;} /*後代選擇器*/
h2>strong{color:red;} /*選擇子元素，即只選擇h2的子元素（而不是後代元素）strong元素*/
h3+p{color:red;} /*選擇相鄰元素，即選擇h3緊接的p元素，且兩者有相同父元素*/

2.6 偽類和偽元素

a:link{color:blue;}   /*選擇超連結（含有href屬性）*/
a:visited{color:purple;} /*已訪問狀態的超連結*/
a:hover{color:red;}    /*滑鼠懸停狀態的超連結*/
a:active{color:orange;}    /*滑鼠啟用（按下）狀態的超連結*/
input:focus{color:green;} /*獲取焦點狀態的輸入框*/
p:first-child{color:red;} /*選擇第一個元素，即第一個p元素*/
*:lang( ) /*等價於|=屬性選擇器*/
a:link:hover{color:red;}/*結合偽類，即合併書寫，注意不要把互斥的偽類結合使用*/

p:first-letter{color:red;} /*首字母，只用於標記或段落*/
p:first-line{color:red;} /*首行，只用於標記或段落*/
h2:before{content:" ";}/*之前元素，偽元素特有屬性content*/
h2:after{content:" ";} /*之後元素，設定content才能使其置於文件結構中*/

第3章 結構和層疊

3.1 特殊性

/*特殊性值表示為：0,0,0,0(即：行內，ID，類或屬性或偽類，元素或偽元素)*/
p+em{color:red;} /*0,0,0,2*/
.warning em{color:red;} /*0,0,1,1*/
ul#menu li.active{color:red;}  /*0,1,1,2*/
*{color:black;}/*0,0,0,0，萬用字元特殊行為0*/
div[id="nav"]{} /*0,0,1,1，ID屬性選擇區別於ID選擇器*/
p.drak{color:#333 !important;} /*重要宣告，此規則總會優先*/

3.2 繼承（繼承沒有特殊性，連0都沒有，所以萬用字元的0特殊性>繼承的無特殊性）

3.3 層疊（按權重和來源排序，按特殊性排序，按順序排序（連結偽類順序LVHA））

第4章 值和單位

4.1 數字

4.2 百分數

4.3 顏色（命名，RGB，十六進位制）

/*CSS中定義的17個顏色名*/
aqua(淺綠)  fuchsia(紫紅)  lime(綠黃)   olive(橄欖)   red  　　 white
black  　　 gray  　　　　　maroon(褐紅) orange  　　  silver   yellow
blue  　　　green  　　　　 navy(深藍)   purple(紫色)  teal(青色)

4.4 長度單位

　　絕對長度（web幾乎不用）：英寸（in）、釐米（cm）、毫米（mm）、點（pt）、派卡（pc）

　　相對長度：em和ex，畫素長度（px），相對根元素rem

4.5 URL

4.6 CSS2單位

　　角度值：度（deg）、梯度（grad）和弧度（rad），直角可以宣告為90deg=100grad=1.57rad

　　時間值：毫秒（ms、秒（s），時間不能為負值

　　頻率值：赫茲（Hz）、兆赫（MHz）

4.7 其他值

　　關鍵字：none（空值）、inherit（繼承）

第5章 字型

5.1 字體系列（font-family）

5.2 字型加粗（font-weight）

5.3 字型大小（font-size）

5.4 風格和變形（font-style和font-variant）

5.5 拉伸和調整字型（font-stretch和font-size-adjust）

5.6 font屬性

5.7 字型匹配 

　　CSS2可以通過@font-face對字型匹配更多控制，可以在文件中下載一個遠端字型來使用

@font-face {font-family: DeliciousRoman;src: url('Delicious-Roman.otf');}
/*先引入，再使用*/
p {font-family: DeliciousRoman, Helvetica, Arial, sans-serif;}

第6章 文字屬性

6.1 縮排和水平對齊（text-indent和text-align）

6.2 垂直對齊（line-height）

　　垂直對齊文字（vertical-align）只應用於行內元素和替換元素，如影象和表單；上標和下標super和sub；

6.3 字間隔和字母間隔（word-spacing和letter-spacing）

6.4 文字轉換（text-transform：大小寫轉換）

6.5 文字裝飾（text-decoration）

6.6 文字陰影（text-shadow） 

第7章 基本視覺格式化

7.1 基本框

7.2 塊級元素（block）

7.3 行內元素（inline）

7.4 改變元素顯示（display設定）

　　行內塊元素（inline-block）

第8章 內邊距、邊框和外邊距

8.1 基本元素框

8.2 外邊距（margin）

8.3 邊框（border）

8.4 內邊距（padding）

第9章 顏色和背景

9.1 顏色

9.2 前景色（color）

9.3 背景（background或background-color、background-images）

第10章 浮動和定位

10.1 浮動（float：left|right|none|inherit）

　　清除浮動（clear：left|right|both|none|inherit）

10.2 定位（position：static|relative|absolute|fixed|inherit）

　　偏移屬性（top|right|bottom|left）

　　內容溢位（overflow：visible|hidden|scroll|auto|inherit）

　　內容剪裁（clip：ract(top,right,bottom,left)|auto|inherit）

　　元素可見性（visibility：visible|hidden|collapse|inherit）

　　Z軸上的放置（z-index）

第11章 表佈局

11.1 表格式化

　　表顯示值display：inline-table、table-row（tr）、table-row-group（tbody）、table-header-group（thead）、table-footer-group（tfoot）、table-column（col）、table-column-group（colgroup）、table-cell（th或td）、table-caption

11.2 表單元格邊框

　　表格邊框模型（border-collapse:collapse（合併）|separate（分隔）|inherit）

　　邊框間隔（border-spacing:<length><length>?|inherit）

11.3 表大小

　　寬度：固定佈局和自動佈局

　　高度和對齊

第12章 列表與生成內容

12.1 列表

　　列表型別（list-style-type）、列表項影象（list-style-image）、列表項位置（list-style-position）

12.2 生成內容

　　 使用before和after偽類生成，設定content值；計數器的應用

第13章 使用者和介面樣式

13.1 系統字型和顏色

13.2 游標（cursor）

13.3 輪廓（outline）

第14章 非螢幕媒體

14.1 設計特定於媒體的樣式表

14.2 分頁媒體

14.3 聲音樣式