精通CSS

前言

　　盡管CSS資源的數(shù)量越來越多，但是在CSS郵件列表上仍然總是看到有人問同樣的問題：如何讓設(shè)計(jì)居中?最好的圓角框技術(shù)是什么?如何創(chuàng)建三列布局?　　如果你熟悉CSS設(shè)計(jì)社區(qū)，那么尋找解決方案時(shí)無非就是回想一下某篇文章或某種技術(shù)曾在哪個(gè)網(wǎng)站重點(diǎn)介紹過。但是，如果你是CSS的初學(xué)者，或者沒有時(shí)間閱讀所有博客，那么這些信息可能并不好找?！　SS有些方面(比如定位模型和特殊性)比較晦澀，即使是有經(jīng)驗(yàn)的CSS開發(fā)人員也會(huì)遇到　　問題。這是因?yàn)榇蠖鄶?shù)CSS開發(fā)人員都是靠自學(xué)的，他們從各種文章和別人的代碼中學(xué)習(xí)經(jīng)驗(yàn)，　　而沒有全面理解CSS規(guī)范。這也不奇怪，因?yàn)镃SS規(guī)范本身十分復(fù)雜，常常還自相矛盾，它的目標(biāo)讀者是瀏覽器廠商而不是網(wǎng)頁開發(fā)人員?！　〈送?，還得應(yīng)付瀏覽器問題。瀏覽器的bug和不一致性是現(xiàn)代CSS開發(fā)人員面對(duì)的一個(gè)最大問題。不幸的是，許多bug都沒有很好地記載，它們的修復(fù)方法基本上只是在開發(fā)人員之間口口相傳。你知道自己必須以某種方式做某件事，否則在某種瀏覽器中就會(huì)出問題。但是，你記不住是在哪種瀏覽器中會(huì)出問題，也說不清為什么會(huì)出問題?！　∷?，我產(chǎn)生了寫這么一本書的想法。這本書將最有用的CSS技術(shù)匯總在一起，集中介紹實(shí)際的瀏覽器問題，從而彌補(bǔ)人們欠缺的CSS知識(shí)。本書會(huì)幫助你加快學(xué)習(xí)CSS的進(jìn)程，使你的編碼技術(shù)很快達(dá)到CSS專家的水平。　　讀者對(duì)象　　本書適合具有HTML和ICSS基礎(chǔ)知識(shí)的任何人①閱讀。無論你是剛剛接觸CSS設(shè)計(jì)，還是已經(jīng)開發(fā)純CSS站點(diǎn)好幾年了，書中都有適合你的內(nèi)容。如果你已經(jīng)使用CSS一段時(shí)間了，但還沒有達(dá)到專家級(jí)水平，那么你能夠從本書獲得最大的收益。本書為你提供了各種實(shí)用的建議和示例，可以幫助你精通現(xiàn)代CSS設(shè)計(jì)?！　”緯Y(jié)構(gòu)　　本書前3章討論基本的CSS概念和最佳實(shí)踐，幫助你輕松地入門。

內(nèi)容概要

CSS作為Web標(biāo)準(zhǔn)的一部分，已經(jīng)成為現(xiàn)代網(wǎng)頁設(shè)計(jì)中必不可少的關(guān)鍵要素。CSS看似簡單，但真正精通CSS絕非易事。在使用CSS開發(fā)網(wǎng)站時(shí)，會(huì)遇到形形色色的瀏覽器bug和不一致問題，而解決方案又五花八門，往往讓使用者感覺千頭萬緒，不知從何著手?！　”緯鴮⒆钣杏玫腃SS技術(shù)匯總在一起，還總結(jié)了CSS設(shè)計(jì)中的最佳實(shí)踐，討論了解決各種實(shí)際問題的技術(shù)，填補(bǔ)了一直以來CSS圖書的空白。正因如此，英文版出版后，一時(shí)洛陽紙貴，多次重印，并迅速登上Amazon圖書排行榜前列，最高時(shí)甚至與《哈利·波特》并駕齊驅(qū)，創(chuàng)造了計(jì)算機(jī)圖書的銷售奇跡?！　∽鳛樽钚碌纳?jí)版，本書淘汰了過時(shí)的內(nèi)容，補(bǔ)充了大量CSS領(lǐng)域的新技術(shù)，涵蓋了CSS 3和HTML 5，無愧于Web設(shè)計(jì)人員必讀的第一經(jīng)典著作。

