CSS 3實戰(zhàn)

內容概要

　　《CSS
3實戰(zhàn)》由國內資深Web前端工程師撰寫，權威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者，那么本書也許會讓你在即將到來的Web技術革命中領先一步。
　　本書技術新穎，基于CSS 3的最新版本撰寫，所有新功能和新特性盡含其中；內容全面，不僅講解了CSS
3的方方面面，而且還在一些關鍵的功能點上與CSS
2.x進行了充分的比較；實戰(zhàn)性強，幾乎所有知識點都配有案例，全書配有實戰(zhàn)案例百余個。本書不僅能滿足讀者系統(tǒng)學習理論知識的需求，還能滿足需要充分實踐的需求。
　　全書一共分為9章，首先從宏觀上介紹了CSS
3技術的最新發(fā)展現(xiàn)狀、新特性，以及現(xiàn)有的主流瀏覽器對這些新特性的支持情況；然后詳細講解了CSS
3的選擇器、文本特性、顏色特性、彈性布局、邊框和背景特性、盒模型、UI設計、多列布局、圓角和陰影、漸變、變形、轉換、動畫、投影、開放字體、設備類型、語音樣式等重要的理論知識，這部分內容是本書的基礎和核心。不僅每個知識點都配有豐富的、精心設計的實戰(zhàn)案例，而且詳細介紹了每一種新特性在各種主流瀏覽器上的兼容性，旨在幫助設計師們提高設計的安全性。
　　本書全彩印刷，排版、設計和裝幀也非常精美，既適合學習參考，也適合收藏。無論你是前端領域的新人，還是有著豐富經(jīng)驗的老手，都能通過本書系統(tǒng)而全面地學習和實踐CSS
3的最新技術，為迎接新一輪的Web技術革命打下堅實的基礎。

作者簡介

成林，資深Web前端工程師，從事Web前端工作多年，精通CSS、HTML、JavaScript、jQuery和Ajax等Web前端技術，在實踐中積累了大量的經(jīng)驗。推崇Web技術標準，曾經(jīng)在多所高等院校和一些線下技術沙龍主講Web標準和規(guī)范相關的課程，曾經(jīng)還參與過W3C組織的標準化文檔的中文編譯工作。近兩年來，集中精力研究和實踐CSS 3和 HTML 5前沿技術，是國內該領域的先驅者之一，已經(jīng)有較為深入的認識和豐富的實踐經(jīng)驗。

書籍目錄

