CSS 創意項目實踐 Tiny CSS Projects

 

目    錄

 

第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