CSS 新世界

張鑫旭

  • 出版商: 人民郵電
  • 出版日期: 2021-08-01
  • 定價: $779
  • 售價: 8.5$662
  • 語言: 簡體中文
  • 頁數: 580
  • 裝訂: 平裝
  • ISBN: 7115562849
  • ISBN-13: 9787115562845
  • 相關分類: CSS
  • 立即出貨 (庫存 < 3)

  • CSS 新世界-preview-1
  • CSS 新世界-preview-2
CSS 新世界-preview-1

買這商品的人也買了...

相關主題

商品描述

本書是“CSS世界三部曲”的最後一部。這是一本關於CSS的進階讀物,專門講CSS3及其之後版本的新特性。在本書中,作者結合自己多年的從業經驗,講解CSS基礎知識,並充分考慮前端開發者的需求,以CSS新特性的歷史背景為線索,去粗取精,註重細節,深入淺出地介紹了上百個CSS新特性。此外,作者專門還為本書開發了配套網站,用於書中實例效果的在線展示和問題答疑。

本書的所有內容都是作者經過深入思考和探索後提煉出來的,知識點多且內容豐富,註重技術細節、經驗分享和解決問題的思路。本書的主要目標是幫助前端開發者突破CSS技能提升的瓶頸,非常適合具有一定CSS基礎的前端開發者閱讀。

作者簡介

