CSS 創意項目實踐 Tiny CSS Projects
[美] 瑪蒂娜·道登(Martine Dowden) [英]邁克爾·基隆(Michael Gearon)著 殷海英 譯
- 出版商: 清華大學
- 出版日期: 2024-05-01
- 售價: $588
- 貴賓價: 9.5 折 $559
- 語言: 簡體中文
- 裝訂: 平裝
- ISBN: 730265980X
- ISBN-13: 9787302659808
-
相關分類:
CSS
- 此書翻譯自: Tiny CSS Projects
立即出貨
買這商品的人也買了...
-
$699$552 -
$750$638 -
$880$695 -
$1,000$780 -
$680$537 -
$780$663 -
$560$437 -
$780$616 -
$400$316 -
$720$562 -
$305React 基礎教程
-
$600$468 -
$550$429 -
$680$530 -
$653ReactJS 實踐入門
-
$551RTC 程序設計:實時音視頻權威指南
-
$551TypeScript + React Web 應用開發實戰
-
$539$512 -
$299$284 -
$534$507 -
$650$507 -
$880$695 -
$414$393 -
$680$537 -
$850$672
相關主題
商品描述
主要內容 ● 利用關鍵幀創建動畫 ● 使用網格和Flexbox等佈局技巧 ● 對表單元素進行樣式化,包括單選按鈕 ● 嵌入字體以及與排版相關的樣式 ● 利用偽元素和媒體查詢進行條件樣式化
目錄大綱
目 錄
第1章 CSS介紹 1
1.1 CSS概述 1
1.1.1 關註點分離 1
1.1.2 什麽是CSS 3
1.2 通過創建文章佈局開始學習CSS 3
1.3 向HTML添加CSS 7
1.3.1 內聯CSS 7
1.3.2 嵌入式CSS 9
1.3.3 外部CSS 10
1.4 CSS中的層疊 11
1.4.1 用戶代理樣式表 11
1.4.2 作者樣式表 12
1.4.3 用戶樣式表 12
1.4.4 CSS重置 12
1.4.5 標準化器 14
1.4.6 !important註釋 15
1.5 CSS中的特異性 15
1.6 CSS選擇器 17
1.6.1 基本選擇器 17
1.6.2 組合器 20
1.6.3 偽類選擇器和偽元素選擇器 25
1.6.4 屬性值選擇器 28
1.6.5 通用選擇器 29
1.7 編寫CSS的不同方式 30
1.7.1 簡寫屬性 30
1.7.2 格式化 32
1.8 本章小結 33
第2章 使用CSS網格設計佈局 35
2.1 CSS網格 35
2.2 顯示網格 39
2.3 網格軌道和線條 41
2.3.1 重復列 42
2.3.2 minmax()函數 42
2.3.3 auto關鍵詞 42
2.3.4 分數(fr)單位 43
2.4 網格模板區域 45
2.4.1 grid-area屬性 47
2.4.2 gap屬性 49
2.5 媒體查詢 50
2.6 無障礙性考慮因素 53
2.7 本章小結 54
第3章 製作響應式動畫加載界面 55
3.1 設置 55
3.2 SVG基礎 56
3.2.1 SVG元素的位置 58
3.2.2 視口 58
3.2.3 視圖框 60
3.2.4 SVG中的形狀 61
3.3 對SVG應用樣式 63
3.4 在CSS中為元素添加動畫效果 64
3.4.1 關鍵幀和動畫名稱 65
3.4.2 duration屬性 68
3.4.3 iteration-count屬性 69
3.4.4 動畫的簡寫屬性 70
3.4.5 animation-delay屬性 70
3.4.6 transform-origin屬性 72
3.5 無障礙性和prefers-reduced-motion媒體查詢 73
3.6 對HTML進度條進行樣式設置 75
3.6.1 對進度條進行樣式設置 76
3.6.2 為-webkit-瀏覽器的進度條設置樣式 77
3.6.3 樣式化-moz-瀏覽器的進度條 79
3.7 本章小結 81
第4章 創建響應式新聞網站佈局 83
4.1 設置主題 86
4.1.1 字體 86
4.1.2 font-weight屬性 88
4.1.3 字體的簡寫屬性 89
4.1.4 視覺層次結構 89
4.1.5 內聯元素與塊級元素 90
4.1.6 引號樣式 92
4.2 使用CSS計數器 93
4.2.1 symbols描述符 93
4.2.2 system描述符 94
4.2.3 後綴描述符 94
4.2.4 全面總結 94
4.2.5 @counter與list-style-image 95
4.3 對圖像進行樣式設置 95
4.3.1 使用filter屬性 95
4.3.2 處理加載失敗的圖片 97
4.3.3 格式化圖像標題 98
4.4 使用CSS多列佈局模塊 100
4.4.1 創建媒體查詢 100
4.4.2 對列進行定義和樣式化 100
4.4.3 使用column-rule屬性 101
4.4.4 使用column-gap屬性調整間距 102
4.4.5 使內容跨越多個列 103
4.4.6 控制內容的分割 104
4.5 添加最後的潤色 105
4.5.1 文本兩端對齊和斷詞 105
4.5.2 使文本環繞在圖像周圍 106
4.5.3 將max-width和margin的值設置為auto 107
4.6 本章小結 109
第5章 懸停互動的摘要卡片 111
5.1 開始項目 113
5.2 使用網格進行頁面佈局 114
5.2.1 使用網格佈局 115
5.2.2 媒體查詢 117
5.3 使用background-clip屬性對標題進行樣式化 119
5.3.1 設置字體 119
5.3.2 使用background-clip 120
5.4 對卡片進行樣式化 121
5.4.1 外部卡片容器 122
5.4.2 內部容器及其內容 124
5.5 在懸停和焦點內狀態下使用過渡效果 127
5.6 本章小結 133
第6章 製作個人資料卡片 135
6.1 開始項目 136
6.2 設置CSS自定義屬性 137
6.3 創建全高度背景 138
6.4 使用Flexbox對卡片進行樣式化 140
6.5 美化和放置頭像圖片 143
6.5.1 object-fit屬性 143
6.5.2 負邊距 144
6.6 設置背景大小和位置 147
6.7 對內容進行樣式化 150
6.7.1 姓名和職務 150
6.7.2 space-around和gap屬性 152
6.7.3 flex-basis和flex-shrink屬性 154
6.7.4 flex-direction屬性 155
6.7.5 段落 156
6.7.6 flex-wrap屬性 157
6.8 對動作進行樣式化 159
6.9 本章小結 161
第7章 充分利用浮動特性 163
7.1 添加首字下沉效果 166
7.1.1 行距 167
7.1.2 對齊方式 167
7.1.3 第一個字母 168
7.2 對引文進行樣式化 170
7.3 讓文本環繞羅盤圖片 171
7.3.1 添加shape-outside: circle屬性 171
7.3.2 添加裁剪路徑 173
7.3.3 使用border-radius創建形狀 174
7.4 使文本環繞小狗圖像 176
7.4.1 關於path()的使用 176
7.4.2 浮動圖像 177
7.4.3 添加shape-margin 178
7.5 本章小結 180
第8章 設計結賬購物車 181
8.1 開始項目 182
8.2 主題設計 185
8.2.1 排版設計 185
8.2.2 鏈接和按鈕 187
8.2.3 輸入文本框 191
8.2.4 表格 191
8.2.5 描述列表 196
8.2.6 卡片 197
8.3 移動端佈局 199
8.3.1 表格移動端視圖 199
8.3.2 描述列表 205
8.3.3 調用動作的鏈接 206
8.3.4 內邊距、外邊距以及外邊距折疊 207
8.4 中等尺寸屏幕的佈局 208
8.4.1 右對齊的數字 209
8.4.2 使前兩列左對齊 211
8.4.3 使輸入文本框中的數字右對齊 212
8.4.4 單元格內邊距和外邊距 212
8.5 寬屏幕 213
8.6 本章小結 217
第9章 創建虛擬信用卡 219
9.1 開始項目 220
9.2 創建佈局 222
9.2.1 調整信用卡尺寸 223
9.2.2 設置信用卡正面的樣式 224
9.2.3 信用卡背面的佈局 227
9.3 處理背景圖像 230
9.3.1 背景屬性的簡寫形式 230
9.3.2 文本顏色 231
9.4 排版 233
9.4.1 @font-face 234
9.4.2 使用@supports創建備用方案 236
9.4.3 字體大小和排版改進 238
9.5 創建翻轉效果 239
9.5.1 位置 240
9.5.2 過渡和backface-visibility 241
9.5.3 transition屬性 243
9.5.4 cubic-bezier()函數 244
9.6 設置圓角 246
9.7 外框和文本陰影 247
9.7.1 drop-shadow函數與box-shadow屬性 247
9.7.2 文本陰影 248
9.8 收尾 249
9.9 本章小結 250
第10章 樣式化表單 251
10.1 初始設置 251
10.2 重置輸入控件集樣式 255
10.3 對輸入控件進行樣式化 256
10.3.1 對文本和電子郵件輸入控件進行樣式設置 256
10.3.2 讓選擇框和文本域的樣式與輸入框相匹配 258
10.3.3 對單選按鈕和復選框進行樣式化 260
10.3.4 使用:where()和:is()偽類 263
10.3.5 設置選中狀態下的單選按鈕和復選框樣式 263
10.3.6 使用:checked偽類 264
10.3.7 設置單選按鈕被選中時顯示的圓點 266
10.3.8 使用CSS為復選框設置標記 266
10.3.9 使用:is()和:where()計算特異性級別 268
10.4 對下拉菜單應用樣式 269
10.5 對標簽和圖例進行樣式化 271
10.6 為占位文本添加樣式 272
10.7 對發送按鈕進行樣式化 273
10.8 錯誤處理 273
10.9 為表單元素添加懸停和焦點樣式 277
10.9.1 使用:focus及:focus-visible 277
10.9.2 添加懸停樣式 279
10.10 處理forced-colors模式 280
10.11 本章小結 283
第11章 社交媒體分享鏈接的動畫效果 285
11.1 處理CSS架構 285
11.1.1 OOCSS 286
11.1.2 SMACSS 286
11.1.3 BEM 286
11.2 開始項目 287
11.3 獲取圖標 288
11.3.1 媒體圖標 289
11.3.2 圖標庫 289
11.4 對區塊進行樣式化 289
11.5 對元素進行樣式化 290
11.5.1 Share按鈕 290
11.5.2 Share菜單 292
11.5.3 分享鏈接 292
11.5.4 scale() 293
11.5.5 繼承屬性值 294
11.6 對組件進行動畫處理 296
11.6.1 創建過渡 296
11.6.2 展開和關閉組件 297
11.6.3 對菜單進行動畫處理 302
11.7 本章小結 304
第12章 使用預處理器 307
12.1 運行預處理器 308
12.1.1 npm的設置 308
12.1.2 .sass與.scss 310
12.1.3 CodePen的設置 310
12.1.4 初始HTML和SCSS 311
12.2 Sass變量 314
12.3 @mixin和@include 319
12.3.1 object-fit屬性 319
12.3.2 插值 320
12.3.3 使用mixin 320
12.3.4 border-radius的簡寫屬性 323
12.4 嵌套 323
12.5 @each 325
12.6 顏色函數 329
12.7 @if和@else 331
12.8 最後的思考 334
12.9 本章小結 334
附錄 335