作者簡介

Andy Budd，國際頂尖的網(wǎng)頁設(shè)計(jì)師，著名的Web標(biāo)準(zhǔn)倡導(dǎo)者，網(wǎng)頁咨詢公司Clearleft的創(chuàng)始人之一。曾組織過英國首屆Web 2.0會(huì)議，經(jīng)常在Web Directions、An Event Apart、SXSW等國際會(huì)議上發(fā)表演講，參與一些國際設(shè)計(jì)獎(jiǎng)項(xiàng)的評(píng)選，他還是.NET Magazine的咨詢委員會(huì)成員。

書籍目錄

第1章　基礎(chǔ)知識(shí)  　1.1　設(shè)計(jì)代碼的結(jié)構(gòu)  　　1.1.1　標(biāo)記簡史  　　1.1.2　文檔類型、DOCTYPE切換和瀏覽器模式  　　1.1.3　有效性驗(yàn)證  　1.2　小結(jié)  第2章　為樣式找到應(yīng)用目標(biāo)  　2.1　常用的選擇器  　2.2　通用選擇器  　2.3　高級(jí)選擇器  　　2.3.1　子選擇器和相鄰?fù)x擇器  　　2.3.2　屬性選擇器  　　2.3.3　層疊和特殊性  　　2.3.4　繼承  　2.4　規(guī)劃、組織和維護(hù)樣式表  　　2.4.1　對(duì)文檔應(yīng)用樣式  　　2.4.2　樣式指南  　2.5　小結(jié)  第3章　可視化格式模型  　3.1　盒模型概述  　　3.1.1　IE和盒模型  　　3.1.2　外邊距疊加  　3.2　定位概述  　　3.2.1　視覺格式化模型  　　3.2.2　相對(duì)定位  　　3.2.3　絕對(duì)定位  　　3.2.4　浮動(dòng)  　3.3　小結(jié)  第4章　背景圖像效果  　4.1　背景圖像基礎(chǔ)  　4.2　圓角框  　　4.2.1　固定寬度的圓角框  　　4.2.2　山頂角  　4.3　投影  　　4.3.1　簡單的CSS投影  　　4.3.2　來自Clagnut的投影方法  　4.4　不透明度  　4.5　圖像替換  　　4.5.1　FIR  　　4.5.2　Phark  　　4.5.3　sIFR  　4.6　小結(jié)  第5章　對(duì)鏈接應(yīng)用樣式  　5.1　簡單的鏈接樣式  　5.2　讓下劃線更有趣  　　5.2.1　簡單的鏈接修飾  　　5.2.2　奇特的鏈接下劃線  　5.3　已訪問鏈接的樣式  　5.4　為鏈接目標(biāo)設(shè)置樣式  　5.5　突出顯示不同類型的鏈接  　5.6　創(chuàng)建類似按鈕的鏈接  　　5.6.1　簡單的翻轉(zhuǎn)  　　5.6.2　圖像翻轉(zhuǎn)  　　5.6.3　Pixy樣式的翻轉(zhuǎn)  　　5.6.4　CSS精靈  　　5.6.5　用CSS 實(shí)現(xiàn)翻轉(zhuǎn)  　5.7　純CSS工具提示  　5.8　小結(jié)  第6章　對(duì)列表應(yīng)用樣式和創(chuàng)建導(dǎo)航條  　6.1　基本列表樣式  　6.2　創(chuàng)建基本的垂直導(dǎo)航條  　6.3　在導(dǎo)航條中突出顯示當(dāng)前頁面  　6.4　創(chuàng)建簡單的水平導(dǎo)航條  　6.5　創(chuàng)建圖形化導(dǎo)航條  　6.6　簡化的“滑動(dòng)門”標(biāo)簽頁式導(dǎo)航  　6.7　Suckerfish下拉菜單  　6.8　CSS圖像映射  　6.9　遠(yuǎn)距離翻轉(zhuǎn)  　6.10　對(duì)于定義列表的簡短說明  　6.11　小結(jié)  第7章　對(duì)表單和數(shù)據(jù)表格應(yīng)用樣式  　7.1　對(duì)數(shù)據(jù)表格應(yīng)用樣式  　　7.1.1　表格特有的元素  　　7.1.2　數(shù)據(jù)表格標(biāo)記  　　7.1.3　對(duì)表格應(yīng)用樣式  　　7.1.4　添加視覺樣式  　7.2　簡單的表單布局  　　7.2.1　有用的表單元素  　　7.2.2　基本布局  　　7.2.3　其他元素  　　7.2.4　修飾  　7.3　復(fù)雜的表單布局  　　7.3.1　可訪問的數(shù)據(jù)輸入元素  　　7.3.2　多列復(fù)選框  　　7.3.3　表單反饋  　7.4　小結(jié)  第8章　布局  　8.1　計(jì)劃布局  　8.2　設(shè)置基本結(jié)構(gòu)  　8.3　基于浮動(dòng)的布局  　　8.3.1　兩列的浮動(dòng)布局  　　8.3.2　三列的浮動(dòng)布局  　8.4　固定寬度、流式和彈性布局  　　8.4.1　流式布局  　　8.4.2　彈性布局  　　8.4.3　流式和彈性圖像  　8.5　faux列  　8.6　高度相等的列  　8.7　CSS 列  　8.8　CSS框架與CSS系統(tǒng)  　8.9　小結(jié)  第9章　bug和修復(fù)bug  　9.1　捕捉bug  　9.2　捕捉bug的基本知識(shí)  　　9.2.1　盡量在一開始就避免bug  　　9.2.2　隔離問題  　　9.2.3　創(chuàng)建基本測(cè)試案例  　　9.2.4　修復(fù)問題，而不是修復(fù)癥狀  　　9.2.5　請(qǐng)求幫助  　9.3　擁有布局  　　9.3.1　什么是布局  　　9.3.2　布局的效果  　9.4　解決方法  　　9.4.1　IE條件注釋  　　9.4.2　關(guān)于hack和過濾器的一個(gè)警告  　　9.4.3　明智地使用hack和過濾器  　　9.4.4　應(yīng)用IE for Mac帶通過濾器  　　9.4.5　應(yīng)用星號(hào)HTML hack  　　9.4.6　應(yīng)用子選擇器hack  　9.5　常見bug及其修復(fù)方法  　　9.5.1　雙外邊距浮動(dòng)bug  　　9.5.2　3像素文本偏移bug  　　9.5.3　IE 的重復(fù)字符bug  　　9.5.4　IE 的“藏貓貓”bug  　　9.5.5　相對(duì)容器中的絕對(duì)定位  　　9.5.6　停止對(duì)IE的批評(píng)  　9.6　分級(jí)瀏覽器支持  　9.7　小結(jié)  第10章　實(shí)例研究：Roma Italia  　10.1　關(guān)于這個(gè)實(shí)例研究  　10.2　基礎(chǔ)  　　10.2.1　著眼于HTML   　　10.2.2　reset.css  　10.3　1080布局和網(wǎng)格  　10.4　高級(jí)CSS 和CSS 特性  　　10.4.1　網(wǎng)站需要在每種瀏覽器中看起來完全一樣嗎  　　10.4.2　屬性選擇器  　　10.4.3　box-shadow、RGBa和text-overflow  　10.5　字體鏈接和更好的Web排版  　　10.5.1　按以前的方式設(shè)置 font-size  　　10.5.2　標(biāo)點(diǎn)符號(hào)懸掛  　　10.5.3　多欄文本布局  　　10.5.4　@font-face  　　10.5.5　Cufón，向@font-face發(fā)展的過渡手段  　10.6　用AJAX和jQuery增加交互性  　　10.6.1　AJAX  　　10.6.2　jQuery  　　10.6.3　使用AJAX和jQuery實(shí)現(xiàn)搜索  　10.7　小結(jié)  第11章　實(shí)例研究：Climb the Mountains  　11.1　關(guān)于這個(gè)實(shí)例研究  　11.2　樣式表的組織和約定  　　11.2.1　screen.css  　　11.2.2　reset  　　11.2.3　使用條件注釋的IE樣式表  　11.3　網(wǎng)格靈活性  　11.4　用body類控制導(dǎo)航  　　11.4.1　突出顯示當(dāng)前頁面  　　11.4.2　控制blockquote所處的層  　11.5　戰(zhàn)略性地選擇元素  　　11.5.1　深層后代選擇器  　　11.5.2　:first-child偽類  　　11.5.3　相鄰?fù)x擇器  　11.6　透明度、陰影和圓角  　　11.6.1　我們的目標(biāo)  　　11.6.2　說明圖像覆蓋和RGBa透明度  　　11.6.3　組合類  　　11.6.4　border-radius  　　11.6.5　box-shadow  　11.7　定位列表和顯示內(nèi)容  　　11.7.1　圓角  　　11.7.2　主海拔圖  　11.8　小結(jié)

