圖解css3核心技術(shù)與案例實(shí)戰(zhàn) pdf 廖偉華 掃描版

圖解css3核心技術(shù)與案例實(shí)戰(zhàn)是根據(jù)CSS3規(guī)范撰寫CSS3學(xué)習(xí)資料和備查手冊(cè)，由資深Web前端工程師大漠（真名廖偉華）編著。全書理論知識(shí)系統(tǒng)且全面，以圖解的方式講解CSS3的各項(xiàng)功能和特性，包含大量實(shí)戰(zhàn)案例，直觀易懂，實(shí)戰(zhàn)性強(qiáng)，是CSS3領(lǐng)域的標(biāo)準(zhǔn)性著作。圖解css3內(nèi)容極為全面、豐富和翔實(shí)，由淺入深地講解了CSS3新特性的語(yǔ)法、功能和使用技巧，涵蓋選擇器、邊框、背景、文本、顏色、UI、動(dòng)畫、新型盒模型、媒體查詢、響應(yīng)式設(shè)計(jì)等各種模塊；寫作方式創(chuàng)新，有趣且易懂，用圖解的方式來(lái)描述CSS3的每一個(gè)特性甚至每一個(gè)步驟都配有實(shí)戰(zhàn)效果圖；包含大量案例，實(shí)戰(zhàn)性強(qiáng)，每個(gè)特性都有作者從實(shí)踐中精心歸納和挑選出來(lái)的案例輔助講解，同時(shí)還包含一個(gè)綜合性的大案例，是你學(xué)習(xí)css3的不二選擇。

內(nèi)容介紹

《圖解css3核心技術(shù)與案例實(shí)戰(zhàn)》包括15章，通過(guò)實(shí)例來(lái)演示CSS3模塊的新特性：

第1章簡(jiǎn)單介紹什么是CSS3，CSS3的好處是什么，瀏覽器對(duì)CSS3的支持狀況，以及CSS3帶來(lái)什么新特性，并且引入漸進(jìn)增強(qiáng)式的概念。通過(guò)對(duì)本章的學(xué)習(xí)，大家可以在一定的程度上知道一些CSS3的故事。

第2章介紹CSS3選擇器。選擇器是CSS中的核心部分之一，本章先闡述CSS2的選擇器，再引入CSS3新增的選擇器。深入介紹了CSS3新增選擇器的功能及其實(shí)用性，還有各瀏覽器的兼容性。

第3章詳細(xì)介紹CSS3在邊框方面新增的功能特性，比如邊框色、圖片邊框、邊框圓角等，并與CSS2進(jìn)行了對(duì)比。

第4章介紹CSS3背景功能，著重闡述了多背景、背景尺寸、背景原點(diǎn)方面的使用，以讓大家掌握如何使用CSS3背景功能的新特性。

第5章介紹CSS3文本功能。以前大家在網(wǎng)頁(yè)制作時(shí)，只是設(shè)置文本的顏色、字體、字號(hào)等。通過(guò)對(duì)CSS3文本功能的學(xué)習(xí)，大家還可以運(yùn)用文本陰影、文本溢出、文本換行等功能。

第6章介紹CSS3顏色特性。大家以前只有在設(shè)計(jì)軟件中使用的顏色值現(xiàn)在都可以運(yùn)用，如RGBA、HSL、HSLA、透明度等。

第7章介紹CSS3基礎(chǔ)盒模型與用戶界面。盒模型是CSS的重中之重，CSS2盒模型功能只能實(shí)現(xiàn)一些基本功能，對(duì)于一些特殊的功能需要借助JavaScript來(lái)實(shí)現(xiàn)。而在CSS3中這一點(diǎn)將得到很大的改善，可以通過(guò)CSS3來(lái)直接實(shí)現(xiàn)一些特殊的功能。

第8章介紹CSS3的彈性盒模型，給大家引入一種全新的布局概念，為大家的頁(yè)面布局帶來(lái)革命性的變化。

