內容簡介
本書是CSS3領域的標準性著作,由資深Web前端工程師根據CSS3的全新技術標準撰寫。內容極為全麵、豐富和翔實,由淺入深地講解瞭CSS3新特性的語法、功能和使用技巧,涵蓋選擇器、邊框、背景、文本、顔色、UI、動畫、新型盒模型、媒體查詢、響應式設計等各種模塊;寫作方式創新,有趣且易懂,用圖解的方式來描述CSS3的每一個特性甚至每一個步驟都配有實戰效果圖;包含大量案例,實戰性強,每個特性都有作者從實踐中精心歸納和挑選齣來的案例輔助講解,同時還包含一個綜閤性的大案例。無論你是完全沒有經驗的準前端工程師,還是已經有一定經驗的前端工程師,如果你想係統學習CSS3,那麼本書將會是你的閤適選擇;如果你是一位成熟的前端開發工程師,但時常為如何閤理地使用某些特性而費時去查閱相關資料。
作者簡介
廖偉華(網名:大漠), 資深Web前端工程師,W3cplus創始人,目前就職於Ctrip UED。中國Drupal社區核心成員之一。對HTML5、CSS3、XHTML和Sass等前端腳本語言有非常深入的認識和豐富的實踐經驗,尤其專注對CSS3的研究,是國內zui早研究和使用CSS3技術的一批人。現在還關注Web産品策劃、交互設計、SEO以及移動端開發。2012年4月刊的《程序員》雜誌上發錶文章“Twitter Bootstrap:前端框架利器”。
目錄
Contents 目 錄
前 言
第1章 揭開CSS3的麵紗 1
1.1 什麼是CSS3 1
1.1.1 CSS3的新特性 2
1.1.2 CSS3的發展狀況 4
1.1.3 現在能使用CSS3嗎 5
1.1.4 使用CSS3有什麼好處 5
1.2 瀏覽器對CSS3的支持狀況 6
1.2.1 經典迴顧:圖說瀏覽器大戰 7
1.2.2 瀏覽器的市場份額 8
1.2.3 主流瀏覽器對CSS3支持狀況 9
1.3 漸進增強 11
1.3.1 漸進增強與優雅降級 11
1.3.2 漸進增強的優點 12
1.4 CSS3的現狀及未來 13
1.4.1 誰在使用CSS3 13
1.4.2 CSS3的未來 14
1.5 本章小結 14
第2章 CSS3選擇器 15
2.1 認識CSS選擇器 15
2.1.1 CSS3選擇器的優勢 15
2.1.2 CSS3選擇器分類 16
2.2 基本選擇器 16
2.2.1 基本選擇器語法 16
2.2.2 瀏覽器兼容性 17
2.2.3 實戰體驗:使用基本選擇器 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 層次選擇器語法 21
2.3.2 瀏覽器兼容性 21
2.3.3 實戰體驗:使用層次選擇器選擇元素 21
2.3.4 後代選擇器 23
2.3.5 子選擇器 23
2.3.6 相鄰兄弟選擇器 24
2.3.7 通用兄弟選擇器 25
2.4 動態僞類選擇器 25
2.4.1 動態僞類選擇器語法 26
2.4.2 瀏覽器兼容性 26
2.4.3 實戰體驗:美化按鈕 27
2.5 目標僞類選擇器 29
2.5.1 目標僞類選擇器語法 29
2.5.2 瀏覽器兼容性30
2.5.3 實戰體驗:製作手風琴效果30
2.6 語言僞類選擇器 33
2.6.1 語言僞類選擇器語法33
2.6.2 瀏覽器兼容性 34
2.6.3 實戰體驗:定製不同語言版本引文風格 34
2.7 UI元素狀態僞類選擇器 36
2.7.1 UI元素狀態僞類選擇器語法36
2.7.2 瀏覽器兼容性36
2.7.3 實戰體驗:Bootstrap的錶單元素UI狀態 37
2.8 結構僞類選擇器 41
2.8.1 重溫HTML的DOM樹41
2.8.2 結構僞類選擇器語法 42
2.8.3 瀏覽器兼容性 43
2.8.4 結構僞類選擇器中的n是什麼 44
2.8.5 結構僞類選擇器的使用方法詳解 47
2.8.6 實戰體驗:CSS3美化錶格 61
2.9 否定僞類選擇器 66
2.9.1 否定僞類選擇器語法 66
2.9.2 瀏覽器兼容性 67
2.9.3 實戰體驗:改變圖片效果 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 屬性選擇器語法 73
2.11.2 瀏覽器兼容性 74
2.11.3 屬性選擇器的使用方法詳解 75
2.11.4 實戰體驗:創建個性化鏈接樣式 81
2.12 本章小結 84
第3章 CSS3邊框 85
3.1 CSS3邊框簡介 85
3.1.1 邊框的基本屬性 85
3.1.2 邊框的類型 86
3.1.3 誰在使用CSS3邊框 88
3.2 CSS3邊框顔色屬性 88
3.2.1 border-color屬性的語法及參數 88
3.2.2 瀏覽器兼容性 90
3.2.3 border-color屬性的優勢90
3.2.4 實戰體驗:立體漸變邊框效果 91
3.3 CSS3圖片邊框屬性91
3.3.1 border-image屬性的語法及參數92
3.3.2 border-image屬性使用方法 92
3.3.3 瀏覽器兼容性 99
3.3.4 border-image屬性的優勢 100
3.3.5 實戰體驗:按鈕圓角陰影效果100
3.4 CSS3圓角邊框屬性105
3.4.1 border-radius屬性的語法及參數105
3.4.2 border-radius屬性使用方法107
3.4.3 瀏覽器兼容性 114
3.4.4 border-radius屬性的優勢 115
3.4.5 實戰體驗:製作特殊圖形 115
3.5 CSS3盒子陰影屬性 118
3.5.1 box-shadow屬性的語法及參數118
3.5.2 box-shadow屬性使用方法 119
3.5.3 瀏覽器兼容性129
3.5.4 box-shadow屬性的優勢130
3.5.5 實戰體驗:製作3D搜索錶單130
3.6 本章小結 133
第4章 CSS3背景 134
4.1 CSS3背景屬性簡介134
4.1.1 背景的基本屬性 134
4.1.2 與背景相關的新增屬性 137
4.2 CSS3背景原點屬性 137
4.2.1 background-origin屬性的語法及參數 137
4.2.2 background-origin屬性使用方法 138
4.2.3 瀏覽器兼容性 140
4.3 CSS3背景裁切屬性 141
4.3.1 background-clip屬性的語法及參數 141
4.3.2 background-clip屬性使用方法 143
4.3.3 瀏覽器兼容性 147
4.4 CSS3背景尺寸屬性 148
4.4.1 background-size屬性的語法及參數 148
4.4.2 background-size屬性使用方法 149
4.4.3 瀏覽器兼容性152
4.4.4 實戰體驗:製作全屏背景 153
4.5 內聯元素背景圖像平鋪循環方式 154
4.6 CSS3多背景屬性 154
4.6.1 CSS3多背景語法及參數 155
4.6.2 CSS3多背景的優勢 156
4.6.3 瀏覽器兼容性 156
4.6.4 實戰體驗:製作花邊框 157
4.7 本章小結 159
第5章 CSS3文本 160
5.1 CSS3文本簡介 160
5.2 CSS3文本陰影屬性 161
5.2.1 text-shadow屬性的語法及參數 162
5.2.2 瀏覽器兼容性 162
5.2.3 實戰體驗:製作立體文本 163
5.3 CSS3溢齣文本屬性 166
5.3.1 text-overflow屬性的語法及參數 166
5.3.2 瀏覽器兼容性 166
5.3.3 text-overflow屬性使用方法 167
5.3.4 實戰體驗:製作固定區域的博客列錶 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 文本換行技術對比 180
5.5 本章小結 180
☆第6章 CSS3顔色特性 181
6.1 網頁中的色彩特性 181
6.1.1 網頁色彩的錶現原理 181
6.1.2 Web頁麵的安全色 182
6.1.3 色彩模式 183
6.2 CSS3透明屬性 184
6.2.1 opacity屬性的語法及參數 184
6.2.2 opacity瀏覽器兼容性 185
6.2.3 實戰體驗:製作透明過渡色塊 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 本章小結 197
第7章 CSS3盒模型198
7.1 CSS盒模型簡介 198
7.1.1 什麼是盒模型 198
7.1.2 重置盒模型解析模式 199
7.2 CSS3盒模型屬性200
7.2.1 box-sizing屬性的語法及參數 200
7.2.2 瀏覽器兼容性 201
7.2.3 實戰體驗:box-sizing拯救瞭布局 202
7.3 CSS3內容溢齣屬性 209
7.3.1 overflow-x和overflow-y屬性的語法及參數 209
7.3.2 瀏覽器兼容性 209
7.4 CSS3自由縮放屬性 210
7.4.1 resize屬性的語法及參數210
7.4.2 瀏覽器兼容性 210
7.4.3 實戰體驗:修改文本域隨意調整大小的功能210
7.5 CSS3外輪廓屬性211
7.5.1 outline屬性的語法及參數 211
7.5.2 瀏覽器兼容性 212
7.5.3 outline和border的對比212
7.5.4 實戰體驗:模仿邊框效果 213
7.6 本章小結 213
第8章 CSS3伸縮布局盒模型214
8.1 Flexbox模型基礎知識214
8.1.1 CSS中的布局模式 214
8.1.2 Flexbox模型的功能 215
8.1.3 Flexbox模型中的術語 215
8.1.4 Flexbox模型規範狀態 218
8.1.5 Flexbox模型瀏覽器兼容性 218
8.1.6 Flexbox模型語法變更 219
8.2 舊版本Flexbox模型的基本使用 221
8.2.1 伸縮容器設置display 222
8.2.2 伸縮流方嚮box-orient 224
8.2.3 布局順序box-direction 226
8.2.4 伸縮換行box-lines229
8.2.5 主軸對齊box-pack 232
8.2.6 側軸對齊box-align 237
8.2.7 伸縮性box-flex 242
8.2.8 顯示順序box-ordinal-group 246
8.2.9 實戰體驗:box製作自適應的三列等高布局249
8.3 混閤版本Flexbox模型的基本使用253
8.3.1 伸縮容器設置display 253
8.3.2 伸縮流方嚮flex-direction 254
8.3.3 伸縮換行flex-wrap 257
8.3.4 伸縮流方嚮與換行flex-flow 259
8.3.5 主軸對齊flex-pack 259
8.3.6 側軸對齊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 主軸對齊justify-content 277
8.4.6 側軸對齊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 本章小結 292
第9章 CSS3多列布局 293
9.1 CSS3多列布局簡介 293
9.1.1 瀏覽器兼容性 293
9.1.2 CSS3多列布局的屬性 294
9.2 CSS3多列布局基本屬性 295
9.2.1 columns屬性的語法及參數 295
9.2.2 瀏覽器兼容性 295
9.2.3 實戰體驗:Web頁麵的多列布局 296
9.3 CSS3多列布局列寬屬性 297
9.3.1 column-width屬性的語法及參數 297
9.3.2 實戰體驗:瀏覽器根據窗口寬度變化調整列數 298
9.4 CSS3多列布局列數屬性 302
9.4.1 column-count屬性的語法及參數 302
9.4.2 實戰體驗:顯示固定列數 302
9.5 CSS3多列布局列間距屬性 303
9.5.1 column-gap屬性的語法及參數 304
9.5.2 實戰體驗:設置列間距304
9.6 CSS3多列布局列邊框樣式屬性 306
9.6.1 column-rule屬性的語法及參數 306
9.6.2 實戰體驗:設置列邊框 307
9.7 CSS3多列布局跨列屬性 309
9.7.1 column-span屬性的語法及參數 310
9.7.2 實戰體驗:文章標題跨列顯示 310
9.8 CSS3多列布局列高度屬性 311
9.9 本章小結 311
☆第10章 CSS3漸變312
10.1 CSS3漸變簡介312
10.1.1 什麼是色標 312
10.1.2 瀏覽器兼容性 313
10.2 CSS3綫性漸變314
10.2.1 CSS3綫性漸變語法與參數 315
10.2.2 CSS3 綫性漸變的基本用法 317
10.2.3 自定義CSS3綫性漸變 324
10.2.4 實戰體驗:CSS3製作漸變按鈕 325
10.3 CSS3徑嚮漸變 333
10.3.1 CSS3徑嚮漸變語法 333
10.3.2 CSS3徑嚮漸變的屬性參數 334
10.3.3 CSS3徑嚮漸變的基本用法 335
10.3.4 實戰體驗:CSS3徑嚮漸變製作圓形圖標按鈕 350
10.4 CSS3重復漸變 353
10.4.1 CSS3重復綫性漸變 353
10.4.2 CSS3重復徑嚮漸變 354
10.4.3 實戰體驗:製作記事本紙張效果 354
10.5 綜閤案例:CSS3漸變製作紋理背景 355
10.6 本章小結 357
第11章 CSS3變形 358
11.1 CSS3變形簡介358
11.1.1 CSS變形屬性及函數 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
精彩書摘
第1章 揭開CSS3的麵紗
如果關注前端方麵的技術,那麼對CSS一定不會陌生,你肯定聽說過CSS3。在使用CSS3之前,應該對這個新一代樣式錶語言的來龍去脈有個基本瞭解。
在本章中,你將知道CSS3與CSS2.1的區彆,以及當前市麵上主流瀏覽器、移動端瀏覽器對CSS3支持的情況。對於尚不完全支持CSS3的瀏覽器,將會為大傢引入一個漸進增強的概念,用一些CSS方法來模擬CSS3的實現方法。最後給大傢簡單介紹一些CSS3引入的新特性及其未來的前景。
1.1 什麼是CSS3
CSS3並不是一門新的語言。如果接觸過CSS就知道,CSS是創建網頁的另一個獨立但並非不重要的一部分。CSS是種層疊樣式錶,是一種樣式語言,用來告訴瀏覽器如何渲染你的Web頁麵。
CSS3是CSS規範的最新版本,在CSS2.1的基礎上增加瞭很多強大的新功能,以幫助開發人員解決一些問題,並且不再需要非語義標簽、復雜的JavaScript腳本以及圖片,例如圓角功能、多背景、透明度、陰影等功能等。CSS2.1是單一的規範,而CSS3被劃分成幾個模塊組,每個模塊組都有自己的規範。這樣的好處是整個CSS3的規範發布不會因為部分難纏的部分而影響其他模塊的推進。
現在先來看看CSS3激動人心的新特性。
1.1.1 CSS3的新特性
CSS3規範並不是獨立的,它重復瞭CSS的部分內容,但在其基礎上進行瞭很多的增補與修改。CSS3與之前的幾個版本相比,其變化是革命性的,雖然它的部分屬性還不能夠被瀏覽器完美的支持,但卻讓我們看到網頁樣式發展的前景,讓我們更具有方嚮感、使命感。
CSS3新特性非常多,這裏挑選一些被瀏覽器支持較為完美、更具實用性的新特性。
前言/序言
為什麼要寫這本書
CSS3是在CSS2.1基礎上擴展而來,事實上,它還沒有完全成熟。有些專傢會告訴你,CSS3現在還用不上,甚至幾年之後都不會有成熟的規範發布。
目前為止CSS3還沒有一套成熟的規範,其中的模塊也在不斷更新,特彆是瀏覽器對CSS3特性的支持也在不斷變化,同時沒有足夠的時間去學習和研究W3C官方文檔和規範,緻使我們學習CSS3變得更為復雜。
為什麼會選擇這個時候編寫這樣一本圖書呢?原因很簡單。對於希望Web應用開發者而言,CSS3可以說是眾望所歸,這也是技術變更的硬性需求。在實際Web應用中新標準的采納程度正在以令人目眩的速度不斷地變更著,眾多瀏覽器廠商也在不斷加快對CSS3新特性的支持。在編寫這本圖書的過程中,我也被迫不斷更新書中的瀏覽器支持錶格。
麵對自己正在使用的瀏覽器,大多數用戶並不真正瞭解其具備的功能有多強大。當然,他們在瀏覽器自動更新後可能會發現一些細微的界麵變化。但他們可能不知道,新版的瀏覽器對哪些CSS3特性有所支持。
本書的目標是幫助開發者更好地掌握CSS3的特性,並且將新技術運用到實際的開發當中,提高自己開發Web程序的水平。
本書麵嚮的讀者
有一定CSS3開發經驗的前端工程師。
本書能幫助你係統掌握CSS3的各項知識,提升技術水平和業務能力。
從事CSS3開發的前端工程師。
由於CSS3涵蓋的新特性非常多,在開發過程中將本書作為速查手冊,提高開發效率。
前端開發愛好者。
如果還不是一名前端工程師,但是對前端開發非常感興趣,本書也能讓你對最新的CSS標準和規範有一個係統和全麵的認識,為學習前端知識打下基礎。
本書的特色
本書最大的特色就是將CSS3特性按模塊功能分類,通過理論、圖解、實戰的方式嚮大傢闡釋CSS3每個特性功能。
內容全麵、豐富、翔實。
由淺到深地講解瞭CSS3新特性的語法、特性以及使用技巧。本書涵蓋瞭CSS3眾多功能模塊,如CSS3選擇器特性、邊框模塊、文本模塊、顔色模塊、UI界麵模塊、CSS3動畫模塊、CSS新型盒模型以及CSS媒體查詢、響應式設計等。
圖解方式,直觀易懂。
圖解的方式是本寫的最大特色之一,在描述每一個CSS3特性過程都配瞭生動的實戰效果,甚至每一步驟都配有相應的效果圖。就算是你對文字理解或者代碼理解有所誤差,實戰效果圖能輔助你更好地理解CSS3每個特性。
案例豐富,實戰性強。
每個CSS3特性都配有實戰體驗,部分案例來自於實際開發之中。同時在每個知識點之後,還提供瞭綜閤案例。通過實踐加強動手能力,更好地掌握CSS3中的每個知識點。
動手實踐纔是掌握一門新技術最有效的途徑。如果能在閱讀本書的過程中逐一親手實現這些案例,那麼在以後的實際開發中自然就會具有相當強的動手能力瞭。
本書的內容
本書包括15章,通過實例來演示CSS3模塊的新特性。
第1章簡單介紹什麼是CSS3,CSS3的好處是什麼,瀏覽器對CSS3的支持狀況,以及CSS3帶來什麼新特性,並且引入漸進增強式的概念。通過對本章的學習,大傢可以在一定的程度上知道一些CSS3的故事。
第2章介紹CSS3選擇器。選擇器是CSS中的核心部分之一,本章先闡述CSS2的選擇器,再引入CSS3新增的選擇器。深入介紹瞭CSS3新增選擇器的功能及其實用性,還有各瀏覽器的兼容性。
第3章詳細介紹CSS3在邊框方麵新增的功能特性,比如邊框色、圖片邊框、邊框圓角等,並與CSS2進行瞭對比。
第4章介紹CSS3背景功能,著重闡述瞭多背景、背景尺寸、背景原點方麵的使用,以讓大傢掌握如何使用CSS3背景功能的新特性。
第5章介紹CSS3文本功能。以前大傢在網頁製作時,隻是設置文本的顔色、字體、字號等。通過對CSS3文本功能的學習,大傢還可以運用文本陰影、文本溢齣、文本換行等功能。
第6章介紹CSS3顔色特性。大傢以前隻有在設計軟件中使用的顔色值現在都可以運用,如RGBA、HSL、HSLA、透明度等。
第7章介紹CSS3基礎盒模型與用戶界麵。盒模型是CSS的重中之重,CSS2盒模型功能隻能實現一些基本功能,對於一些特殊的功能需要藉助JavaScript來實現。而在CSS3中這一點將得到很大的改善,可以通過CSS3來直接實現一些特殊的功能。
第8章介紹CSS3的彈性盒模型,給大傢引入一種全新的布局概念,為大傢的頁麵布局帶來革命性的變化。
第9章介紹CSS3多列布局。布局在Web中隨處可見,多列布局在CSS2中都是依靠float或者inline-block來實現的,而這兩個屬性帶來的局限性也是相當大的。CSS3多列布局將會彌補這些不足之處。
第10章介紹CSS3漸變功能。漸變效果在Web中也是一種常見的效果,以前靠設計師製作圖片來完成,不僅增加瞭設計師的工作量,在頁麵中的效果也帶來過多的局限製,擴展性也相當差。CSS3漸變不再需要使用圖片來代替這些特殊的效果。
第11章介紹CSS3變形功能。這是一個全新的功能,在CSS2中要實現需要藉助JavaScript。CSS3的變形功能可以直接使用樣式實現如鏇轉、移位、扭麯、縮放等效果。
第12章介紹CSS3過渡功能。大傢在Web製作中,使過渡效果不再生硬,變得細膩、流暢。
第13章介紹CSS3動畫功能。
第14章介紹Media Query與Responsive布局。隨著移動設備和寬屏瀏覽器的普及,單一的設計不能滿足Web頁麵的設計需求,此時CSS3的Media Query新特性中齣現瞭一個新的布局概念——Responsive。本章中大傢將體會到Media Query與Responsive布局的強大功能。
第15章介紹嵌入Web字體。瀏覽器僅限於用戶在其係統上安裝的字體呈現文本。CSS3使用@font-face改變瞭這一格局。網站不再受限於少量字體,如Arial、Verdana、Times和Georgia等。
如何閱讀本書
本書結構不是按層進式安排的,章節之間是按CSS3的模塊分類,讀者閱讀本書時無須按照先後順序進行,可以挑選自己喜歡的章節閱讀。但如果按章節的編排順序逐章閱讀,會更係統、更全麵地學習CSS3,從中獲得最大受益。
閱讀本書的案例時,盡量不要照抄書中的代碼,在理解案例的設計思路基礎上,自己動手開發相似功能的應用,並創造齣滿足自己需求的功能,舉一反三。
本書中使用的約定
本書案例已在主流瀏覽器上進行過測試瞭。分彆是:Firefox 12.0、Google Chrome 19.0.1084.52、Safari 5.17、Opera 11.64、IE 9。
同時在一些廣泛使用的舊版本瀏覽器(如IE 8)上也做瞭測試。很多情況下,CSS3的效果也能體現在較低版本上,頁麵能保持正常閱讀,而且效果也不會太差。對於每一個CSS3特性,將盡可能地為低版本瀏覽器尋求變通的備用方案,使之能兼容那些不被原生支持的瀏覽器。
針對每個瀏覽器版本,我們會標注相對應的屬性在哪個版本號中開始支持。一些CSS3特性需要添加相應瀏覽器的渲染引擎的前綴纔會生效,我們將會在後麵的章節中依次介紹各瀏覽器的渲染引擎的前綴名稱,以及CSS3特性在對應瀏覽器下的寫法。
在閱讀本書時有些約定,有必要在這裏先說明。
W3C錶示萬維網聯盟(World Wide Web Consortium),是製定Web官方標準和規範(如CSS3)的組織。
初始值(即默認值)是用戶不顯式聲明時元素所具有的屬性值。需特彆指明的是,屬性是元素的本質,而不是用戶自定義的屬性。
IE 8及以下版本代錶IE 8、IE 7和IE 6。
Webkit引擎內核的瀏覽器是指Safari(包括移動版本和桌麵版本)、Google Chrome和其他近期使用版本的Webkit頁麵渲染引擎的瀏覽器,其私有屬性的前綴是-webkit-。
Gecko引擎內核的瀏覽器是指Mozilla,常指的是Firefox瀏覽器,其私有屬性的前端綴是-moz-。
Presto引擎內核的瀏覽器是指Opera,其私有屬性的前綴是-o-。
KHTML引擎內核的瀏覽器是指Konqueror,其私有屬性的前綴是-khtml-。
Trident引擎內核的瀏覽器是指Internet Explorer,其私有屬性的前綴是-ms-。
在沒有特彆聲明的情況下,本書所指的瀏覽器僅適用於Windows係統,不適用於Mac係統和移動端。
偶爾會碰到“所有瀏覽器”這個說法,此時僅代錶目前所有廣泛使用的瀏覽器,而並非字麵意義所涵蓋的那些可能僅占零星市場份額的不知名的瀏覽器。
“HTML”指HTML和XHTML這兩種語言。
“CSS”指CSS2.1規範,除非特彆聲明。
本書所有案例代碼都是以HTML 5的DTD編寫。但這僅僅錶示使用短小精悍的HTML 5文檔聲明,還有更簡潔的meta字符編碼、style和script標簽。沒有使用任何HTML 5的新標簽,比如section、header、nav和article,所以頁麵可以在IE 8及以下版本正常運行,可以在自己的頁麵裏將其更換為喜歡的標簽。所有示例也同樣兼容HTML 4.01和XHTML 1.0。
為瞭方便閱讀,本書中的部分案例代碼僅提供瞭CSS樣式代碼和局部HTML代碼,所有CSS實例代碼必須置於一個外部樣式文件或HTML文檔的標簽內。
由於CSS3技術還在不斷的完善與更新中,建議根據本書提供的參考地址,獲取有關CSS3最新信息與更新。
勘誤和支持
由於作者的水平有限,編寫時間倉促,書中難免會齣現一些錯誤或者不準確的地方,懇請讀者批評指正。為此,我特意創建瞭一個在綫支持站點http://www.w3cplus.com/book-comment.html。大傢可以將書中的錯誤發布在頁麵的評論中,遇到任何問題,可以留言或者發送郵件到w3cplus@hotmail.com,我將盡量提供最滿意的答案。大傢還可以關注微信公眾賬號ednote進入“第三極社區”微社區與廣大讀者和本書作者互動。書中的全部源文件可以從華章網站(http://www.hzbook.com)下載,我也會將相應的功能及時更正。期待能夠得到你們真摯反饋。