前言
第 1 章　預覽激動人心的CSS 3　
　1.1　 CSS 3發(fā)展概述　
　1.2　 CSS 3模塊化簡介　
　1.3　 CSS 3新特性概覽　
　1.4　 主流瀏覽器對CSS 3的支持　
　1.5　 CSS 3的未來和思考　
第 2 章　CSS 3新增的選擇器　
　2.1　屬性選擇器　
　實戰(zhàn)體驗：文檔共享的友善之舉　
　2.2　結構偽類選擇器　
　實戰(zhàn)體驗1：設計優(yōu)雅的數(shù)據(jù)表格　
　實戰(zhàn)體驗2：CSS大戰(zhàn)保齡球　
　實戰(zhàn)體驗3：讓枯燥的列表更有趣　
　實戰(zhàn)體驗4：清理圓角邊框中的垃圾標簽　
　2.3　 UI元素狀態(tài)偽類選擇器　
　實戰(zhàn)體驗1：設計可用的表單　
　實戰(zhàn)體驗2：設計友好、易用的表單　
　2.4　 其他新增選擇器　
　實戰(zhàn)體驗1：設計層序化的數(shù)據(jù)表格　
　實戰(zhàn)體驗2：改善頁內導航的視覺體驗　
第3章　增強的文本和顏色功能　
　3.1　文本陰影—text-shadow屬性　
　實戰(zhàn)體驗：設計超酷的黑貓警長首頁　
　3.2　溢出文本省略—text-over flow屬性　
　實戰(zhàn)體驗：設計固定區(qū)域的新聞列表　
　3.3　文本換行顯示—word-wrop屬性　
　實戰(zhàn)體驗：防止表格標題行換行　
　3.4　CSS 3文本模塊解析　
　3.5　CSS 3不同版本之間的文本規(guī)范的差異　
　3.6　HSL色彩模式　
　實戰(zhàn)體驗：網(wǎng)頁配色解決方案表　
　3.7　HSLA色彩模式　
　實戰(zhàn)體驗：模擬漸變色條　
　3.8　RGBA色彩模式　
　實戰(zhàn)體驗：設計帶陰影邊框的表單　
　3.9　不透明度—opacity屬性　
　實戰(zhàn)體驗：設計燈箱廣告背景布　
第4章　新增的彈性盒模型　
　4.1　定義盒子的布局取向—box-orient屬性　
　實戰(zhàn)體驗：設計多欄布局　
　4.2　定義盒子的布局順序—box-direction屬性　
　實戰(zhàn)體驗：反向布局網(wǎng)頁　
　4.3　定義盒子布局位置—box-ordinal-group屬性　
　實戰(zhàn)體驗：垂直網(wǎng)頁布局　
　4.4　定義盒子的彈性空間—box-flex屬性　
　實戰(zhàn)體驗：自適應欄目寬度設計　
　4.5　管理盒子的空間—box-pack和box-align屬性　
　實戰(zhàn)體驗：自適應布局居中設計　
　4.6　空間溢出管理—box-lines屬性　
　實戰(zhàn)體驗：讓子元素分行顯示　
　4.7　彈性布局綜合實戰(zhàn)—打造新技術含量的博客　
　4.7.1　構建博客頁的基本結構　
　4.7.2　完善博客頁的結構　
　4.7.3　彈性布局設計　
第5章　完善的盒模型和UI設計　
　5.1　定義多色邊框—border-color屬性　
　實戰(zhàn)體驗：設計立體邊框　
　5.2　定義邊框背景圖—border-image屬性　
　實戰(zhàn)體驗：設計各種精巧的邊框　
　5.3　設計圓角—border-radius屬性　
　5.4　設計塊陰影—box-shadow屬性　
　5.5　CSS 3邊框和背景樣式綜合實戰(zhàn)　
　5.6　設計多重背景圖象—background屬性　
　實戰(zhàn)體驗：背景圖像合成　
　5.7　定義背景坐標原點—background-origin屬性　
　實戰(zhàn)體驗：設計信紙背景效果　
　5.8　定義背景裁剪區(qū)域—background-clip屬性　
　實戰(zhàn)體驗1：設計內容區(qū)背景　
　實戰(zhàn)體驗2：設計按鈕效果　
　5.9　定義背景圖像大小—background-size屬性　
　實戰(zhàn)體驗：設計自適應模塊大小的背景圖像　
　5.10　溢出內容處理—overflow-x和overflow-y屬性　
　5.11　定義盒模型解析模式—box-sizing屬性　
　5.12　自由縮放—resize屬性　
　實戰(zhàn)體驗：設計能隨意調整大小的壁畫　
　5.13　定義外輪廓線—outline屬性　
　實戰(zhàn)體驗：設計醒目激活和焦點提示框　
　5.14　定義外輪廓線寬度—outline-width屬性　
　5.15　定義外輪廓線樣式—outline-style屬性　
　5.16　定義外輪廓線顏色—outline-color屬性　
　5.17　定義外輪廓線位移—outline-offset屬性　
　實戰(zhàn)體驗：放大激活和焦點提示框　
　5.18　定義導航序列號—nav-index屬性　
　實戰(zhàn)體驗：調整表單輸入框的鍵盤激活順序　
　5.19　定義方向鍵控制順序　
　實戰(zhàn)體驗：正確定義鍵盤控制鍵順序　
　5.20　為元素添加內容—content屬性　
第6章　CSS 3多列布局　
　6.1　定義多列布局—columns屬性　
　實戰(zhàn)體驗：設計文章多欄顯示　
　6.2　定義列寬度—column-width屬性　
　實戰(zhàn)體驗：設計固定寬度的欄目版面　
　6.3　定義列數(shù)—column-count屬性　
　實戰(zhàn)體驗：設計固定列數(shù)的版面　
　6.4　定義列間距—column-gap屬性　
　實戰(zhàn)體驗：設計疏朗的文檔版面　
　6.5　定義列邊框樣式—column-rule屬性　
　實戰(zhàn)體驗：為多列布局版面設計邊框效果　
　6.6　定義跨列顯示—column-span屬性　
　實戰(zhàn)體驗：設計文章標題跨列顯示　
　6.7　定義欄目高度—column-fill屬性　
　實戰(zhàn)體驗：設計不等高的多列布局效果　
　6.8　分列打印　
　6.9　結合案例實戰(zhàn)—設計精美的多列網(wǎng)頁版式　
第7章　CSS 3漸變設計　
　7.1　Webkit引擎的CSS漸變實現(xiàn)方法　
　7.1.1　基本語法　
　7.1.2　直線漸變的基本用法　
　7.1.3　徑向漸變的基本用法　
　7.1.4　漸變的其他應用　
　7.2　Gecko引擎的CSS漸變實現(xiàn)方法　
　7.2.1　直線漸變基本語法　
　7.2.2　直線漸變的基本用法　
　7.2.3　徑向漸變基本語法　
　7.2.4　徑向漸變的基本用法　
　7.2.5　漸變的應用　
　7.3　IE瀏覽器引擎的CSS漸變實現(xiàn)方法　
　7.3.1　基本語法　
　7.3.2　IE漸變?yōu)V鏡實戰(zhàn)應用　
　7.4　W3C標準化的CSS漸變實現(xiàn)方法　
　7.5　CSS 3漸變實戰(zhàn)　
　7.5.1　CSS漸變下拉菜單　
　7.5.2　CSS漸變按鈕　
第8章　CSS 3動畫設計　
　8.1　CSS變形（Transformation）　
　8.1.1　變形基礎—transform屬性　
　實戰(zhàn)體驗：設計一個簡單的鼠標動畫　
　8.1.2　旋轉動畫—rotate()函數(shù)　
　8.1.3　縮放動畫—scale()函數(shù)　
　8.1.4　移動動畫—translate()函數(shù)　
　8.1.5　傾斜動畫—skew()函數(shù)　
　8.1.6　矩陣變形動畫—matrix()函數(shù)　
　8.1.7　CSS 3實戰(zhàn)體驗：設計圖片墻　
　8.2　CSS變形原點—transform-origin屬性　
　CSS 3實戰(zhàn)體驗：定義圖片旋轉的原點　
　8.3　CSS過渡—transition屬性　
　8.3.1　設置過渡的CSS屬性—transition-property屬性　
　8.3.2　設置過渡的時間—transition-duration屬性　
　8.3.3　設置過渡延遲時間—transition-delay屬性　
　8.3.4　設置過渡效果—transition-timing-function屬性　
　CSS 3實戰(zhàn)體驗：設計OS X Dock（OS系統(tǒng)的導航碼頭）　
　8.4　CSS動畫—animation屬性　
　8.4.1　設置CSS動畫名稱—animation-name屬性　
　8.4.2　設置CSS動畫時間—animation-duration屬性　
　8.4.3　設置CSS動畫播放方式—animation-timing-function屬性　
　8.4.4　設置CSS動畫開始播放的時間—animation-delay屬性　
　8.4.5　設置CSS動畫播放次數(shù)—animation-iteration-count屬性　
　8.4.6　設置CSS動畫播放方向—animation-direction屬性　
　CSS 3實戰(zhàn)體驗：設計自動翻轉的圖片效果　
　8.5　CSS 3動畫綜合實戰(zhàn)　
　8.5.1　設計動態(tài)立體盒子　
　8.5.2　設計CSS 3手風琴式折疊面板　
　8.5.3　設計能夠旋轉背景的易拉罐　
　8.5.4　設計旋轉出倉的光盤動畫效果　
第9章　CSS 3新增的其他功能　
　9.1　引用外部字體類型—@font-face規(guī)則　
　9.1.1　@font-face規(guī)則的用法　
　實戰(zhàn)體驗：設計藝術字體　
　9.1.2　關于開放字體格式　
　9.2　定義CSS設備類型—Media Queries　
　9.2.1　@media規(guī)則的用法　
　實戰(zhàn)體驗：為不同設備設計不同的盒子框樣式　
　9.2.2　使用Media Queries鏈接外部CSS文件　
　9.2.3　測試Media Queries　
　9.3　定義投影—CSS Reflections　
　CSS實戰(zhàn)體驗：應用CSS Reflections　
　9.4　定義語音樣式—CSS 3 Speech　
　實戰(zhàn)體驗：體驗CSS 3 Speech應用　

