深入解析CSS

《深入解析CSS》是2020年4月人民郵電出版社出版的圖書，作者是[美] 基思·J.格蘭特（Keith J.Grant）。

基本介紹

• 中文名：深入解析CSS
• 作者：[美] 基思·J.格蘭特（Keith J.Grant）
• 出版時間：2020年4月1日
• 出版社：人民郵電出版社
• 頁數：382 頁
• ISBN：9787115533760
• 定價：139 元
• 開本：16 開
• 裝幀：平裝

內容簡介

本書旨在達成兩個目標：幫讀者深度掌握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

作者簡介

基思·J.格蘭特（Keith J. Grant）

高級Web開發人員，現任職於美國洲際交易所，負責編寫和維護合作站點的CSS，客戶包括紐約證券交易所網站等。在使用HTML、CSS和JavaScript開發和維護Web站點及應用程式方面具有豐富的經驗。