第9章介紹CSS3多列布局。布局在Web中隨處可見(jiàn)，多列布局在CSS2中都是依靠float或者inline-block來(lái)實(shí)現(xiàn)的，而這兩個(gè)屬性帶來(lái)的局限性也是相當(dāng)大的。CSS3多列布局將會(huì)彌補(bǔ)這些不足之處。

第10章介紹CSS3漸變功能。漸變效果在Web中也是一種常見(jiàn)的效果，以前靠設(shè)計(jì)師制作圖片來(lái)完成，不僅增加了設(shè)計(jì)師的工作量，在頁(yè)面中的效果也帶來(lái)過(guò)多的局限制，擴(kuò)展性也相當(dāng)差。CSS3漸變不再需要使用圖片來(lái)代替這些特殊的效果。

第11章介紹CSS3變形功能。這是一個(gè)全新的功能，在CSS2中要實(shí)現(xiàn)需要借助JavaScript。CSS3的變形功能可以直接使用樣式實(shí)現(xiàn)如旋轉(zhuǎn)、移位、扭曲、縮放等效果。

第12章介紹CSS3過(guò)渡功能。大家在Web制作中，使過(guò)渡效果不再生硬，變得細(xì)膩、流暢。

第13章介紹CSS3動(dòng)畫功能。

第14章介紹Media Query與Responsive布局。隨著移動(dòng)設(shè)備和寬屏瀏覽器的普及，單一的設(shè)計(jì)不能滿足Web頁(yè)面的設(shè)計(jì)需求，此時(shí)CSS3的Media Query新特性中出現(xiàn)了一個(gè)新的布局概念——Responsive。本章中大家將體會(huì)到Media Query與Responsive布局的強(qiáng)大功能。

第15章介紹嵌入Web字體。瀏覽器僅限于用戶在其系統(tǒng)上安裝的字體呈現(xiàn)文本。CSS3使用@font-face改變了這一格局。網(wǎng)站不再受限于少量字體，如Arial、Verdana、Times和Georgia等。

使用說(shuō)明

1、下載并解壓，得出pdf文件

2、如果打不開(kāi)本文件，請(qǐng)務(wù)必下載pdf閱讀器

3、安裝后，在打開(kāi)解壓得出的pdf文件

4、雙擊進(jìn)行閱讀

圖解css3核心技術(shù)與案例實(shí)戰(zhàn)章節(jié)目錄

Contents 目　錄

前　言

第1章　揭開(kāi)CSS3的面紗 1

1.1　什么是CSS3 1

1.1.1　CSS3的新特性 2

1.1.2　CSS3的發(fā)展?fàn)顩r 4

1.1.3　現(xiàn)在能使用CSS3嗎 5

1.1.4　使用CSS3有什么好處 5

1.2　瀏覽器對(duì)CSS3的支持狀況 6

1.2.1　經(jīng)典回顧：圖說(shuō)瀏覽器大戰(zhàn) 7

1.2.2　瀏覽器的市場(chǎng)份額 8

1.2.3　主流瀏覽器對(duì)CSS3支持狀況 9

1.3　漸進(jìn)增強(qiáng) 11

1.3.1　漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí) 11

1.3.2　漸進(jìn)增強(qiáng)的優(yōu)點(diǎn) 12

1.4　CSS3的現(xiàn)狀及未來(lái) 13

1.4.1　誰(shuí)在使用CSS3 13

1.4.2　CSS3的未來(lái) 14

1.5　本章小結(jié) 14

第2章　CSS3選擇器 15

2.1　認(rèn)識(shí)CSS選擇器 15

2.1.1　CSS3選擇器的優(yōu)勢(shì) 15

2.1.2　CSS3選擇器分類 16

2.2　基本選擇器 16

2.2.1　基本選擇器語(yǔ)法 16

2.2.2　瀏覽器兼容性 17

2.2.3　實(shí)戰(zhàn)體驗(yàn)：使用基本選擇器 17

