CSS3實(shí)用指南

內(nèi)容概要

　CSS3為Web的視覺(jué)樣式語(yǔ)言注入了強(qiáng)大的新功能，讓設(shè)計(jì)人員更加輕松自如地設(shè)計(jì)優(yōu)美而引人入勝的內(nèi)容。借助CSS3，不使用圖片就可以創(chuàng)建半透明背景、漸變、陰影等奪人眼球的視覺(jué)效果；還可以使用漂亮、獨(dú)特、非Web安全的字體顯示文本；不用Flash就可以創(chuàng)建動(dòng)畫(huà)；不用JavaScript就可以定制適應(yīng)用戶的設(shè)備和屏幕尺寸的設(shè)計(jì)。
本書(shū)通過(guò)一系列實(shí)用且新穎的范例，向讀者展示如何實(shí)現(xiàn)以上功能和更多效果。每章都提供了幾個(gè)實(shí)例，讓你可以應(yīng)用到正在開(kāi)發(fā)的項(xiàng)目中，或從它們的設(shè)計(jì)思路中獲取靈感。
本書(shū)還介紹了以下CSS3技術(shù)：
　　如何使用CSS3改善頁(yè)面外觀，提高可用性、可訪問(wèn)性和效率
　　處理不支持CSS3的早期瀏覽器的時(shí)機(jī)、解決方案和替代方案
　　如何利用獨(dú)特的字體排版技術(shù)和漂亮的圖片細(xì)節(jié)創(chuàng)建絕妙的設(shè)計(jì)
　　改進(jìn)的新選擇器，使標(biāo)記更加流暢、不易出錯(cuò)
　　創(chuàng)建多列布局的新方法
　　如何不用腳本也能輕松制作出針對(duì)手機(jī)優(yōu)化的Web設(shè)計(jì)

作者簡(jiǎn)介

　 Zoe Mickley Gillenwater
　　經(jīng)驗(yàn)豐富的圖形和Web設(shè)計(jì)師、開(kāi)發(fā)人員、顧問(wèn)。致力于打造盡可能滿足各類人群需求的優(yōu)秀網(wǎng)站，并為最新的瀏覽器使用創(chuàng)新的CSS技術(shù)。她是
Flexible Web Design: Creating Liquid and Elastic Layouts with
CSS和視頻培訓(xùn)教程Web Accessibility Principles的作者，并已經(jīng)為Smashing
Magazine和Community
MX網(wǎng)站撰寫(xiě)了上百篇以Web設(shè)計(jì)和開(kāi)發(fā)為主題的文章。Zoe目前是Web標(biāo)準(zhǔn)計(jì)劃小組（WaSP）Adobe任務(wù)組的成員，還是熱門(mén)的css-
discuss郵件列表的主持人，并經(jīng)常在全國(guó)性技術(shù)會(huì)議上講授CSS、視覺(jué)設(shè)計(jì)、可訪問(wèn)性等主題。

書(shū)籍目錄