章節(jié)摘錄

　　第1章　基礎(chǔ)知識(shí)　　1.1　設(shè)計(jì)代碼的結(jié)構(gòu)　　大多數(shù)人不關(guān)心建筑物的地基。但是，如果沒有堅(jiān)固的地基，建筑物的主體也就不會(huì)存在了。雖然本書討論的是高級(jí)的CSS技術(shù)，但是如果沒有結(jié)構(gòu)良好且有效的HTML文檔，那么我們要做的許多事情都是不可能實(shí)現(xiàn)的（至少實(shí)現(xiàn)起來非常困難）。　　在本節(jié)中，你將明白為什么結(jié)構(gòu)良好且有意義的HTML文檔在基于標(biāo)準(zhǔn)的CSS開發(fā)中非常重要，還將學(xué)習(xí)如何豐富文檔的意義，從而讓自己的開發(fā)工作更輕松。　　1.1.1　標(biāo)記簡史　　早期的Web僅僅是一系列相互鏈接的研究文檔，使用HTML添加基本的格式和結(jié)構(gòu)。但是，隨著萬維網(wǎng)的流行，HTML開始用來表現(xiàn)頁面。人們結(jié)合使用字體和粗體標(biāo)簽來創(chuàng)建所需的視覺效果，而不只是用標(biāo)題元素突出顯示頁面的標(biāo)題。表格成了一種布局工具而不是顯示數(shù)據(jù)的方式，人們使用塊引用（blockquote）來添加空白而不是表示引用。Web很快就含義不清，成了字體和表格標(biāo)簽的大雜燴。Web設(shè)計(jì)者把這樣的標(biāo)記稱為“標(biāo)簽湯”（見圖1-1）?！　【W(wǎng)頁變得越來越具表現(xiàn)力，代碼卻變得越來越難以理解和維護(hù)了。WTSKWYG（所見即所得）編輯器讓設(shè)計(jì)者可以擺脫這些復(fù)雜性，它宣稱可以提供全新的圖形布局環(huán)境。遺憾的是，這些工具并沒有使事情簡化，反而添加了它們自己的復(fù)雜標(biāo)記。使用FrontPage或Dreamweaver等編輯器能夠通過簡單的鼠標(biāo)操作構(gòu)建復(fù)雜的表格布局，但是嵌套的表格和“分隔線GIF”把代碼弄得非常混亂（見圖1-2）。

媒體關(guān)注與評(píng)論

　　“Andy Budd對(duì)CSS設(shè)計(jì)的底層技術(shù)和方法有著深刻的理解，而且更善于將這些知識(shí)娓娓道來。在跨瀏覽器支持問題上，無人可以望其項(xiàng)背?！?　　——Molly E. Holzschlag，Web標(biāo)準(zhǔn)項(xiàng)目負(fù)責(zé)人和W3C HTML工作組專家 　　“Andy Budd多年來一直在編寫、設(shè)計(jì)和宣傳基于標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)，我們現(xiàn)在有幸在本書中看到他以簡潔清晰的方式講授最重要的CSS技術(shù)。本書提供了一套網(wǎng)頁設(shè)計(jì) 人員不可或缺的解決方案、技巧和經(jīng)驗(yàn)?！?　　——Dan Cederholm，《Web標(biāo)準(zhǔn)實(shí)戰(zhàn)》的作者

編輯推薦

　　Amazon第一css暢銷書全新改版，令人叫絕的CSS技術(shù)匯總，涵蓋css和HTML 5。

圖書封面

圖書標(biāo)簽Tags

無

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

---

    精通CSS PDF格式下載

---