CSS圖鑒
內容描述
本書通過200多幅示意圖直觀地展示了常用CSS屬性的用法及效果,涉及面廣,包括偽類選擇器、偽元素選擇器、盒模型、位置、字體、陰影、元素可見性、浮動、顏色漸變、二維變換、三維變換、彈性盒佈局、網格佈局等。雖然CSS是為網站與Web應用程序的佈局而生的,但才華橫溢的用戶界面設計師把它用到了極致。因此,為了增添趣味性,本書剖析瞭如何用CSS繪制藝術作品“太空中的特斯拉汽車”。書後附有屬性索引,方便讀者參閱。
目錄大綱
1 屬性和屬性值 1
1.1 位置 1
1.2 賦值 2
1.3 註釋 .2
1.4 賦值方式 3
1.5 CSS 變量 4
1.6 Sass/SCSS 4
1.7 CSS 背後的理念 5
1.8 CSS 選擇器 7
1.9 寬松的環境 .7
1.10 常用項 7
1.11 簡寫屬性 8
2 偽類選擇器 9
3 盒模型 11
4 位置 15
5 字體和文本 17
5.1 文本對齊 20
5.2 控制最後一行的對齊方式 21
5.3 文本溢出 22
5.4 跨越下劃線 24
5.5 文本渲染 25
5.6 文本縮進 26
5.7 文本方向 27
5.8 文字陰影 30
5.9 其他效果 31
6 圓角邊框、外邊距、陰影、溢出 34
7 顯示 41
8 元素可見性 44
9 浮動元素 45
10 顏色漸變 46
10.1 概覽 46
10.2 漸變類型 49
11 背景圖片 55
11.1 設置多個屬性值 59
11.2 background-position 59
11.3 多重背景 61
11.4 background-attachment 63
11.5 background-origin 64
12 object-fit 66
13 邊框 67
13.1 概覽 67
13.2 橢圓邊框半徑 70
14 二維變換 74
14.1 移動 74
14.2 旋轉 75
15 三維變換 78
15.1 rotateX和perspective 78
15.2 rotateY和rotateZ 79
15.3 縮放 79
15.4 移動 80
15.5 構建立方體 81
16 彈性盒佈局 83
16.1 display: flex 83
16.2 主軸和交叉軸 83
16.3 方向 85
16.4 換行 85
16.5 flex-flow 86
16.6 justify-content 88
16.7 align-content 89
16.8 align-items 91
16.9 flex-basis 92
16.10 flex-grow 92
16.11 flex-shrink 92
16.12 order 93
16.13 justify-items與justifycontent 94
17 CSS網格佈局 95
17.1 創建你的第一個CSS網格佈局 6
17.2 隱式行和隱式列 99
17.3 grid-auto-rows 100
17.4 自動列寬 102
17.5 間隔 102
17.6 fr單位 108
17.7 重復值 111
17.8 span 112
17.9 起點和終點 116
17.10 起點和終點的簡寫形式 119
17.11 內容對齊方式 121
17.12 模板區域 123
17.13 為網格線命名 125
18 CSS與太空中的特斯拉 127
屬性索引 137
作者介紹
格雷格·赛德尼科夫(Greg Sidelnikov)
以“JavaScript老师”自称,从2004年开始编写和出版各类程序设计教程,涉及CSS、JavaScript、jQuery、Node API等,其中一些被加州大学欧文分校等学校采用,另著有《JavaScript语法简明手册》。