第1章　 CSS3的來(lái)龍去脈
1.1 　什么是CSS3
1.1.1 　新特性概覽
1.1.2　 CSS3的當(dāng)前進(jìn)展
1.1.3　 現(xiàn)在就開(kāi)始使用CSS3
1.2　 瀏覽器的支持狀況
1.2.1　 瀏覽器市場(chǎng)份額
1.2.2　 主流瀏覽器支持狀況
1.3　 漸進(jìn)增強(qiáng)
1.3.1　 優(yōu)點(diǎn)
1.3.2　 “讓我來(lái)打個(gè)比方……”
1.4　 CSS3的好處
1.4.1　 減少開(kāi)發(fā)和維護(hù)的耗時(shí)
1.4.2　 提升頁(yè)面性能
1.5　 更好的搜索引擎優(yōu)化
1.5.1　 提高可用性和可達(dá)性
1.5.2　 與時(shí)俱進(jìn)
1.6　 案例學(xué)習(xí)：公路安全研究中心
1.6.1　 使用CSS3之前
1.6.2　 使用CSS3之后
1.7　 明智地使用CSS3
1.7.1 　瀏覽器前綴
1.7.2　 處理不支持的瀏覽器
1.7.3　 使用條件表達(dá)式過(guò)濾IE
1.8　 搞定不予支持的客戶或老板
1.8.1 　有些事不必說(shuō)
1.8.2　 提前教給他們漸進(jìn)增強(qiáng)的思想
1.8.3　 控制客戶因設(shè)計(jì)稿而生的過(guò)度期望
第2章　 氣泡對(duì)話框
2.1　 基礎(chǔ)頁(yè)面
2.2　 包裹長(zhǎng)文本
2.3　 無(wú)圖的圖形效果
2.3.1 　圓角的實(shí)現(xiàn)
2.3.2　 增加氣泡的尾巴
2.3.3　 利用RGBA或HSLA實(shí)現(xiàn)半透明背景
2.3.4　 無(wú)圖實(shí)現(xiàn)色彩漸變
2.3.5　 無(wú)圖實(shí)現(xiàn)盒狀陰影
2.3.6　 無(wú)圖實(shí)現(xiàn)文字陰影
2.4　 頭像的變形效果
2.4.1 　什么是“變形”
2.4.2　 旋轉(zhuǎn)頭像圖片
2.5　 大功告成
第3章　 紙質(zhì)筆記
3.1　 基礎(chǔ)頁(yè)面
3.2　 高級(jí)背景圖片技術(shù)
3.2.1 　背景圖片縮放
3.2.2　 單一容器上的復(fù)合背景圖片
3.2.3　 添加圖片邊框
3.2.4　 添加陰影
3.3　 嵌入字體
3.3.1 　@font-face是什么
3.3.2　 選擇可用字體
3.3.3　 瀏覽器支持度
3.3.4　 字體格式轉(zhuǎn)換
3.3.5　 使用@font-face
3.4　 大功告成
第4章　 根據(jù)類型為圖片和鏈接定義樣式
4.1　 基礎(chǔ)頁(yè)面
4.2　 什么是屬性選擇器
4.3　 用動(dòng)態(tài)添加的圖標(biāo)指示文件類型
4.3.1 　除圖標(biāo)之外的備選方案
4.3.2　 修正IE 6的問(wèn)題
4.4　 區(qū)別處理全幅圖和縮略圖的樣式
4.4.1 　使用類可能遇到的問(wèn)題
4.4.2　 使用屬性選擇器按類型定位元素
4.5　 大功告成
第5章　 使用偽類來(lái)提高效率
5.1　 不使用ID和類來(lái)定位特定元素
5.1.1 　新的結(jié)構(gòu)偽類
5.1.2　 回歸氣泡對(duì)話框：顏色交替
5.1.3　 回歸照片：隨機(jī)旋轉(zhuǎn)
5.2　 動(dòng)態(tài)高亮顯示頁(yè)面的區(qū)域
5.2.1 　:target偽類
5.2.2　 增加目錄
5.2.3　 更改聚焦區(qū)塊的背景色
5.2.4　 用純CSS實(shí)現(xiàn)動(dòng)畫(huà)
第6章　 不同的屏幕尺寸，不同的設(shè)計(jì)
6.1　 基礎(chǔ)頁(yè)面
6.2　 媒體查詢是什么
6.3　 針對(duì)寬屏來(lái)改變布局
6.3.1 　由橫向?qū)Ш綏l變?yōu)榭v向目錄
6.3.2　 多列文本
6.4　 針對(duì)窄屏來(lái)改變布局
6.5　 針對(duì)移動(dòng)設(shè)備來(lái)改變布局
6.5.1 　什么是設(shè)備寬度
6.5.2　 第三次媒體查詢
6.5.3　 針對(duì)高清顯示屏來(lái)改進(jìn)界面
6.5.4　 可視區(qū)域的meta標(biāo)簽
6.6　 針對(duì)其他瀏覽器的兼容方案
6.7　 大功告成
第7章　 布局秀
7.1　 重大改變
7.2　 無(wú)需浮動(dòng)或絕對(duì)定位，創(chuàng)建多列布局
7.2.1 　子元素自適應(yīng)
7.2.2　 增加欄目
7.2.3　 重定欄目順序
7.2.4　 多欄等高
7.2.5　 水平和垂直居中
7.3　 實(shí)際情況：現(xiàn)實(shí)可用部分
7.3.1 　彈性表單布局
7.3.2　 底部區(qū)域黏附
7.4　 彈性布局模型的替代品
7.4.1 　box-sizing屬性
7.4.2　 未來(lái)的布局系統(tǒng)
附錄　 瀏覽器支持度
貢獻(xiàn)　

