CSS 權威指南 (第4版)

本書涵蓋以下內容：選擇符、特指度和層疊。
值、單位、字體和文本屬性。
內邊距、邊框、輪廓和外邊距。
顏色、背景和漸變。
浮動和定位。
彈性盒佈局。
全新的柵格佈局系統。
2D和3D變形、過渡和動畫。
濾鏡、混合、裁剪和遮罩。
媒體查詢和特性查詢。

Eric A. Meyer，是國際公認的 HTML、CSS和Web標準領域的專家，是Complex Spiral Consulting公司的創始人，還是微格式運動的發起人之一，以及設計領域系列會議An Event Apart的創始人之一。他是本書前一版和其他多本關於CSS和設計的圖書的作者。他的個人網站為meyerweb.com。
Estelle Weyl，是開放Web佈道師和社區工程師，從1999年起就開始開發符合標準且具有可訪問性的網站。她的博客地址是standardista.com，那裡的文章討論一切與前端有關的話題，包括CSS3、HTML5、JavaScript性能、可訪問性和移動Web開發。她喜歡躺在家中的沙發上編程，也經常遊歷世界，並在各種會議上演講。

上冊
前言 .1
第 1 章 CSS和文檔 9
1.1 Web樣式簡介 9
1.2 元素 .10
1.2.1 置換元素和非置換元素 10
1.2.2 元素的顯示方式 11
1.3 把 CSS 應用到 HTML 上 15
1.3.1 link 標簽 16
1.3.2 style 元素 20
1.3.3 @import 指令 21
1.3.4 HTTP 鏈接 22
1.3.5 行內樣式 .23
1.4 樣式表中的內容.24
1.4.1 標記 24
1.4.2 規則的結構 24
1.4.3 廠商前綴 .25
1.4.4 處理空白 .26
1.4.5 CSS 注釋 27
1.5 媒體查詢 .28
1.5.1 用法 28
1.5.2 簡單的媒體查詢 28
1.5.3 媒體類型 .29
1.5.4 媒體描述符 30
1.5.5 媒體特性描述符和值的類型 32
1.6 特性查詢 .32
1.7 小結 .35
第2章 選擇符 .37
2.1 樣式的基本規則.37
2.1.1 元素選擇符 38
2.1.2 聲明和關鍵字 39
2.2 群組 .42
2.2.1 群組選擇符 42
2.2.2 群組聲明 .44
2.2.3 二者結合 .45
2.2.4 在舊瀏覽器中使用新元素.46
2.3 類選擇符和 ID 選擇符 47
2.3.1 類選擇符 .47
2.3.2 多個類 50
2.3.3 ID 選擇符 .51
2.3.4 在類選擇符和 ID 選擇符之間選擇.52
2.4 屬性選擇符 53
2.4.1 簡單屬性選擇符 53
2.4.2 根據精准的屬性值選擇 55
2.4.3 根據部分屬性值選擇 57
2.4.4 不區分大小寫的標識符 62
2.5 根據文檔結構選擇 63
2.5.1 理解父子關係 63
2.5.2 後代選擇符 65
2.5.3 選擇子元素 68
2.5.4 選擇緊鄰同胞元素 69
2.5.5 選擇後續同胞 71
2.6 偽類選擇符 71
2.6.1 拼接偽類 .72
2.6.2 結構偽類 .73
2.6.3 動態偽類 .86
2.6.4 UI 狀態偽類 90
2.6.5 :target 偽類 96
2.6.6 :lang 偽類 97
2.6.7 否定偽類 .98
2.7 偽元素選擇符 100
2.7.1 裝飾首字母 101
2.7.2 裝飾首行 . 102
2.7.3 對 ::first-letter 和 ::first-line 的限制 103
2.7.4 裝飾(或創建)前置和後置內容元素 103
2.8 小結 . 104
第 3 章 特指度和層疊 105
3.1 特指度 105
3.1.1 聲明和特指度 107
3.1.2 通用選擇符的特指度 109
3.1.3 ID 和屬性選擇符的特指度 109
3.1.4 行內樣式的特指度 109
3.1.5 重要性 110
3.2 繼承 . 111
3.3 層疊 . 114
3.3.1 按權重和來源排序 115
3.3.2 按特指度排序 117
3.3.3 按前後位置排序 117
3.3.4 CSS 之外的表現提示 . 119
3.4 小結 . 120
第 4 章 值和單位 121
4.1 關鍵字、字符串和其他文本值 . 121
4.1.1 關鍵字 121
4.1.2 字符串 124
4.1.3 URL 125
4.1.4 圖像 . 126
4.1.5 標識符 127
4.2 數字和百分數 127
4.2.1 整數 . 127
4.2.2 數字 . 128
4.2.3 百分數 128
4.2.4 彈性值 128
4.3 距離 . 128
4.3.1 絕對長度單位 129
4.3.2 分辨率單位 131
4.3.3 相對長度單位 132
4.4 計算值 138
4.5 屬性值 139
4.6 顏色 . 140
4.6.1 具名顏色 . 140
4.6.2 RGB 和 RGBa 顏色 141
4.6.3 HSL 和 HSLa 顏色 . 146
4.6.4 顏色關鍵字 149
4.7 角度 . 149
4.8 時間和頻率 150
4.9 位置 . 151
4.10 自定義值 . 151
第 5 章 字體 155
5.1 字體族 155
5.1.1 使用通用字體族 156
5.1.2 指定字體族 157
5.2 使用 @font-face . 160
5.2.1 必須的描述符 161
5.2.2 其他字體描述符 166
5.2.3 組合描述符 169
5.3 字重 . 172
5.3.1 字重的工作方式 173
5.3.2 增大字重 . 175
5.3.3 減小字重 . 178
5.3.4 font-weight 描述符. 179
5.4 字號 . 180
5.4.1 絕對大小 . 181
5.4.2 相對大小 . 183
5.4.3 百分數和 em 184
5.4.4 字號的繼承 185
5.4.5 使用長度單位 188
5.4.6 自動調整字號 189
5.5 字形 . 191
5.6 字體拉伸 . 195
5.7 字距調整 . 198
5.8 字體變形 . 198
5.8.1 Level 3 新增的值 200
5.8.2 font-variant 描述符 201
5.9 字體特性 . 202
5.10 字體合成 . 204
5.11 font 屬性 . 206
5.11.1 加入行高 207
5.11.2 正確使用簡寫 208
5.11.3 使用系統字體 209
5.12 字體匹配機制 210
5.13 小結 . 212
第 6 章 文本屬性 213
6.1 縮進和行內對齊. 213
6.1.1 縮進文本 . 214
6.1.2 文本對齊 . 217
6.1.3 對齊最後一行 220
6.2 塊級對齊 . 222
6.2.1 行的高度 . 222
6.2.2 縱向對齊文本 226
6.3 單詞間距和字符間距 . 231
6.3.1 單詞間距 . 231
6.3.2 字符間距 . 233
6.3.3 對齊方式對間距的影響 234
6.4 文本轉換 . 235
6.5 文本裝飾 . 237
6.6 文本渲染效果 241
6.7 文本陰影 . 242
6.8 處理空白 . 244
6.9 換行和斷字 248
6.10 書寫模式 . 254
6.10.1 設定書寫模式 254
6.10.2 改變文本方向 258
6.10.3 聲明方向 259
6.11 小結 . 261
第 7 章 視覺格式化基礎 .262
7.1 元素框基礎 262
7.1.1 重要概念概覽 263
7.1.2 容納塊 264
7.2 調整元素的顯示方式 . 265
7.2.1 改變顯示方式 266
7.2.2 塊級框 268
7.2.3 橫向格式化 270
7.2.4 橫向格式化屬性 271
7.2.5 使用 auto . 272
7.2.6 多個 auto . 273
7.2.7 負外邊距 . 275
7.2.8 百分數 276
7.2.9 置換元素 . 277
7.2.10 縱向格式化 . 278
7.2.11 縱向格式化屬性 . 279
7.2.12 百分數高度 . 280
7.2.13 自動調整高度 282
7.2.14 折疊縱向外邊距 . 283
7.2.15 負外邊距和折疊 . 285
7.2.16 列表項目 287
7.3 行內元素 . 288
7.3.1 行佈局 288
7.3.2 基本術語和概念 290
7.3.3 行內格式化 292
7.3.4 行內非置換元素 293
7.3.5 行內置換元素 305
7.3.6 行內塊級元素 309
7.3.7 流動顯示方式 312
7.3.8 contents 顯示方式 313
7.3.9 display 的其他值 314
7.3.10 計算值 . 314
7.4 小結 . 315
第 8 章 內邊距、邊框、輪廓和外邊距 316
8.1 基本元素框 316
8.2 內邊距 319
8.2.1 複值 . 321
8.2.2 單邊內邊距 323
8.2.3 內邊距的百分數值 324
8.2.4 行內元素的內邊距 326
8.2.5 置換元素的內邊距 328
8.3 邊框 . 329
8.3.1 邊框的式樣 330
8.3.2 邊框寬度 . 334
8.3.3 邊框顏色 . 337
8.3.4 簡寫的邊框屬性 340
8.3.5 整個邊框 . 342
8.3.6 行內元素的邊框 343
8.3.7 圓角邊框 . 344
8.3.8 圖像邊框 . 352
8.4 輪廓 . 369
8.4.1 輪廓式樣 . 369
8.4.2 輪廓寬度 . 370
8.4.3 輪廓顏色 . 371
8.4.4 唯一的輪廓簡寫屬性 373
8.4.5 輪廓與邊框的區別 373
8.5 外邊距 375
8.5.1 外邊距的長度值 377
8.5.2 外邊距的百分數值 377
8.5.3 單邊外邊距屬性 378
8.5.4 外邊距折疊 379
8.5.5 負外邊距 . 381
8.5.6 行內元素的外邊距 383
8.6 小結 . 385
第 9 章 顏色、背景和漸變 .386
9.1 顏色 . 386
9.1.1 前景色 386
9.1.2 對邊框的影響 388
9.1.3 對表單元素的影響 390
9.1.4 繼承顏色 . 391
9.2 背景 . 391
9.2.1 背景色 391
9.2.2 裁剪背景 . 395
9.2.3 背景圖 398
9.2.4 背景定位 . 402
9.2.5 改變定位框 411
9.2.6 背景重複方式(或不重複) 415
9.2.7 背景粘附 . 425
9.2.8 控制背景圖的尺寸 430
9.2.9 寫為一個屬性 438
9.2.10 多個背景 440
9.3 漸變 . 447
9.3.1 線性漸變 . 447
9.3.2 徑向漸變 . 461
9.3.3 處理漸變圖像 473
9.3.4 循環漸變 . 475
9.4 盒子投影 . 479
9.5 小結 . 482