2.2.4　通配選擇器 18

2.2.5　元素選擇器 18

2.2.6　ID選擇器 18

2.2.7　類選擇器 19

2.2.8　群組選擇器 20

2.3　層次選擇器 21

2.3.1　層次選擇器語(yǔ)法 21

2.3.2　瀏覽器兼容性 21

2.3.3　實(shí)戰(zhàn)體驗(yàn)：使用層次選擇器選擇元素 21

2.3.4　后代選擇器 23

2.3.5　子選擇器 23

2.3.6　相鄰兄弟選擇器 24

2.3.7　通用兄弟選擇器 25

2.4　動(dòng)態(tài)偽類選擇器 25

2.4.1　動(dòng)態(tài)偽類選擇器語(yǔ)法 26

2.4.2　瀏覽器兼容性 26

2.4.3　實(shí)戰(zhàn)體驗(yàn)：美化按鈕 27

2.5　目標(biāo)偽類選擇器 29

2.5.1　目標(biāo)偽類選擇器語(yǔ)法 29

2.5.2　瀏覽器兼容性30

2.5.3　實(shí)戰(zhàn)體驗(yàn)：制作手風(fēng)琴效果30

2.6　語(yǔ)言偽類選擇器 33

2.6.1　語(yǔ)言偽類選擇器語(yǔ)法33

2.6.2　瀏覽器兼容性 34

2.6.3　實(shí)戰(zhàn)體驗(yàn)：定制不同語(yǔ)言版本引文風(fēng)格 34

2.7　UI元素狀態(tài)偽類選擇器 36

2.7.1　UI元素狀態(tài)偽類選擇器語(yǔ)法36

2.7.2　瀏覽器兼容性36

2.7.3　實(shí)戰(zhàn)體驗(yàn)：Bootstrap的表單元素UI狀態(tài) 37

2.8　結(jié)構(gòu)偽類選擇器 41

2.8.1　重溫HTML的DOM樹(shù)41

2.8.2　結(jié)構(gòu)偽類選擇器語(yǔ)法 42

2.8.3　瀏覽器兼容性 43

2.8.4　結(jié)構(gòu)偽類選擇器中的n是什么 44

2.8.5　結(jié)構(gòu)偽類選擇器的使用方法詳解 47

2.8.6　實(shí)戰(zhàn)體驗(yàn)：CSS3美化表格 61

2.9　否定偽類選擇器 66

2.9.1　否定偽類選擇器語(yǔ)法 66

2.9.2　瀏覽器兼容性 67

2.9.3　實(shí)戰(zhàn)體驗(yàn)：改變圖片效果 67

2.10　偽元素 69

2.10.1　偽元素::first-letter 69

2.10.2　偽元素::first-line 70

2.10.3　偽元素::before和::after 70

2.10.4　偽元素::selection 72

2.11　屬性選擇器 73

2.11.1　屬性選擇器語(yǔ)法 73

2.11.2　瀏覽器兼容性 74

2.11.3　屬性選擇器的使用方法詳解 75

2.11.4　實(shí)戰(zhàn)體驗(yàn)：創(chuàng)建個(gè)性化鏈接樣式 81

2.12　本章小結(jié) 84

第3章　CSS3邊框 85

3.1　CSS3邊框簡(jiǎn)介 85

3.1.1　邊框的基本屬性 85

3.1.2　邊框的類型 86

3.1.3　誰(shuí)在使用CSS3邊框 88

3.2　CSS3邊框顏色屬性 88

3.2.1　border-color屬性的語(yǔ)法及參數(shù) 88

3.2.2　瀏覽器兼容性 90

3.2.3　border-color屬性的優(yōu)勢(shì)90

3.2.4　實(shí)戰(zhàn)體驗(yàn)：立體漸變邊框效果 91

3.3　CSS3圖片邊框?qū)傩?1

3.3.1　border-image屬性的語(yǔ)法及參數(shù)92

3.3.2　border-image屬性使用方法 92

