深入解析 CSS (CSS in Depth)
內容描述
本書旨在達成兩個目標：幫讀者深度掌握CSS語言，並快速瞭解CSS的新進展和新特性。
本書分為以下四部分。
一部分回顧基礎知識，並重點關註幾個很容易被忽視的細節，包括層疊和繼承、相對單位、盒模型等；二部分介紹網頁佈局的各種關鍵工具，如浮動佈局、Flexbox、網格佈局、定位、響應式設計等；
第三部分介紹新的佳實踐，主要包括如何用模塊化的方式組織CSS，以及如何構建一個模式庫；
第四部分介紹與設計師共事時需要考慮哪些重要因素，以及自己如何做一點設計工作。
目錄大綱
目錄
第一部分基礎回顧
第1章層疊、優先級和繼承2
1.1層疊3
1.1.1樣式表的來源5
1.1.2理解優先級8
1.1.3源碼順序12
1.1.4兩條經驗法則14
1.2繼承15
1.3特殊值17
1.3.1使用inherit關鍵字17
1.3.2使用initial關鍵字18
1.4簡寫屬性19
1.4.1簡寫屬性會默默覆蓋其他樣式20
1.4.2理解簡寫值的順序20
1.5總結23
第2章相對單位24
2.1相對值的好處24
2.1.1那些年追求的像素級美25
2.1.2像素級美的時代終結了25
2.2 em和rem 26
2.2.1使用em定義字號27
2.2.2使用rem設置字號31
2.3停止像素思維32
2.3.1設置一個合理的默認字號33
2.3.2構造響應式面板34
2.3.3縮放單個組件35
2.4視口的相對單位36
2.4.1使用vw定義字號38
2.4.2使用calc()定義字號39
2.5無單位的數值和行高39
2.6自定義屬性（即CSS變量） 41
2.6.1動態改變自定義屬性43
2.6.2使用JavaScript改變自定義屬性45
2.6.3探索自定義屬性46
2.7總結46
第3章盒模型47
3.1元素寬度的問題47
3.1.1避免魔術數值50
3.1.2調整盒模型51
3.1.3全局設置border-box 52
3.1.4給列之間加上間隔53
3.2元素高度的問題54
3.2.1控制溢出行為55
3.2 .2百分比高度的備選方案56
3.2.3使用min-height和max-height 60
3.2.4垂直居中內容60
3.3負外邊距62
3.4外邊距折疊62
3.4.1文字折疊63
3.4.2多個外邊距折疊63
3.4.3容器外部折疊64
3.5容器內的元素間距65
3.5.1如果內容改變了67
3.5.2更通用的解決方案：貓頭鷹選擇器68
3.6總結71
二部分精通佈局
第4章理解浮動74
4.1浮動的設計初衷74
4.2容器折疊和清除浮動80
4.2.1理解容器折疊80
4.2.2理解清除浮動82
4.3出乎意料的“浮動陷阱” 84
4.4媒體對象和BFC 87
4.4 .1 BFC 88
4.4.2使用BFC實現媒體對象佈局89
4.5網格系統90
4.5.1理解網格系統91
4.5.2構建網格系統91
4.5.3添加間隔95
4.6總結99
第5章Flexbox 100
5.1 Flexbox的原則100
5.1.1創建一個基礎的Flexbox菜單103
5.1.2添加內邊距和間隔105
5.2彈性子元素的大小107
5.2.1使用flex-basis屬性109
5.2.2使用flex-grow屬性109
5.2 .3使用flex-shrink屬性110
5.2.4實際應用111
5.3彈性方向112
5.3.1改變彈性方向114
5.3.2登錄表單的樣式115
5.4對齊、間距等細節117
5.4.1理解彈性容器的屬性117
5.4.2理解彈性子元素的屬性120
5.4.3使用對齊屬性121
5.5值得注意的地方122
5.5.1 Flexbugs 123
5.5.2整頁佈局123
5.6總結123
第6章網格佈局124
6.1網頁佈局開啟新紀元124
6.2網格剖析127
6.2.1網格線的編號132
6.2.2與Flexbox配合133
6.3替代語法137
6.3.1命名的網格線137
6.3.2命名網格區域139
6.4顯式和隱式網格140
6.4.1添加變化144
6.4.2讓網格元素填滿網格軌道146
6.5特性查詢149
6.6對齊152
6.7總結153
第7章定位和層疊上下文154
7.1固定定位154
7.1.1用固定定位創建一個模態框155
7.1.2控制定位元素的大小158
7.2 對定位158
7.2.1讓Close按鈕*對定位158
7.2.2定位偽元素159
7.3相對定位161
7.3.1創建一個下拉菜單161
7.3.2創建一個CSS三角形164
7.4層疊上下文和z-index 166
7.4.1理解渲染過程和層疊順序166
7.4.2用z-index控制層疊順序168
7.4.3理解層疊上下文168
7.5粘滯定位171
7.6總結174
第8章響應式設計175
8.1移動優先176
8.1.1創建移動版的菜單182
8.1.2給視口添加meta標籤185
8.2媒體查詢186
8.2.1媒體查詢的類型187
8.2.2給網頁添加斷點189
8.2.3添加響應式的列192
8.3流式佈局194
8.3.1給大視口添加樣式195
8.3.2處理表格196
8.4響應式圖片198
8.4.1不同視口大小使用不同的圖片198
8.4.2使用srcset提供對應的圖片199
8.5總結200
第三部分大型應用中的CSS
第9章模塊化CSS 202
9.1基礎樣式：打好基礎203
9.2一個簡單的模塊204
9.2.1模塊的變體205
9.2.2多元素模塊208
9.3把模塊組合成更大的結構211
9.3.1拆分不同模塊的職責212
9.3.2模塊命名215
9.4工具類217
9.5 CSS方法論217
9.6總結219
第10章模式庫220
10.1 KSS簡介221
10.1.1配置KSS 222
10.1.2編寫KSS文檔223
10.1.3記錄模塊變體227
10.1.4創建概覽頁面229
10.1.5記錄需要JavaScript的模塊229
10.1.6為模式庫分組232
10.2改變編寫CSS的方式234
10.2.1 CSS優先的工作流程234
10.2.2像API一樣使用模式庫235
10.3總結240
第四部分級話題
第11章背景、陰影和混合模式242
11.1漸變243
11.1.1使用多個顏色節點245
11.1.2使用徑向漸變247
11.2陰影248
11.2.1使用漸變和陰影形成立體感249
11.2.2使用扁平化設計創建元素251
11.2.3讓按鈕看起來更時尚252
11.3混合模式253
11.3.1為圖片著色255
11.3.2理解混合模式的類型256
11.3.3為圖片添加紋理257
11.3.4使用融合混合模式258
11.4總結260
第12章對比、顏色和間距261
12.1對比重要262
12.1.1建立模式263
12.1.2還原設計稿264
12.2顏色266
12.2.1理解顏色表示法272
12.2.2添加新顏色到調色板275
12.2.3思考字體顏色的對比效果277
12.3間距279
12.3.1使用em還是px 279
12.3.2思考一下行高281
12.3.3為行內元素設置間距284
12.4總結286
第13章排版287
13.1 Web字體288
13.2谷歌字體289
13.3如何使用@font-face 293
13.3.1字體格式與回退處理294
13.3.2同一種字型的多種變體295
13.4調整字距，提升可讀性296
13.4.1正文主體的字間距297
13.4.2標題、小元素和間距298
13.5惱人的FOUT和FOIT 302
13.5.1使用Font Face Observer 304
13.5.2回退到系統字體305
13.5.3準備使用font-display 307
13.6總結308
第14章過渡309
14.1從這邊到那邊309
14.2定時函數311
14.2.1理解貝塞爾曲線312
14.2.2階躍315
14.3非動畫屬性316
14.3.1不可添加動畫效果的屬性318
14.3.2淡入與淡出319
14.4過渡到自動高度321
14.5總結323
第15章變換324
15.1旋轉、平移、縮放和傾斜324
15.1.1更改變換基點327
15.1.2使用多重變換327
15.2在運動中變換328
15.2.1放大圖標333
15.2.2創建“飛入”的標籤335
15.2.3交錯顯示過渡337
15.3動畫性能338
15.4三維（3D）變換340
15.4.1控制透視距離341
15.4.2實現級3D變換343
15.5總結346
第16章動畫347
16.1關鍵幀348
16.2為3D變換添加動畫350
16.2 .1創建無動畫頁面佈局350
16.2.2為佈局添加動畫355
16.3動畫延遲和填充模式356
16.4通過動畫傳遞意圖359
16.4.1反饋用戶操作359
16.4.2吸引用戶的注意力362
16.5 後一點建議365
16.6總結365
附錄A選擇器366
附錄B預處理器370
作者介紹
Keith J. Grant
*級Web開發人員，現任職於美國洲際交易所，負責編寫和維護合作站點的CSS，客戶包括紐約證券交易所網站等。
在使用HTML、CSS和JavaScript開發和維護Web站點及應用程序方面具有豐富的經驗。
【譯者簡介】
黃小璐
畢業於華中科技大學計算機學院。曾任奇虎360軟件開發工程師，多年Web從業者。
參與翻譯了《高性能HTML5》《移動Web手冊》《大型JavaScript應用佳實踐指南》《Web開發威指南》等書。
高楠
多年Web開發經驗，自由譯者，開源硬件愛好者。目前就職於360奇舞團。