章節(jié)摘錄

版權(quán)頁(yè):第1章 CSS3的來(lái)龍去脈在使用CSS3之前，你應(yīng)該對(duì)它的來(lái)龍去脈有個(gè)基本了解。在這一章中，你將知曉CSS3與CSS2.1的區(qū)別，以及當(dāng)前瀏覽器對(duì)CSS3的支持情況。對(duì)于那些尚未完全支持CSS3的瀏覽器，我們會(huì)介紹一些臨時(shí)兼容的方案和模擬實(shí)現(xiàn)的方法。你也會(huì)了解到即刻在項(xiàng)目中使用CSS3所帶來(lái)的各種實(shí)際好處，包括可以用來(lái)說(shuō)服多疑的客戶或老板的一系列理由（這可是實(shí)際的好處，別認(rèn)為它們僅僅只是些理論觀點(diǎn)）。最后，我們還會(huì)介紹如何使用CSS3才能符合漸進(jìn)增強(qiáng)的設(shè)計(jì)原則，并講解一些最佳實(shí)踐，讓?xiě)?yīng)用了CSS3的項(xiàng)目盡可能地健壯且與時(shí)俱進(jìn)。1.1 什么是CSS3CSS3是CSS2.1的擴(kuò)展，它在CSS2.1的基礎(chǔ)上增加了很多強(qiáng)大的新功能，但是它已不再像CSS2.1那樣是單一的規(guī)范。CSS3被劃分成幾個(gè)模塊，每個(gè)模塊都是CSS的某個(gè)子集的獨(dú)立規(guī)范，比如選擇器、文本或者背景。每個(gè)模塊都有各自獨(dú)立的創(chuàng)作者和時(shí)間表。這樣做的好處是整個(gè)CSS3規(guī)范的發(fā)布不再需要停下來(lái)等待某個(gè)難產(chǎn)的小條目―這個(gè)模塊或許尚需等待，但其他模塊的流程卻能夠繼續(xù)向前推進(jìn)。在www.w3.org/Style/CSS/current-work這個(gè)網(wǎng)頁(yè)里，你可以看到一份包含了所有模塊的列表，以及它們目前的進(jìn)度離最終發(fā)布還有多遠(yuǎn)。稍后我們將在本章討論這些模塊的當(dāng)前進(jìn)度，現(xiàn)在先來(lái)看看CSS3中激動(dòng)人心的新特性吧！

編輯推薦

《CSS3實(shí)用指南》適合網(wǎng)站開(kāi)發(fā)人員與網(wǎng)頁(yè)設(shè)計(jì)師閱讀；設(shè)計(jì)優(yōu)美的網(wǎng)站一定要學(xué)的CSS3；化繁為簡(jiǎn)，基于實(shí)戰(zhàn)項(xiàng)目講解；亞馬遜網(wǎng)站一致好評(píng)。

圖書(shū)封面

圖書(shū)標(biāo)簽Tags

無(wú)

評(píng)論、評(píng)分、閱讀與下載

---

    CSS3實(shí)用指南 PDF格式下載

---