3.3.3　瀏覽器兼容性 99

3.3.4　border-image屬性的優(yōu)勢(shì) 100

3.3.5　實(shí)戰(zhàn)體驗(yàn)：按鈕圓角陰影效果100

3.4　CSS3圓角邊框?qū)傩?05

3.4.1　border-radius屬性的語(yǔ)法及參數(shù)105

3.4.2　border-radius屬性使用方法107

3.4.3　瀏覽器兼容性 114

3.4.4　border-radius屬性的優(yōu)勢(shì) 115

3.4.5　實(shí)戰(zhàn)體驗(yàn)：制作特殊圖形 115

3.5　CSS3盒子陰影屬性 118

3.5.1　box-shadow屬性的語(yǔ)法及參數(shù)118

3.5.2　box-shadow屬性使用方法 119

3.5.3　瀏覽器兼容性129

3.5.4　box-shadow屬性的優(yōu)勢(shì)130

3.5.5　實(shí)戰(zhàn)體驗(yàn)：制作3D搜索表單130

3.6　本章小結(jié) 133

第4章　CSS3背景 134

4.1　CSS3背景屬性簡(jiǎn)介134

4.1.1　背景的基本屬性 134

4.1.2　與背景相關(guān)的新增屬性 137

4.2　 CSS3背景原點(diǎn)屬性 137

4.2.1　background-origin屬性的語(yǔ)法及參數(shù) 137

4.2.2　background-origin屬性使用方法 138

4.2.3　瀏覽器兼容性 140

4.3　CSS3背景裁切屬性 141

4.3.1　background-clip屬性的語(yǔ)法及參數(shù) 141

4.3.2　background-clip屬性使用方法 143

4.3.3　瀏覽器兼容性 147

4.4　CSS3背景尺寸屬性 148

4.4.1　background-size屬性的語(yǔ)法及參數(shù) 148

4.4.2　background-size屬性使用方法 149

4.4.3　瀏覽器兼容性152

4.4.4　實(shí)戰(zhàn)體驗(yàn)：制作全屏背景 153

4.5　內(nèi)聯(lián)元素背景圖像平鋪循環(huán)方式 154

4.6　CSS3多背景屬性 154

4.6.1　CSS3多背景語(yǔ)法及參數(shù) 155

4.6.2　CSS3多背景的優(yōu)勢(shì) 156

4.6.3　瀏覽器兼容性 156

4.6.4　實(shí)戰(zhàn)體驗(yàn)：制作花邊框 157

4.7　本章小結(jié) 159

第5章　CSS3文本 160

5.1　CSS3文本簡(jiǎn)介 160

5.2　CSS3文本陰影屬性 161

5.2.1　text-shadow屬性的語(yǔ)法及參數(shù) 162

5.2.2　瀏覽器兼容性 162

5.2.3　實(shí)戰(zhàn)體驗(yàn)：制作立體文本 163

5.3　CSS3溢出文本屬性 166

5.3.1　text-overflow屬性的語(yǔ)法及參數(shù) 166

5.3.2　瀏覽器兼容性 166

5.3.3　text-overflow屬性使用方法 167

5.3.4　實(shí)戰(zhàn)體驗(yàn)：制作固定區(qū)域的博客列表 168

5.4　CSS3文本換行 170

5.4.1　word-wrap屬性 170

5.4.2　word-break屬性 173

5.4.3　white-space屬性 177

5.4.4　文本換行技巧 179

5.4.5　文本換行技術(shù)對(duì)比 180

5.5　本章小結(jié) 180

第6章　CSS3顏色特性 181

6.1　網(wǎng)頁(yè)中的色彩特性 181

6.1.1　網(wǎng)頁(yè)色彩的表現(xiàn)原理 181

6.1.2　Web頁(yè)面的安全色 182

6.1.3　色彩模式 183

6.2　CSS3透明屬性 184

6.2.1　opacity屬性的語(yǔ)法及參數(shù) 184