“CSS新世界三部曲”(《CSS世界》《CSS選擇器世界》《CSS新世界》作者,前端開發工程師,國內知名前端博客“鑫空間-鑫生活”博主,目前就職於閱文集團用戶體驗設計部(YUX),擔任前端技術專家。他從2007年開始接觸前端,十多年來一直工作在前端開發一線,在HTML/CSS等與交互體驗關係密切的領域花了大量的時間學習和研究,有比較多的心得體會。

目錄大綱

第 1章 概述 1
1.1 CSS3出現的歷史和背景 1
1.2 模塊化的CSS新世界 2

第 2章 需要提前瞭解的知識 4
2.1 互通互聯的CSS數據類型 4
2.1.1 為什麽要關註CSS數據類型 4
2.1.2 幾個常見數據類型的簡單介紹 5
2.2 學會看懂CSS屬性值定義語法 7
2.2.1 學習CSS屬性值定義語法的好處 7
2.2.2 CSS屬性值定義語法詳解 8
2.3 瞭解CSS全局關鍵字屬性值 12
2.3.1 用過都說好的繼承關鍵字inherit 12
2.3.2 可以一用的初始值關鍵字initial 12
2.3.3 瞭解一下不固定值關鍵字unset 14
2.3.4 我個人很喜歡的恢復關鍵字revert 15
2.4 指代所有CSS屬性的all屬性 17
2.5 CSS新特性的漸進增強處理技巧 18
2.5.1 直接使用CSS新特性 18
2.5.2 利用屬性值的語法差異實現兼容 19
2.5.3 借助偽類或偽元素區分瀏覽器的技巧 21
2.5.4 @supports規則下的漸進增強處理 23
2.5.5 對CSS新特性漸進增強處理的總結 26

第3章 從增強已有的CSS屬性開始 28
3.1 貫穿全書的尺寸體系 28
3.1.1 從width:fit-content聲明開始 29
3.1.2 stretch、available和fill-available關鍵字究竟用哪個 32
3.1.3 深入瞭解min-content關鍵字 35
3.1.4 快速瞭解max-content關鍵字 39
3.2 深入瞭解CSS邏輯屬性 40
3.2.1 CSS邏輯屬性有限的使用場景 41
3.2.2 inline/block與start/end元素 43
3.2.3 width/height屬性與inline-size/block-size邏輯屬性 44
3.2.4 由margin/padding/border演變而來的邏輯屬性 44
3.2.5 text-align屬性支持的邏輯屬性值 45
3.2.6 最有用的CSS邏輯屬性inset 46
3.3 在CSS邊框上做文章 47
3.3.1 曇花一現的CSS多邊框 47
3.3.2 獨一無二的border-image屬性 47
3.3.3 border-image屬性與漸變邊框 57
3.4 position屬性的增強 60
3.4.1 深入瞭解sticky屬性值與黏性定位 61
3.4.2 position:sticky聲明的精彩應用—層次滾動 65
3.5 font-family屬性和@font-face規則新特性 66
3.5.1 system-ui等全新的通用字體族 66
3.5.2 local()函數與系統字體的調用 73
3.5.3 unicode-range屬性的詳細介紹 74
3.5.4 woff/woff2字體 75
3.5.5 font-display屬性與自定義字體的加載渲染 77
3.6 字符單元的中斷與換行 79
3.6.1 使用keep-all屬性值優化中文排版 80
3.6.2 break-all屬性值的問題和line-break屬性 81
3.6.3 hyphens屬性與連字符 83
3.6.4 與精確換行的控制 85
3.6.5 overflow-wrap:anywhere聲明有什麽用 86
3.7 text-align屬性相關的新特性 88
3.7.1 match-parent等新屬性值 88
3.7.2 text-align屬性的字符對齊特性 8
3.8 text-decoration屬性全新升級 90
3.8.1 text-decoration屬性現在是一種縮寫 90
3.8.2 text-decoration屬性的累加特性 91
3.8.3 唯一實用的wavy波浪線 91
3.8.4 可能需要text-underline-position:under聲明 92
3.8.5 更需要text-underline-offset屬性 94
3.8.6 講一講text-decoration-skip屬性的故事 95
3.9 color屬性與顏色設置 97
3.9.1 148個顏色關鍵字 98
3.9.2 transparent關鍵字 99
3.9.3 currentColor關鍵字 100
3.9.4 RGB顏色和HSL顏色的新語法 101
3.10 必學必會的background屬性新特性 103
3.10.1 最實用的當屬background-size屬性 103
3.10.2 background屬性最成功的設計—多背景 108
3.10.3 background-clip屬性與背景顯示區域限制 110
3.10.4 background-clip:text聲明與漸變文字效果 111
3.10.5 background-origin屬性與背景定位原點控制 112
3.10.6 space和round平鋪模式 113
3.10.7 可以指定background-position的起始方位了 114
3.11 outline相關新屬性outline-offset 116
3.12 cursor屬性新增的手形效果 117
3.12.1 放大手形zoom-in和縮小手形zoom-out簡介 117
3.12.2 抓取手形grab和放手手形grabbing簡介 118

第4章 更細致的樣式表現 119
4.1 透明度控制屬性opacity 119
4.1.1 opacity屬性的疊加計算規則 119
4.1.2 opacity屬性的邊界特性與應用 120
4.2 深入瞭解圓角屬性border-radius 124
4.2.1 瞭解border-radius屬性的語法 124
4.2.2 弄懂圓角效果是如何產生的 126
4.2.3 border-radius屬性渲染border邊框的細節 127
4.2.4 border-radius屬性的高級應用技巧 129
4.3 box-shadow盒陰影 131
4.3.1 inset關鍵字與內陰影 131
4.3.2 不要忽略第四個長度值 133
4.3.3 多陰影特性與圖形繪制 134
4.3.4 box-shadow動畫與性能優化 137
4.4 CSS 2D變換 138
4.4.1 從基本的變換方法說起 138
4.4.2 transform屬性的若乾細節特性 141
4.4.3 元素應用transform屬性後的變化 144
4.4.4 深入瞭解矩陣函數matrix() 148
4.4.5 常常被遺忘的transform-origin屬性 152
4.4.6 scale()函數縮放和zoom屬性縮放的區別 153
4.4.7 瞭解全新的translate、scale和rotate屬性 154
4.5 簡單實用的calc()函數 155
4.5.1 關於calc()函數 155
4.5.2 瞭解min()、max()和clamp()函數 157

第5章 更強的視覺表現 160
5.1 CSS漸變 160
5.1.1 深入瞭解linear-gradient()線性漸變 160
5.1.2 深入瞭解radial-gradient()徑向漸變 165
5.1.3 瞭解conic-gradient()錐形漸變 170
5.1.4 重復漸變 173
5.2 CSS 3D變換 174
5.2.1 從常用的3D變換函數說起 174
5.2.2 必不可少的perspective屬性 176
5.2.3 用translateZ()函數尋找透視位置 177
5.2.4 指定perspective透視點的兩種寫法 178
5.2.5 理解perspective-origin屬性 179
5.2.6 transform-style:preserve-3d聲明的含義 180
5.2.7 backface-visibility屬性的作用 180
5.2.8 值得學習的旋轉木馬案例 182
5.2.9 3D變換與GPU加速 184
5.3 CSS過渡 184
5.3.1 你可能不知道的transition屬性知識 185
5.3.2 瞭解三次貝塞爾時間函數類型 188
5.3.3 transition與visibility屬性的應用指南 190
5.4 CSS動畫 192
5.4.1 初識animation屬性 193
5.4.2 @keyframes規則的語法和特性 194
5.4.3 動畫命名與數據類型 196
5.4.4 負延時與即時播放效果 198
5.4.5 reverse和alternate關鍵字的區別和應用 200
5.4.6 動畫播放次數可以是小數 203
5.4.7 forwards和backwards屬性值究竟是什麽意思 204
5.4.8 如何暫停和重啟CSS動畫 207
5.4.9 深入理解steps()函數 209
5.4.10 標簽嵌套與動畫實現的小技巧 212

第6章 全新的佈局方式 214
6.1 分欄佈局 214
6.1.1 重點關註columns屬性 215
6.1.2 column-gap和gap屬性的關系 217
6.1.3 瞭解column-rule、column-span和column-fill屬性 218
6.1.4 分欄佈局實現兩端對齊佈局 220
6.1.5 break-inside屬性與元素斷點位置的控制 221
6.1.6 box-decoration-break屬性與元素斷點裝飾的控制 222
6.2 彈性佈局 224
6.2.1 設置display:flex聲明發生了什麽 226
6.2.2 flex-direction屬性與整體佈局方向 228
6.2.3 flex-wrap屬性與整體佈局的換行表現 229
6.2.4 熟練使用flex-flow屬性 230
6.2.5 CSS全新的對齊特性綜述 231
6.2.6 justify-content屬性與整體佈局的水平對齊 233
6.2.7 垂直對齊屬性align-items與align-self 234
6.2.8 align-content屬性與整體佈局的垂直對齊 236
6.2.9 order屬性與單個子項的順序控制 238
6.2.10 必讀:深入理解flex屬性 238
6.2.11 應該在什麽時候使用flex:0/1/none/auto 243
6.2.12 詳細瞭解flex-basis屬性與尺寸計算規則 250
6.2.13 彈性佈局最後一行不對齊的處理 258
6.3 網格佈局 263
6.3.1 grid-template-columns和grid-template-rows屬性簡介 264
6.3.2 瞭解網格佈局專用單位fr 269
6.3.3 詳細介紹minmax()和fit-content()函數 271
6.3.4 repeat()函數的詳細介紹 273
6.3.5 瞭解grid-template-areas屬性 278
6.3.6 縮寫屬性grid-template 279
6.3.7 瞭解grid-auto-columns和grid-auto-rows屬性 282
6.3.8 深入瞭解grid-auto-flow屬性 283
6.3.9 縮寫屬性grid 286
6.3.10 間隙設置屬性column-gap和row-gap(grid-column-gap和grid- row-gap) 288
6.3.11 縮寫屬性gap(grid-gap) 289
6.3.12 元素對齊屬性justify-items和align-items 290
6.3.13 縮寫屬性place-items 294
6.3.14 整體對齊屬性justify-content和align-content 294
6.3.15 縮寫屬性place-content 297
6.3.16 區間範圍設置屬性grid-column-start/grid-column-end和rid-row-start/ grid-row-end 298
6.3.17 縮寫屬性grid-column和grid-row 303
6.3.18 縮寫屬性grid-area外加區域範圍設置 304
6.3.19 grid子項對齊屬性justify-self和align-self 307
6.3.20 縮寫屬性place-self 307
6.4 CSS Shapes佈局 308
6.4.1 詳細瞭解shape-outside屬性 308
6.4.2 瞭解shape-margin屬性 313
6.4.3 瞭解shape-image-threshold屬性 314
6.4.4 CSS Shapes佈局案例 315

第7章 不同設備的適配與響應 317
7.1 @media規則 317
7.1.1 @media規則的詳細介紹 318
7.1.2 對深色模式和動畫關閉的支持檢測 322
7.1.3 對鼠標行為和觸摸行為的支持檢測 325
7.2 環境變量函數env() 328
7.3 rem和vw單位與移動端適配最佳實踐 330
7.3.1 瞭解視區相對單位 331
7.3.2 calc()函數下的最佳實踐 332
7.3.3 適合新手的純vw單位的佈局 334
7.4 使用touch-action屬性控制設備的觸摸行為 335
7.4.1 touch-action屬性的常見應用 335
7.4.2 瞭解touch-action屬性各個屬性值的含義 336
7.5 image-set()函數與多倍圖設置 337

第8章 CSS的變量函數var()與自定義屬性 340
8.1 CSS變量的語法、特性和細節 340
8.1.1 CSS自定義屬性的命名 341
8.1.2 var()函數的語法和特性 341
8.1.3 CSS自定義屬性的作用域 344
8.1.4 CSS自定義屬性值的細節 346
8.2 CSS自定義屬性的設置與獲取 348
8.2.1 在HTML標簽中設置CSS自定義屬性 348
8.2.2 在JavaScript中設置和獲取CSS自定義屬性 348
8.3 使用content屬性顯示CSS自定義屬性值的技巧 349
8.4 CSS變量的自定義語法技術簡介 350
8.4.1 使用CSS變量自定義全新的CSS語法 351
8.4.2 CSS變量模擬CSS新特性 352

第9章 文本字符處理能力的升級 354
9.1 文字的美化與裝飾 354
9.1.1 文字陰影屬性text-shadow 354
9.1.2 文字描邊屬性text-stroke 355
9.1.3 文字顏色填充屬性text-fill-color 358
9.1.4 學會使用text-emphasis屬性進行強調裝飾 362
9.2 文字的旋轉與閱讀方向 365
9.2.1 文字方向控制屬性text-orientation 365
9.2.2 文字橫向合並屬性text-combine-upright 366
9.2.3 瞭解unicode-bidi屬性的新屬性值 368
9.3 文本字符的尺寸控制 370
9.3.1 text-size-adjust屬性到底有沒有用 370
9.3.2 使用ch新單位換個心情 371
9.3.3 使用tab-size屬性控制代碼縮進的大小 372
9.4 文字渲染與字體呈現 374
9.4.1 瞭解text-rendering屬性 374
9.4.2 瞭解文字平滑屬性font-smooth 376
9.4.3 font-stretch屬性與字符胖瘦控制 377
9.4.4 font-synthesis屬性與中文體驗增強 380
9.5 字體特徵和變體 382
9.5.1 升級後的font-variant屬性 382
9.5.2 瞭解字距調整屬性font-kerning 393
9.5.3 font-feature-settings屬性的定位 394
9.6 可變字體 395
9.6.1 什麽是可變字體 395
9.6.2 可變字體與font-variation-settings屬性 399
9.6.3 瞭解font-optical-sizing屬性 400

第 10章 圖片等多媒體的處理 402
10.1 圖片和視頻元素的內在尺寸控制 402
10.1.1 超級好用的object-fit屬性 403
10.1.2 理解object-position屬性的作用規則 405
10.2 使用image-orientation屬性糾正圖片的方向 406
10.3 image-rendering屬性與圖像的渲染 408
10.4 不常用的圖像類型函數 411
10.4.1 實現圖像半透明疊加的cross-fade()函數 411
10.4.2 神奇的element()函數 413

第 11章 更絢麗的視覺表現 415
11.1 深入瞭解CSS濾鏡屬性filter 416
11.1.1 filter屬性支持的濾鏡函數詳解 416
11.1.2 更進一步的濾鏡技術 427
11.1.3 引用SVG濾鏡技術 427
11.2 姐妹花濾鏡屬性backdrop-filter 429
11.2.1 backdrop-filter屬性與filter屬性的異同 429
11.2.2 backdrop-filter屬性與毛玻璃效果 430
11.3 深入瞭解CSS混合模式 433
11.3.1 詳細瞭解各種混合模式效果 434
11.3.2 濾鏡和混合模式的化合反應 446
11.4 混合模式屬性background-blend-mode 448
11.4.1 background-blend-mode屬性的常見應用 448
11.4.2 深入瞭解background-blend-mode屬性的作用細節 449
11.5 使用isolation: isolate聲明隔離混合模式 454
11.5.1 isolation屬性 454
11.5.2 isolation:isolate聲明的作用原理 455

第 12章 更豐富的圖形處理 457
12.1 超級實用的CSS遮罩 457
12.1.1 mask-image屬性的詳細介紹 457
12.1.2 mask-mode屬性的簡單介紹 464
12.1.3 mask-repeat屬性的簡單介紹 465
12.1.4 mask-position屬性的簡單介紹 465
12.1.5 mask-clip屬性的詳細介紹 466
12.1.6 mask-origin屬性的簡單介紹 468
12.1.7 mask-size屬性的簡單介紹 468
12.1.8 瞭解mask-type屬性 469
12.1.9 mask-composite屬性的詳細介紹 469
12.1.10 CSS遮罩的一些經典應用示例 472
12.1.11 瞭解-webkit-mask-box-image和mask-border屬性 475
12.2 同樣實用的CSS剪裁屬性clip-path 478
12.2.1 快速瞭解clip-path屬性的各個屬性值 479
12.2.2 深入瞭解nonzero和evenodd填充規則 488
12.2.3 clip-path屬性的精彩應用示例 490
12.3 -webkit-box-reflect屬性與倒影效果的實現 492
12.3.1 -webkit-box-reflect屬性的簡單介紹 493
12.3.2 Firefox瀏覽器實現投影效果的解決方案 494
12.4 使用offset屬性實現元素的不規則運動 496
12.4.1 瞭解offset屬性演變的歷史 498
12.4.2 offset-anchor屬性的簡單介紹 498
12.4.3 offset-distance屬性的簡單介紹 499
12.4.4 offset-path屬性的詳細介紹 501
12.4.5 快速瞭解offset-position屬性 505
12.4.6 理解offset-rotate屬性 506

第 13章 用戶行為與體驗增強 508
13.1 滾動行為相關 508
13.1.1 scroll-behavior屬性與頁面平滑滾動 508
13.1.2 使用overscroll-behavior屬性實現當滾動嵌套時終止滾動 509
13.1.3 瞭解overflow-anchor屬性誕生的背景 511
13.1.4 CSS Scroll Snap簡介 513
13.1.5 CSS Scrollbars與滾動條樣式的自定義 516
13.2 點擊行為相關 519
13.2.1 你不知道的pointer-events:none聲明 519
13.2.2 觸摸行為設置屬性touch-action 521
13.3 拉伸行為相關 521
13.4 輸入行為相關 523
13.5 選擇行為相關 524
13.5.1 聊聊user-select屬性 524
13.5.2 使用::selection改變文字被選中後的顏色 526
13.6 打印行為相關 527
13.6.1 快速瞭解color-adjust屬性 527
13.6.2 page-break系列屬性與分頁的控制 529
13.6.3 orphans/widows屬性與內容行數的限制 531
13.6.4 瞭解@page規則 532
13.7 性能增強 532
13.7.1 慎用will-change屬性提高動畫性能 533
13.7.2 深入瞭解contain屬性 535
13.7.3 content-visibility屬性 540

第 14章 SVG元素的CSS控制 541
14.1 使用CSS屬性直接繪制SVG圖形 541
14.2 CSS屬性下的填充設置 545
14.2.1 fill屬性在Web開發中的應用 545
14.2.2 快速瞭解fill-opacity和fill-rule屬性 547
14.3 CSS屬性下的描邊設置 550
14.3.1 使用stroke屬性實現全兼容的文字描邊效果 550
14.3.2 使用stroke-dasharray屬性實現伸縮自如的虛線效果 552
14.3.3 stroke-dashoffset屬性的經典Web應用舉例 553
14.4 CSS屬性下的標記設置 555
14.4.1 瞭解marker-start/marker-end屬性與起止點的標記 555
14.4.2 瞭解marker-mid屬性與轉折點的標記 556
14.5 其他常見的SVG CSS屬性 557
14.5.1 使用paint-order屬性實現外描邊效果 557
14.5.2 使用vector-effect屬性讓描邊不會縮放 559
14.5.3 使用text-anchor屬性讓文字塊水平居中顯示 560
14.5.4 使用dominant-baseline屬性讓文字塊垂直居中顯示 561
14.5.5 alignment-baseline和dominant-baseline屬性的區別 562

第 15章 Houdini是CSS新的未來嗎 564
15.1 瞭解CSS Paint API 564
15.1.1 CSS變量讓CSS Paint API如虎添翼 567
15.1.2 簡單的總結 568
15.2 瞭解CSS Properties & Values API 568
15.3 瞭解CSS Parser API 570
15.4 詳細瞭解CSS Layout API 571
15.4.1 layout()函數的參數之間的邏輯關系 573
15.4.2 文本居中同時一側對齊的佈局案例 575
15.5 快速瞭解CSS Typed OM 577
15.6 簡單瞭解Animation Worklet 578
15.7 瞭解Font Metrics API 579