CSS 3實戰

CSS 3實戰

《CSS 3實戰》是2011年5月機械工業出版社出版的圖書,作者是成林。

基本介紹

  • 中文名:CSS 3實戰
  • 作者:成林
  • 出版社:機械工業出版社
  • ISBN:9787111341550
內容簡介,圖書目錄,

內容簡介

全書一共分為9章,首先從巨觀上介紹了CSS 3技術的最新發展現狀、新特性,以及現有的主流瀏覽器對這些新特性的支持情況;然後詳細講解了CSS 3的選擇器、文本特性、顏色特性、彈性布局、框線和背景特性、盒模型、UI設計、多列布局、圓角和陰影、漸變、變形、轉換、動畫、投影、開放字型、設備類型、語音樣式等重要的理論知識,這部分內容是本書的基礎和核心。不僅每個知識點都配有豐富的、精心設計的實戰案例,而且詳細介紹了每一種新特性在各種主流瀏覽器上的兼容性,旨在幫助設計師們提高設計的安全性。
本書全彩印刷,排版、設計和裝幀也非常精美,既適合學習參考,也適合收藏。無論你是前端領域的新人,還是有著豐富經驗的老手,都能通過本書系統而全面地學習和實踐CSS 3的最新技術,為迎接新一輪的Web技術革命打下堅實的基礎。

圖書目錄