6.2.2　opacity瀏覽器兼容性 185

6.2.3　實(shí)戰(zhàn)體驗(yàn)：制作透明過(guò)渡色塊 185

6.3　CSS3顏色模式 187

6.3.1　RGBA顏色模式 187

6.3.2　HSL顏色模式 190

6.3.3　HSLA顏色模式 194

6.3.4　RGBA和HSLA顏色模式之間的選擇 196

6.3.5　RGBA/HSLA的IE兼容方案 196

6.3.6　RGBA/HSLA濾鏡格式 197

6.4　本章小結(jié) 197

第7章　CSS3盒模型198

7.1　CSS盒模型簡(jiǎn)介 198

7.1.1　什么是盒模型 198

7.1.2　重置盒模型解析模式 199

7.2　CSS3盒模型屬性200

7.2.1　box-sizing屬性的語(yǔ)法及參數(shù) 200

7.2.2　瀏覽器兼容性 201

7.2.3　實(shí)戰(zhàn)體驗(yàn)：box-sizing拯救了布局 202

7.3　CSS3內(nèi)容溢出屬性 209

7.3.1　overflow-x和overflow-y屬性的語(yǔ)法及參數(shù) 209

7.3.2　瀏覽器兼容性 209

7.4　CSS3自由縮放屬性 210

7.4.1　resize屬性的語(yǔ)法及參數(shù)210

7.4.2　瀏覽器兼容性 210

7.4.3　實(shí)戰(zhàn)體驗(yàn)：修改文本域隨意調(diào)整大小的功能210

7.5　CSS3外輪廓屬性211

7.5.1　outline屬性的語(yǔ)法及參數(shù) 211

7.5.2　瀏覽器兼容性 212

7.5.3　outline和border的對(duì)比212

7.5.4　實(shí)戰(zhàn)體驗(yàn)：模仿邊框效果 213

7.6　本章小結(jié) 213

第8章　CSS3伸縮布局盒模型214

8.1　Flexbox模型基礎(chǔ)知識(shí)214

8.1.1　CSS中的布局模式 214

8.1.2　Flexbox模型的功能 215

8.1.3　Flexbox模型中的術(shù)語(yǔ) 215

8.1.4　Flexbox模型規(guī)范狀態(tài) 218

8.1.5　Flexbox模型瀏覽器兼容性 218

8.1.6　Flexbox模型語(yǔ)法變更 219

8.2　舊版本Flexbox模型的基本使用 221

8.2.1　伸縮容器設(shè)置display 222

8.2.2　伸縮流方向box-orient 224

8.2.3　布局順序box-direction 226

8.2.4　伸縮換行box-lines229

8.2.5　主軸對(duì)齊box-pack 232

8.2.6　側(cè)軸對(duì)齊box-align 237

8.2.7　伸縮性box-flex 242

8.2.8　顯示順序box-ordinal-group 246

8.2.9　實(shí)戰(zhàn)體驗(yàn)：box制作自適應(yīng)的三列等高布局249

8.3　混合版本Flexbox模型的基本使用253

8.3.1　伸縮容器設(shè)置display 253

8.3.2　伸縮流方向flex-direction 254

8.3.3　伸縮換行flex-wrap 257

8.3.4　伸縮流方向與換行flex-flow 259

8.3.5　主軸對(duì)齊flex-pack 259

8.3.6　側(cè)軸對(duì)齊flex-align 262

8.3.7　堆棧伸縮行flex-line-pack 266

8.3.8　伸縮性flex 271

8.3.9　顯示順序flex-order 273

8.4　新版本Flexbox模型的基本使用 275

8.4.1　伸縮容器display 275

8.4.2　伸縮流方向flex-direction 276

8.4.3　伸縮換行flex-wrap 276

8.4.4　伸縮流方向與換行flex-flow 277

8.4.5　主軸對(duì)齊justify-content 277

8.4.6　側(cè)軸對(duì)齊align-items和align-self 278