章節(jié)摘錄

版權頁：插圖：CSS 3真可謂十年磨一劍，從10年前開始孕育，到今天逐漸引人矚目，前端工作者們的確等待了太長的時間。隨著用戶要求的不斷提高、各種新型網(wǎng)絡應用的不斷出現(xiàn)，以及Web技術自身的高速發(fā)展，CSS 2在Web開發(fā)中顯得越來越力不從心，人們對下一代CSS技術和標準-CSS 3的需求越來越迫切。坦率地講，CSS 3的部分特性在幾年前就已經(jīng)公布，但是由于各種主流瀏覽器的“不作為”，特別是IE瀏覽器的“消極態(tài)度”，讓很多前端工作者遺忘了CSS 3的存在。目前，CSS 3還在不斷完善中，很多功能還處于草稿階段，但是它展現(xiàn)出來的超強特性和功能已經(jīng)讓人興奮不已。最近一兩年，各種主流瀏覽器逐漸開始高調支持CSS 3的部分或者全部的功能特性，使得CSS 3又重新進入了廣大前端工作者的視野。特別是IE 9對CSS 3的全面支持，更是將網(wǎng)頁設計師帶入了全新的天地。社區(qū)里各種關于CSS 3的討論、資料和炫酷的應用開始爆炸式增長，廣大前端工作者也開始蜂擁而至。對于緊追前沿技術的前端工作者來說，充分了解當前和未來的Web標準和技術是十分必要的，學習和掌握CSS 3更是大勢所趨。為了幫助大家在適應趨勢和引領趨勢的過程中能走得更順利，受華章公司的盛情邀請，我特意編寫了這本CSS 3實戰(zhàn)教程，希望能起到拋磚引玉之效，為普及CSS 3盡綿薄之力。《CSS 3實戰(zhàn)》面向的讀者首先，《CSS 3實戰(zhàn)》非常適合具有豐富開發(fā)和設計經(jīng)驗的前端工作者，因為這部分讀者應該已經(jīng)對CSS 2了然于胸，通過《CSS 3實戰(zhàn)》，他們將能非常迅速而又有針對性地掌握CSS 3技術。其次，《CSS 3實戰(zhàn)》也適合尚處于初級階段的前端工作者，因為書中不僅系統(tǒng)而全面地介紹了CSS 3的各種功能和特性，而且還有大量實戰(zhàn)案例和最佳實踐，可供他們一邊學習理論，一邊進行實戰(zhàn)演練。

