CSS創(chuàng)意項(xiàng)目實(shí)踐

第1章  CSS介紹 1
1.1  CSS概述 1
1.1.1  關(guān)注點(diǎn)分離 1
1.1.2  什么是CSS 3
1.2  通過創(chuàng)建文章布局開始學(xué)習(xí)CSS 3
1.3  向HTML添加CSS 7
1.3.1  內(nèi)聯(lián)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  標(biāo)準(zhǔn)化器 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  本章小結(jié) 33
第2章  使用CSS網(wǎng)格設(shè)計(jì)布局 35
2.1  CSS網(wǎng)格 35
2.2  顯示網(wǎng)格 39
2.3  網(wǎng)格軌道和線條 41
2.3.1  重復(fù)列 42
2.3.2  minmax()函數(shù) 42
2.3.3  auto關(guān)鍵詞 42
2.3.4  分?jǐn)?shù)(fr)單位 43
2.4  網(wǎng)格模板區(qū)域 45
2.4.1  grid-area屬性 47
2.4.2  gap屬性 49
2.5  媒體查詢 50
2.6  無障礙性考慮因素 53
2.7  本章小結(jié) 54
第3章  制作響應(yīng)式動(dòng)畫加載界面 55
3.1  設(shè)置 55
3.2  SVG基礎(chǔ) 56
3.2.1  SVG元素的位置 58
3.2.2  視口 58
3.2.3  視圖框 60
3.2.4  SVG中的形狀 61
3.3  對SVG應(yīng)用樣式 63
3.4  在CSS中為元素添加動(dòng)畫效果 64
3.4.1  關(guān)鍵幀和動(dòng)畫名稱 65
3.4.2  duration屬性 68
3.4.3  iteration-count屬性 69
3.4.4  動(dòng)畫的簡寫屬性 70
3.4.5  animation-delay屬性 70
3.4.6  transform-origin屬性 72
3.5  無障礙性和prefers-reduced-motion媒體查詢 73
3.6  對HTML進(jìn)度條進(jìn)行樣式設(shè)置 75
3.6.1  對進(jìn)度條進(jìn)行樣式設(shè)置 76
3.6.2  為-webkit-瀏覽器的進(jìn)度條設(shè)置樣式 77
3.6.3  樣式化-moz-瀏覽器的進(jìn)度條 79
3.7  本章小結(jié) 81
第4章  創(chuàng)建響應(yīng)式新聞網(wǎng)站布局 83
4.1  設(shè)置主題 86
4.1.1  字體 86
4.1.2  font-weight屬性 88
4.1.3  字體的簡寫屬性 89
4.1.4  視覺層次結(jié)構(gòu) 89
4.1.5  內(nèi)聯(lián)元素與塊級元素 90
4.1.6  引號樣式 92
4.2  使用CSS計(jì)數(shù)器 93
4.2.1  symbols描述符 93
4.2.2  system描述符 94
4.2.3  后綴描述符 94
4.2.4  全面總結(jié) 94
4.2.5  @counter與list-style-image 95
4.3  對圖像進(jìn)行樣式設(shè)置 95
4.3.1  使用filter屬性 95
4.3.2  處理加載失敗的圖片 97
4.3.3  格式化圖像標(biāo)題 98
4.4  使用CSS多列布局模塊 100
4.4.1  創(chuàng)建媒體查詢 100
4.4.2  對列進(jìn)行定義和樣式化 100
4.4.3  使用column-rule屬性 101
4.4.4  使用column-gap屬性調(diào)整間距 102
4.4.5  使內(nèi)容跨越多個(gè)列 103
4.4.6  控制內(nèi)容的分割 104
4.5  添加最后的潤色 105
4.5.1  文本兩端對齊和斷詞 105
4.5.2  使文本環(huán)繞在圖像周圍 106
4.5.3  將max-width和margin的值設(shè)置為auto 107
4.6  本章小結(jié) 109
第5章  懸停互動(dòng)的摘要卡片 111
5.1  開始項(xiàng)目 113
5.2  使用網(wǎng)格進(jìn)行頁面布局 114
5.2.1  使用網(wǎng)格布局 115
5.2.2  媒體查詢 117
5.3  使用background-clip屬性對標(biāo)題進(jìn)行樣式化 119
5.3.1  設(shè)置字體 119
5.3.2  使用background-clip 120
5.4  對卡片進(jìn)行樣式化 121
5.4.1  外部卡片容器 122
5.4.2  內(nèi)部容器及其內(nèi)容 124
5.5  在懸停和焦點(diǎn)內(nèi)狀態(tài)下使用過渡效果 127
5.6  本章小結(jié) 133
第6章  制作個(gè)人資料卡片 135
6.1  開始項(xiàng)目 136
6.2  設(shè)置CSS自定義屬性 137
6.3  創(chuàng)建全高度背景 138
6.4  使用Flexbox對卡片進(jìn)行樣式化 140
6.5  美化和放置頭像圖片 143
6.5.1  object-fit屬性 143
6.5.2  負(fù)邊距 144
6.6  設(shè)置背景大小和位置 147
6.7  對內(nèi)容進(jìn)行樣式化 150
6.7.1  姓名和職務(wù) 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  對動(dòng)作進(jìn)行樣式化 159
6.9  本章小結(jié) 161
第7章  充分利用浮動(dòng)特性 163
7.1  添加首字下沉效果 166
7.1.1  行距 167
7.1.2  對齊方式 167
7.1.3  第一個(gè)字母 168
7.2  對引文進(jìn)行樣式化 170
7.3  讓文本環(huán)繞羅盤圖片 171
7.3.1  添加shape-outside: circle屬性 171
7.3.2  添加裁剪路徑 173
7.3.3  使用border-radius創(chuàng)建形狀 174
7.4  使文本環(huán)繞小狗圖像 176
7.4.1  關(guān)于path()的使用 176
7.4.2  浮動(dòng)圖像 177
7.4.3  添加shape-margin 178
7.5  本章小結(jié) 180
第8章  設(shè)計(jì)結(jié)賬購物車 181
8.1  開始項(xiàng)目 182
8.2  主題設(shè)計(jì) 185
8.2.1  排版設(shè)計(jì) 185
8.2.2  鏈接和按鈕 187
8.2.3  輸入文本框 191
8.2.4  表格 191
8.2.5  描述列表 196
8.2.6  卡片 197
8.3  移動(dòng)端布局 199
8.3.1  表格移動(dòng)端視圖 199
8.3.2  描述列表 205
8.3.3  調(diào)用動(dòng)作的鏈接 206
8.3.4  內(nèi)邊距、外邊距以及外邊距折疊 207
8.4  中等尺寸屏幕的布局 208
8.4.1  右對齊的數(shù)字 209
8.4.2  使前兩列左對齊 211
8.4.3  使輸入文本框中的數(shù)字右對齊 212
8.4.4  單元格內(nèi)邊距和外邊距 212
8.5  寬屏幕 213
8.6  本章小結(jié) 217
第9章  創(chuàng)建虛擬信用卡 219
9.1  開始項(xiàng)目 220
9.2  創(chuàng)建布局 222
9.2.1  調(diào)整信用卡尺寸 223
9.2.2  設(shè)置信用卡正面的樣式 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創(chuàng)建備用方案 236
9.4.3  字體大小和排版改進(jìn) 238
9.5  創(chuàng)建翻轉(zhuǎn)效果 239
9.5.1  位置 240
9.5.2  過渡和backface-visibility 241
9.5.3  transition屬性 243
9.5.4  cubic-bezier()函數(shù) 244
9.6  設(shè)置圓角 246
9.7  外框和文本陰影 247
9.7.1  drop-shadow函數(shù)與box-shadow屬性 247
9.7.2  文本陰影 248
9.8  收尾 249
9.9  本章小結(jié) 250
第10章  樣式化表單 251
10.1  初始設(shè)置 251
10.2  重置輸入控件集樣式 255
10.3  對輸入控件進(jìn)行樣式化 256
10.3.1  對文本和電子郵件輸入控件進(jìn)行樣式設(shè)置 256
10.3.2  讓選擇框和文本域的樣式與輸入框相匹配 258
10.3.3  對單選按鈕和復(fù)選框進(jìn)行樣式化 260
10.3.4  使用:where()和:is()偽類 263
10.3.5  設(shè)置選中狀態(tài)下的單選按鈕和復(fù)選框樣式 263
10.3.6  使用:checked偽類 264
10.3.7  設(shè)置單選按鈕被選中時(shí)顯示的圓點(diǎn) 266
10.3.8  使用CSS為復(fù)選框設(shè)置標(biāo)記 266
10.3.9  使用:is()和:where()計(jì)算特異性級別 268
10.4  對下拉菜單應(yīng)用樣式 269
10.5  對標(biāo)簽和圖例進(jìn)行樣式化 271
10.6  為占位文本添加樣式 272
10.7  對發(fā)送按鈕進(jìn)行樣式化 273
10.8  錯(cuò)誤處理 273
10.9  為表單元素添加懸停和焦點(diǎn)樣式 277
10.9.1  使用:focus及:focus-visible 277
10.9.2  添加懸停樣式 279
10.10  處理forced-colors模式 280
10.11  本章小結(jié) 283
第11章  社交媒體分享鏈接的動(dòng)畫效果 285
11.1  處理CSS架構(gòu) 285
11.1.1  OOCSS 286
11.1.2  SMACSS 286
11.1.3  BEM 286
11.2  開始項(xiàng)目 287
11.3  獲取圖標(biāo) 288
11.3.1  媒體圖標(biāo) 289
11.3.2  圖標(biāo)庫 289
11.4  對區(qū)塊進(jìn)行樣式化 289
11.5  對元素進(jìn)行樣式化 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  對組件進(jìn)行動(dòng)畫處理 296
11.6.1  創(chuàng)建過渡 296
11.6.2  展開和關(guān)閉組件 297
11.6.3  對菜單進(jìn)行動(dòng)畫處理 302
11.7  本章小結(jié) 304
第12章  使用預(yù)處理器 307
12.1  運(yùn)行預(yù)處理器 308
12.1.1  npm的設(shè)置 308
12.1.2  .sass與.scss 310
12.1.3  CodePen的設(shè)置 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  顏色函數(shù) 329
12.7  @if和@else 331
12.8  最后的思考 334
12.9  本章小結(jié) 334
附錄 335