8.4.7　堆棧伸縮行align-content 280

8.4.8　伸縮性flex 281

8.4.9　顯示順序order 285

8.5　綜合案例：跨瀏覽器的三列布局 288

8.6　本章小結(jié) 292

第9章　CSS3多列布局 293

9.1　CSS3多列布局簡(jiǎn)介 293

9.1.1　瀏覽器兼容性 293

9.1.2　CSS3多列布局的屬性 294

9.2　CSS3多列布局基本屬性 295

9.2.1　columns屬性的語(yǔ)法及參數(shù) 295

9.2.2　瀏覽器兼容性 295

9.2.3　實(shí)戰(zhàn)體驗(yàn)：Web頁(yè)面的多列布局 296

9.3　CSS3多列布局列寬屬性 297

9.3.1　column-width屬性的語(yǔ)法及參數(shù) 297

9.3.2　實(shí)戰(zhàn)體驗(yàn)：瀏覽器根據(jù)窗口寬度變化調(diào)整列數(shù) 298

9.4　CSS3多列布局列數(shù)屬性 302

9.4.1　column-count屬性的語(yǔ)法及參數(shù) 302

9.4.2　實(shí)戰(zhàn)體驗(yàn)：顯示固定列數(shù) 302

9.5　CSS3多列布局列間距屬性 303

9.5.1　column-gap屬性的語(yǔ)法及參數(shù) 304

9.5.2　實(shí)戰(zhàn)體驗(yàn)：設(shè)置列間距304

9.6　CSS3多列布局列邊框樣式屬性 306

9.6.1　column-rule屬性的語(yǔ)法及參數(shù) 306

9.6.2　實(shí)戰(zhàn)體驗(yàn)：設(shè)置列邊框 307

9.7　CSS3多列布局跨列屬性 309

9.7.1　column-span屬性的語(yǔ)法及參數(shù) 310

9.7.2　實(shí)戰(zhàn)體驗(yàn)：文章標(biāo)題跨列顯示 310

9.8　CSS3多列布局列高度屬性 311

9.9　本章小結(jié) 311

第10章　CSS3漸變312

10.1　CSS3漸變簡(jiǎn)介312

10.1.1　什么是色標(biāo) 312

10.1.2　瀏覽器兼容性 313

10.2　CSS3線性漸變314

10.2.1　CSS3線性漸變語(yǔ)法與參數(shù) 315

10.2.2　CSS3 線性漸變的基本用法 317

10.2.3　自定義CSS3線性漸變 324

10.2.4　實(shí)戰(zhàn)體驗(yàn)：CSS3制作漸變按鈕 325

10.3　CSS3徑向漸變 333

10.3.1　CSS3徑向漸變語(yǔ)法 333

10.3.2　CSS3徑向漸變的屬性參數(shù) 334

10.3.3　CSS3徑向漸變的基本用法 335

10.3.4　實(shí)戰(zhàn)體驗(yàn)：CSS3徑向漸變制作圓形圖標(biāo)按鈕 350

10.4　CSS3重復(fù)漸變 353

10.4.1　CSS3重復(fù)線性漸變 353

10.4.2　CSS3重復(fù)徑向漸變 354

10.4.3　實(shí)戰(zhàn)體驗(yàn)：制作記事本紙張效果 354

10.5　綜合案例：CSS3漸變制作紋理背景 355

10.6　本章小結(jié) 357

第11章　CSS3變形 358

11.1　CSS3變形簡(jiǎn)介358

11.1.1　CSS變形屬性及函數(shù) 358

11.1.2　瀏覽器兼容性 359

11.2　CSS變形屬性詳解 360

11.2.1　transform屬性 360

11.2.2　transform-origin屬性 363

11.2.3　transform-style屬性 370

11.2.4　perspective屬性 372

11.2.5　perspective-origin屬性 377

11.2.6　backface-visibility屬性 380

11.3　CSS3 2D變形 385

11.3.1　2D位移 385

11.3.2　2D縮放 390