閱讀本書主要目的： 自從學會CSS以來，雖然熟練掌握了其使用方法和技巧，但對其底層的原理和實現並不清晰，閱讀本書想進一步系統化的學習和深入研究其本質，對這門前端基礎語言從熟練使用到真正理解。 第1章 CSS和文檔 1.1 WEB的衰落（為了表現增加很多標記元素如font等，這些阻礙了頁面的結構化） ...
閱讀本書主要目的：
自從學會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 聲音樣式