前言
第 1 章 預覽激動人心的CSS 3 1
1.1  CSS 3發展概述 1
1.2  CSS 3模組化簡介 2
1.3  CSS 3新特性概覽 4
1.4  主流瀏覽器對CSS 3的支持 8
1.5  CSS 3的未來和思考 9
第 2 章 CSS 3新增的選擇器 11
2.1 屬性選擇器 13
實戰體驗:文檔共享的友善之舉 14
2.2 結構偽類選擇器 17
實戰體驗1:設計優雅的數據表格 19
實戰體驗2:CSS大戰保齡球 21
實戰體驗3:讓枯燥的列表更有趣 27
實戰體驗4:清理圓角框線中的垃圾標籤 29
2.3  UI元素狀態偽類選擇器 33
實戰體驗1:設計可用的表單 36
實戰體驗2:設計友好、易用的表單 40
2.4  其他新增選擇器 45
實戰體驗1:設計層序化的數據表格 47
實戰體驗2:改善頁內導航的視覺體驗 50
第3章 增強的文本和顏色功能 54
3.1 文本陰影—text-shadow屬性 56
實戰體驗:設計超酷的黑貓警長首頁 62
3.2 溢出文本省略—text-over flow屬性 64
實戰體驗:設計固定區域的新聞列表 66
3.3 文本換行顯示—word-wrop屬性 67
實戰體驗:防止表格標題行換行 71
3.4 CSS 3文本模組解析 73
3.5 CSS 3不同版本之間的文本規範的差異 79
3.6 HSL色彩模式 80
實戰體驗:網頁配色解決方案表 81
3.7 HSLA色彩模式 86
實戰體驗:模擬漸變色條 87
3.8 RGBA色彩模式 88
實戰體驗:設計帶陰影框線的表單 88
3.9 不透明度—opacity屬性 90
實戰體驗:設計燈箱廣告背景布 91
第4章 新增的彈性盒模型 93
4.1 定義盒子的布局取向—box-orient屬性 95
實戰體驗:設計多欄布局 96
4.2 定義盒子的布局順序—box-direction屬性 99
實戰體驗:反向布局網頁 100
4.3 定義盒子布局位置—box-ordinal-group屬性 101
實戰體驗:垂直網頁布局 102
4.4 定義盒子的彈性空間—box-flex屬性 104
實戰體驗:自適應欄目寬度設計 105
4.5 管理盒子的空間—box-pack和box-align屬性 109
實戰體驗:自適應布局居中設計 111
4.6 空間溢出管理—box-lines屬性 115
實戰體驗:讓子元素分行顯示 115
4.7 彈性布局綜合實戰—打造新技術含量的部落格 117
4.7.1 構建部落格頁的基本結構 117
4.7.2 完善部落格頁的結構 118
4.7.3 彈性布局設計 119
第5章 完善的盒模型和UI設計 124
5.1 定義多色框線—border-color屬性 124
實戰體驗:設計立體框線 127
5.2 定義框線背景圖—border-image屬性 128
實戰體驗:設計各種精巧的框線 138
5.3 設計圓角—border-radius屬性 140
5.4 設計塊陰影—box-shadow屬性 147
5.5 CSS 3框線和背景樣式綜合實戰 151
5.6 設計多重背景圖象—background屬性 155
實戰體驗:背景圖像合成 157
5.7 定義背景坐標原點—background-origin屬性 158
實戰體驗:設計信紙背景效果 159
5.8 定義背景裁剪區域—background-clip屬性 160
實戰體驗1:設計內容區背景 163
實戰體驗2:設計按鈕效果 163
5.9 定義背景圖像大小—background-size屬性 164
實戰體驗:設計自適應模組大小的背景圖像 165
5.10 溢出內容處理—overflow-x和overflow-y屬性 166
5.11 定義盒模型解析模式—box-sizing屬性 170
5.12 自由縮放—resize屬性 171
實戰體驗:設計能隨意調整大小的壁畫 172
5.13 定義外輪廓線—outline屬性 173
實戰體驗:設計醒目激活和焦點提示框 175
5.14 定義外輪廓線寬度—outline-width屬性 177
5.15 定義外輪廓線樣式—outline-style屬性 178
5.16 定義外輪廓線顏色—outline-color屬性 179
5.17 定義外輪廓線位移—outline-offset屬性 179
實戰體驗:放大激活和焦點提示框 180
5.18 定義導航序列號—nav-index屬性 181
實戰體驗:調整表單輸入框的鍵盤激活順序 182
5.19 定義方向鍵控制順序 184
實戰體驗:正確定義鍵盤控制鍵順序 185
5.20 為元素添加內容—content屬性 187
第6章 CSS 3多列布局 190
6.1 定義多列布局—columns屬性 190
實戰體驗:設計文章多欄顯示 191
6.2 定義列寬度—column-width屬性 192
實戰體驗:設計固定寬度的欄目版面 193
6.3 定義列數—column-count屬性 194
實戰體驗:設計固定列數的版面 195
6.4 定義列間距—column-gap屬性 196
實戰體驗:設計疏朗的文檔版面 197
6.5 定義列框線樣式—column-rule屬性 198
實戰體驗:為多列布局版面設計框線效果 200
6.6 定義跨列顯示—column-span屬性 201
實戰體驗:設計文章標題跨列顯示 202
6.7 定義欄目高度—column-fill屬性 203
實戰體驗:設計不等高的多列布局效果 204
6.8 分列列印 206
6.9 結合案例實戰—設計精美的多列網頁版式 207
第7章 CSS 3漸變設計 217
7.1 Webkit引擎的CSS漸變實現方法 217
7.1.1 基本語法 218
7.1.2 直線漸變的基本用法 218
7.1.3 徑向漸變的基本用法 220
7.1.4 漸變的其他套用 225
7.2 Gecko引擎的CSS漸變實現方法 227
7.2.1 直線漸變基本語法 227
7.2.2 直線漸變的基本用法 227
7.2.3 徑向漸變基本語法 230
7.2.4 徑向漸變的基本用法 231
7.2.5 漸變的套用 234
7.3 IE瀏覽器引擎的CSS漸變實現方法 235
7.3.1 基本語法 235
7.3.2 IE漸變濾鏡實戰套用 236
7.4 W3C標準化的CSS漸變實現方法 238
7.5 CSS 3漸變實戰 239
7.5.1 CSS漸變下拉選單 239
7.5.2 CSS漸變按鈕 243
第8章 CSS 3動畫設計 248
8.1 CSS變形(Transformation) 248
8.1.1 變形基礎—transform屬性 249
實戰體驗:設計一個簡單的滑鼠動畫 250
8.1.2 旋轉動畫—rotate( )函式 251
8.1.3 縮放動畫—scale( )函式 253
8.1.4 移動動畫—translate( )函式 255
8.1.5 傾斜動畫—skew( )函式 258
8.1.6 矩陣變形動畫—matrix( )函式 260
8.1.7 CSS 3實戰體驗:設計圖片牆 262
8.2 CSS變形原點—transform-origin屬性 265
CSS3實戰體驗:定義圖片旋轉的原點 265
8.3 CSS過渡—transition屬性 268
8.3.1 設定過渡的CSS屬性—transition-property屬性 269
8.3.2 設定過渡的時間—transition-duration屬性 270
8.3.3 設定過渡延遲時間—transition-delay屬性 271
8.3.4 設定過渡效果—transition-timing-function屬性 272
CSS 3實戰體驗:設計OS X Dock(OS系統的導航碼頭) 274
8.4 CSS動畫—animation屬性 276
8.4.1 設定CSS動畫名稱—animation-name屬性 277
8.4.2 設定CSS動畫時間—animation-duration屬性 278
8.4.3 設定CSS動畫播放方式—animation-timing-function屬性 278
8.4.4 設定CSS動畫開始播放的時間—animation-delay屬性 279
8.4.5 設定CSS動畫播放次數—animation-iteration-count屬性 279
8.4.6 設定CSS動畫播放方向—animation-direction屬性 280
CSS 3實戰體驗:設計自動翻轉的圖片效果 280
8.5 CSS 3動畫綜合實戰 282
8.5.1 設計動態立體盒子 282
8.5.2 設計CSS 3手風琴式摺疊面板 285
8.5.3 設計能夠旋轉背景的易拉罐 287
8.5.4 設計旋轉出倉的光碟動畫效果 290
第9章 CSS 3新增的其他功能 295
9.1 引用外部字型類型—@font-face規則 296
9.1.1 @font-face規則的用法 296
實戰體驗:設計藝術字型 297
9.1.2 關於開放字型格式 298
9.2 定義CSS設備類型—Media Queries 299
9.2.1 @media規則的用法 300
實戰體驗:為不同設備設計不同的盒子框樣式 302
9.2.2 使用Media Queries連結外部CSS檔案 304
9.2.3 測試Media Queries 305
9.3 定義投影—CSS Reflections 305
CSS實戰體驗:套用CSS Reflections 306
9.4 定義語音樣式—CSS 3 Speech 310
實戰體驗:體驗CSS 3 Speech套用 311

相關詞條

熱門詞條

聯絡我們