媒體關注與評論

雖然CSS 3的標準制定工作早在10年前就開始了，但直到近一兩年才逐漸開始得到各主流瀏覽器的支持。與CSS 2.x相比，CSS 3在各方面都有非常大的改進，不僅功能更強大，而且也更便于Web前端工作者使用。如果你是一位前端工作者，或將來打算進入前端領域，建議你從現(xiàn)在就開始學習CSS 3。本書不僅全面而系統(tǒng)地講解了CSS 3的所有新功能和新特性，而且還精心設計了數(shù)十個經(jīng)典的案例，實戰(zhàn)性極強。本書將是當下深入而系統(tǒng)學習CSS 3的最佳選擇！　　——CSS 3研究小組HTML 5和CSS 3是Web開發(fā)領域當下最熱門的話題之一，二者必定會掀起一場革命，未來的Web世界將由它們來主宰。本書可謂極具前瞻性，而且出版時機也恰到好處，應該能為CSS 3在國內的發(fā)展和普及做出一定的貢獻。它不僅在與CSS 2.x進行對此的基礎上全面講解了CSS 3的方方面面，而且還包含大量的實戰(zhàn)案例和最佳實踐。此外，本書全彩印刷，裝幀和版式設計都非常精美，不僅有學習價值，而且還有收藏價值。強烈推薦?！　　狢SS開發(fā)者社區(qū)隨著各種新型Web應用的出現(xiàn)，以及用戶對用戶體驗的要求的不斷提高，各大主流瀏覽器都開始將CSS 3作為一種事實標準的解決方案，相應地，CSS 3自然而然也將成為Web前端工作者的必修課之一。如果你是一位有遠見的前端工作者，那就從現(xiàn)在開始學習和實踐CSS 3吧，相信這本書會給你驚喜?！狧TML51（www.html51.com）