下冊
第10章 浮動及其形狀 483
10.1 浮動 . 483
10.1.1 浮動的元素 . 484
10.1.2 浮動詳解 487
10.1.3 具體行為 494
10.1.4 浮動元素與內容重疊 . 499
10.2 清除浮動 . 500
10.3 浮動形狀 . 504
10.3.1 定義形狀 505
10.3.2 使用透明圖像定義形狀 517
10.3.3 為形狀添加外邊距 519
10.4 小結 . 521
第11章 定位 522
11.1 基本概念 . 522
11.1.1 定位的類型 . 522
11.1.2 容納塊 . 524
11.2 偏移屬性 . 525
11.3 寬度和高度 . 527
11.3.1 設定寬度和高度 . 527
11.3.2 限制寬度和高度 . 529
11.4 內容溢出和裁剪 . 532
11.5 元素的可見性 534
11.6 絕對定位 . 536
11.6.1 絕對定位元素的容納塊 536
11.6.2 絕對定位元素的位置和尺寸 539
11.6.3 自動確定邊界的位置 . 541
11.6.4 非置換元素的位置和尺寸 . 543
11.6.5 置換元素的位置和尺寸 547
11.6.6 Z 軸上的位置 550
11.7 固定定位 . 555
11.8 相對定位 . 556
11.9 粘滯定位 . 559
11.10 小結 563
第12章 彈性盒佈局 564
12.1 彈性盒基礎 . 564
12.2 彈性容器 . 570
12.2.1 flex-direction屬性. 571
12.2.2 其他書寫方向 575
12.2.3 換行 577
12.2.4 定義彈性流 . 579
12.2.5 flex-wrap 續談 . 585
12.3 佈置彈性元素 587
12.4 彈性容器 . 588
12.5 調整內容 . 588
12.6 對齊元素 . 596
12.6.1 起邊、終邊和居中對齊 601
12.6.2 基線對齊 603
12.6.3 補充說明 604
12.7 align-self屬性 605
12.8 對齊內容 . 606
12.9 彈性元素 . 612
12.9.1 彈性元素是什麼 . 612
12.9.2 彈性元素的特性 . 613
12.9.3 最小寬度 615
12.10適用於彈性元素的屬性 616
12.11 flex 屬性 . 616
12.12 flex-grow屬性 618
12.13 flex-shrink屬性 . 625
12.13.1 根據寬度和縮減因子按比例縮小 . 629
12.13.2 不同的基準 . 630
12.13.3 響應式彈性佈局 632
12.14 flex-basis屬性 635
12.14.1 content關鍵字 . 636
12.14.2 自動確定彈性基準 636
12.14.3 默認值 . 639
12.14.4 長度單位 639
12.14.5 零基準 . 644
12.15 flex簡寫屬性 645
12.16 order屬性 650
第13章 柵格佈局 657
13.1創建柵格容器 . 657
13.2基本的柵格術語 660
13.3放置柵格線 662
13.3.1 寬度固定的柵格軌道 . 665
13.3.2 彈性柵格軌道 669
13.3.3 根據軌道中的內容適配 677
13.3.4 重複柵格線 . 679
13.3.5 柵格區域 683
13.4 在柵格中附加元素 690
13.4.1 使用列線和行線 . 690
13.4.2 行和列的簡寫屬性 695
13.4.3 隱式柵格 698
13.4.4 錯誤處理 701
13.4.5 使用區域 702
13.4.6 柵格元素重疊 705
13.5 柵格流 706
13.6 自動增加柵格線 . 711
13.7 grid簡寫屬性 . 714
13.8 釋放柵格空間 718
13.8.1 欄距 718
13.8.2柵格元素與盒模型 721
13.9 柵格的對齊方式 . 726
13.9.1 縱向對齊和橫向對齊單個元素 . 727
13.9.2 縱向對齊和橫向對齊全部元素 . 728
13.10 分層和排序 732
13.11 小結 734
第14章 CSS中的表格佈局 .735
14.1 表格格式化 . 735
14.1.1 表格的視覺排布 . 735
14.1.2 設定顯示方式的值 737
14.1.3 匿名表格對象 742
14.1.4 表格中的層 . 746
14.1.5 表題 748
14.2 單元格的邊框 749
14.2.1 分離單元格的邊框 750
14.2.2 折疊單元格的邊框 753
14.3 表格的尺寸 . 758
14.3.1 寬度 758
14.3.2 高度 765
14.3.3 對齊方式 766
14.4 小結 . 769
第15章 列表和生成的內容 .770
15.1 列表 . 770
15.1.1 列表的類型 . 771
15.1.2 列表項目圖像 774
15.1.3 列表記號的位置 . 778
15.1.4 列表樣式的簡寫屬性 . 779
15.1.5 列表的佈局 . 780
15.2 生成的內容 . 784
15.2.1 插入生成的內容 . 784
15.2.2 指定內容 787
15.2.3 計數器 . 793
15.3 定義計數模式 801
15.3.1 固定計數模式 803
15.3.2 循環計數模式 805
15.3.3 符號計數模式 810
15.3.4 字母計數模式 814
15.3.5 數字計數模式 815
15.3.6 累加計數模式 819
15.3.7 擴展計數模式 821
15.3.8 發音計數模式 823
15.4 小結 . 824
第16章 變形 825
16.1 坐標系 825
16.2 變形 . 829
16.3 其他變形屬性 848
16.3.1 移動原點 848
16.3.2 選擇3D變形方式 852
16.3.3 修改視域 855
16.3.4 處理背面 859
16.4 小結 . 861
第17章 過渡 862
17.1 CSS過渡 862
17.2 定義過渡的屬性 . 864
17.2.1 限制受過渡影響的屬性 868
17.2.2 設置過渡持續時間 874
17.2.3 調整過渡的內部時序 . 877
17.2.4 延遲過渡 882
17.2.5 transition簡寫屬性 . 885
17.3 反向過渡：退回起點 . 887
17.4 支持動畫的屬性和值 . 891
17.5 過渡是效果增強 . 896
17.6 打印過渡 . 896
第18章 動畫 897
18.1 定義關鍵幀 . 898
18.2 設置關鍵幀動畫 . 899
18.3 關鍵幀選擇符 900
18.3.1 省略from和to值 . 901
18.3.2 重複關鍵幀屬性 . 903
18.3.3 支持動畫的屬性 . 903
18.3.4 不支持動畫但不被忽略的屬性 . 905
18.3.5 通過腳本編輯@keyframes動畫 . 905
18.4 把動畫應用到元素上 . 906
18.4.1 指定動畫的名稱 . 906
18.4.2 定義動畫的時長 . 909
18.4.3 聲明動畫的迭代次數 . 911
18.4.4 設置動畫的播放方向 . 912
18.4.5 延遲播放動畫 914
18.4.6 動畫事件 916
18.4.7 改變動畫的內部時序 . 925
18.4.8 設置動畫的播放狀態 . 938
18.4.9 動畫的填充模式 . 938
18.5 寫為一個屬性 941
18.6 動畫、特指度和優先順序 945
18.6.1 特指度和!important 945
18.6.2 動畫順序 945
18.6.3 display: none; 對動畫迭代的影響 946
18.6.4 動畫和 UI 線程 . 946
18.7 癲癇和前庭功能失調 . 947
18.8 動畫事件及其前綴 947
18.8.1 animationstart . 948
18.8.2 animationend 948
18.8.3 animationiteration 949
18.9 打印動畫 . 949
第19章 濾鏡、混合、裁剪和遮罩 950
19.1 CSS 濾鏡 950
19.1.1 基本濾鏡 951
19.1.2 顏色濾鏡 953
19.1.3 亮度、對比度和飽和度 954
19.1.4 SVG 濾鏡 955
19.2 合成和混合 . 957
19.2.1 混合元素 957
19.2.2 變暗、變亮、差值和排除 . 958
19.2.3 正片疊底、濾色和疊加 960
19.2.4 強光和柔光 . 961
19.2.5 顏色減淡和加深 . 963
19.2.6 色相、飽和度、明度和顏色 963
19.3 與背景混合 . 965
19.4 裁剪和遮罩 . 970
19.4.1 裁剪 971
19.4.2 裁剪形狀 972
19.4.3 裁剪框 . 973
19.4.4 裁剪填充規則 976
19.5 蒙版 . 977
19.5.1 定義蒙版 978
19.5.2 改變蒙版的模式 . 981
19.5.3 調整蒙版的尺寸和重複方式 983
19.5.4 定位蒙版 985
19.5.5 裁剪和合成蒙版 . 988
19.5.6 寫為一個屬性 991
19.5.7 蒙版類型 992
19.5.8 遮罩邊框圖像 993
19.6 對象填充和定位 . 994
第20章 針對特定媒體的樣式 998
20.1 定義針對特定媒體的樣式 998
20.1.1 基本的媒體查詢 . 998
20.1.2 複雜的媒體查詢 1001
20.2 分頁媒體 1008
20.3 小結 1023
附錄A 支持動畫的屬性 1024
附錄B 基本屬性參考 .1032
附錄C 顏色對照表 .1044