目　　錄
譯者序
CSS3歡迎你
致　謝
第1章　CSS3和現(xiàn)代Web設(shè)計(jì) / 1
1.1　為什么要使用CSS3 / 2
1.2　現(xiàn)代Web設(shè)計(jì)理念 / 3
1.2.1　可訪問性第一 / 3
1.2.2　可用性其次 / 5
1.2.3　優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng) / 5
1.3　對(duì)內(nèi)容的思考過(guò)程 / 6
1.4　本書中的CSS3模塊 / 7
1.5　常用CSS3特性 / 9
1.5.1　廠商前綴 / 9
1.5.2　CSS3顏色 / 11
1.5.3　用rem調(diào)整文本大小 / 13
1.5.4　CSS3選擇器 / 15
小結(jié) / 24
第2章　利用HTML5與JavaScript構(gòu)建堅(jiān)實(shí)的跨瀏覽器模板 / 25
2.1　從HTML5語(yǔ)義開始 / 26
2.1.1　為什么用HTML5 / 26
2.1.2　HTML5錯(cuò)誤處理 / 27
2.2　建立模板 / 28
2.2.1　HTML5的DOCTYPE / 28
2.2.2　語(yǔ)言和基本文檔綱要 / 29
2.2.3　定義文檔字符集 / 29
2.2.4　XHTML5和代碼風(fēng)格 / 30
2.2.5　為HTML5語(yǔ)義元素添加跨瀏覽器支持性 / 30
2.3　校驗(yàn)HTML5 / 32
2.4　探索HTML5元素 / 33
2.4.1　<audio>與<video> / 34
2.4.2　<article>與<section> / 36
2.4.3　<header>與<footer> / 38
2.4.4　<aside> / 38
2.4.5　<nav> / 39
2.4.6　<hgroup> / 39
2.4.7　<figure>與<figcaption> / 40
2.4.8　<time> / 40
2.4.9　<mark> / 42
2.4.10　HTML5表單元素 / 42
2.4.11　<canvas> / 44
2.5　CSS重置和normalize.css / 45
2.6　JavaScript庫(kù)綜述 / 46
2.6.1　css3-mediaqueries-js / 46
2.6.2　CSS3PIE / 47
2.6.3　Modernizr / 48
2.6.4　Selectivizr / 48
2.7　IE條件注釋 / 48
小結(jié) / 50
第3章　讓字體和文本變得有趣 / 51
3.1　蟒蛇來(lái)啦 / 52
3.2　使用Web字體 / 53
3.2.1　給示例使用Web字體 / 54
3.2.2　Web-Font問題 / 56
3.2.3　Windows渲染問題 / 59
3.2.4　商用字體服務(wù) / 62
3.3　CSS3文本爭(zhēng)執(zhí) / 64
3.3.1　文本陰影 / 65
3.3.2　控制文本溢出 / 67
3.3.3　word-wrap打破長(zhǎng)單詞 / 68
3.3.4　控制斷字 / 69
3.4　CSS3排版 / 70
3.4.1　基于Web的連寫和文本渲染優(yōu)化 / 71
3.4.2　啟用Web高級(jí)的字體特性font-feature-settings / 72
3.4.3　連寫和自由連寫 / 73
3.4.4　數(shù)字、分?jǐn)?shù)和序數(shù) / 73
3.4.5　小型大寫字母和小號(hào)大寫字母 / 75
3.4.6　字距調(diào)整 / 76
3.4.7　樣式集和其他組合效果 / 76
3.4.8　font-feature用途的小貼士 / 77
小結(jié) / 78
第4章　CSS3修飾的增強(qiáng)盒子 / 79
4.1　CSS3修飾的光明前景 / 80
4.2　border-radius：圓角的福音 / 82
4.3　使用box-shadow添加立體效果 / 85
4.4　用CSS漸變來(lái)修飾 / 88
4.4.1　線性漸變 / 88
4.4.2　徑向漸變 / 92
4.4.3　為舊版IE提供漸變支持 / 98
4.5　多重背景 / 99
4.6　構(gòu)思巧妙的盒子：border-image / 101
4.7　box-decoration-break / 106
4.8　給橫幅廣告添加修飾 / 107
4.8.1　構(gòu)建基礎(chǔ) / 107
4.8.2　添加CSS3火花 / 109
4.8.3　支持舊版瀏覽器 / 110
4.8.4　改進(jìn)廣告 / 110
小結(jié) / 111
第5章　用CSS3制作動(dòng)畫效果 / 112
5.1　CSS動(dòng)畫 / 113
5.2　變形 / 114
5.2.1　2D變形 / 115
5.2.2　3D變形 / 121
5.3　過(guò)渡 / 134
5.3.1　選擇過(guò)渡的元素 / 135
5.3.2　選擇過(guò)渡持續(xù)時(shí)間 / 136
5.3.3　過(guò)渡延遲時(shí)間 / 136
5.3.4　過(guò)渡的速率變化 / 136
5.3.5　過(guò)渡簡(jiǎn)寫及多重過(guò)渡 / 141
5.4　動(dòng)畫 / 142
5.4.1　建立基本動(dòng)畫 / 142
5.4.2　給元素應(yīng)用動(dòng)畫 / 144
5.4.3　設(shè)置動(dòng)畫持續(xù)時(shí)間 / 145
5.4.4　調(diào)整動(dòng)畫的速率 / 146
5.4.5　增加延遲時(shí)間 / 147
5.4.6　選擇animation-direction:back還是forth / 147
5.4.7　animation-fill-mode / 148
5.4.8　簡(jiǎn)寫和多重動(dòng)畫 / 148
5.5　用動(dòng)畫提升橫幅廣告 / 149
5.6　用Modernizr提供備選方案 / 153
5.6.1　給頁(yè)面添加Modernizr / 154
5.6.2　提供替換樣式 / 155
5.6.3　動(dòng)畫和腳本 / 157
小結(jié) / 163
第6章　使用CSS生成圖標(biāo) / 164
6.1　翻滾吧，圖標(biāo) / 165
6.2　在頁(yè)面上使用圖標(biāo) / 165
6.3　何時(shí)使用圖標(biāo) / 167
6.4　生成圖標(biāo)的基礎(chǔ) / 168
6.4.1　內(nèi)容生成圖標(biāo) / 170
6.4.2　CSS Sprite圖 / 170
6.4.3　更“防彈式”的圖標(biāo) / 171
6.4.4　多背景圖片的修飾圖標(biāo) / 172
6.5　Web字體作為圖標(biāo) / 173
6.6　獨(dú)特的純CSS圖標(biāo) / 176
小結(jié) / 179
第7章　CSS3布局排版 / 180
7.1　CSS3布局模塊簡(jiǎn)介 / 181
7.2　多欄布局 / 182
7.2.1　設(shè)置分欄的數(shù)量 / 183
7.2.2　根據(jù)寬度分欄而非數(shù)量 / 184
7.2.3　定義分欄空隙 / 185
7.2.4　定義分欄內(nèi)容的填充方式 / 185
7.2.5　內(nèi)容的跨欄目布置 / 187
7.2.6　控制欄目的劃分 / 188
7.2.7　實(shí)戰(zhàn)多欄布局 / 189
7.2.8　多欄布局的問題 / 189
7.3　使用Flexbox / 191
7.3.1　控制Flexbox的子項(xiàng)伸縮流的方向 / 192
7.3.2　自定義子元素的顯示順序 / 195
7.3.3　對(duì)齊Flexbox子項(xiàng) / 195
7.3.4　彈性的Flexbox / 197
7.3.5　用Modernizr實(shí)現(xiàn)跨瀏覽器Flexbox / 201
7.4　探索網(wǎng)格 / 201
7.4.1　定義網(wǎng)格結(jié)構(gòu) / 202
7.4.2　將內(nèi)容嵌套在網(wǎng)格上 / 203
7.4.3　一個(gè)真實(shí)的網(wǎng)格例子 / 204
7.4.4　網(wǎng)格問題 / 205
7.5　值得一提的其他布局模塊 / 206
7.5.1　區(qū)域 / 206
7.5.2　排除 / 208
7.5.3　GCPM / 210
小結(jié) / 211
第8章　響應(yīng)式和自適應(yīng)設(shè)計(jì) / 212
8.1　網(wǎng)絡(luò)瀏覽器簡(jiǎn)史 / 213
8.2　響應(yīng)式設(shè)計(jì)策略 / 214
8.2.1　不做任何特殊處理 / 215
8.2.2　不同的設(shè)備提供不同的內(nèi)容 / 215
8.2.3　為不同瀏覽器/設(shè)備優(yōu)化網(wǎng)站 / 218
8.3　彈性布局技術(shù) / 219
8.3.1　可伸縮的容器 / 219
8.3.2　響應(yīng)式媒體布局 / 220
8.4　媒介查詢 / 223
8.4.1　一些媒介查詢的例子 / 225
8.4.2　移動(dòng)設(shè)備優(yōu)先 / 230
8.5　媒介查詢補(bǔ)丁 / 231
8.6　提供響應(yīng)式圖片 / 232
8.7　移動(dòng)瀏覽器是個(gè)騙子 / 233
8.8　高保真設(shè)備 / 237
8.9　一個(gè)響應(yīng)式的重金屬橫幅廣告 / 239
8.9.1　第一種選擇：800px或者更小 / 239
8.9.2　第二種選擇：480px或者更小 / 239
小結(jié) / 241