編輯推薦

《CSS 3實戰(zhàn)》是國內首本CSS 3專著，全面而深入講解CSS 3的最新特性和布局之道。實戰(zhàn)性強，全書囊括近百個精心設計的實戰(zhàn)案例，理論與實踐完美結合。資深Web前端工程師多年實踐經(jīng)驗的結晶，3大社區(qū)聯(lián)袂推薦。對于前端設計師來說，雖然CSS3不是全新的技術，但它卻重啟了一扇奇思妙想的窗口。CSS3全新的功能和特性在賦予了Web設計美好的愿景和無限可能性的同時，也極大地提高了Web設計的效率。例如，設計師們從此不再需要使用蹩腳的JavaScript腳本，或者“偷梁換柱”地使用圖片或標簽去實現(xiàn)圓角、多背景、自定義字體、3D動畫、漸變、陰影、透明度等頁面效果。技術本身并沒有生命，但是它所折射的光芒卻讓人看到創(chuàng)新的希望。在選擇器上，CSS3支持更復雜的屬性選擇器和更高級的組合選擇器，這些豐富的功能讓設計師們可以靈活地控制網(wǎng)頁樣式，不用擔心因為選擇了某些元素而破壞文檔結構，如隨意增加類和lD值等。在樣式設計上，CSS3支持圓角效果、陰影效果、透明效果、漸變效果、變換效果、過渡效果、動態(tài)效果、動畫效果、倒影效果、文本特效、邊框特效、真彩色、透明色、漸變色、背景色。等等。在CSS3之前，所有這些效果可能需要設計師們花費大量的時間使用背景圖像或者。JavaScript腳本來實現(xiàn)。作為一個Web前端工作者，積極地關注和學習最新的Web標準是很重要的?；ヂ?lián)網(wǎng)的發(fā)展總是在不斷地催生新技術的出現(xiàn)，CSS3技術的應用和普及才剛剛起步，一些新的功能和特性還在不斷的嘗試和實踐中。也許你正被各種關于CSS3的唇槍舌戰(zhàn)所困擾，還在為CSS3的兼容性問題而擔憂，新技術的普及總會有一個過程，最早的CSS1如此，后來的CSS2也是如此，如今的CSS3同樣如此。立足現(xiàn)實。著眼未來，從現(xiàn)在就開始學習并付諸實踐。最后微笑的必定是你。

圖書封面

圖書標簽Tags

無

評論、評分、閱讀與下載

---

    CSS 3實戰(zhàn) PDF格式下載

---