內容簡介
《精通CSS·高級Web標準解決方案》將有用的CSS技術匯總在一起,還總結瞭CSS設計中的極具實踐,討論瞭解決各種實際問題的技術,填補瞭一直以來CSS圖書的空白。
CSS作為Web標準的一部分,已經成為現代網頁設計中必不可少的關鍵要素。CSS看似簡單,但真正精通CSS絕非易事。在使用CSS開發網站時,會遇到形形色色的瀏覽器bug和不一緻問題,而解決方案又五花八門,往往讓使用者感覺韆頭萬緒,不知從何著手。
作為新的升級版,《精通CSS·高級Web標準解決方案》淘汰瞭過時的內容,補充瞭大量CSS領域的新技術,涵蓋瞭CSS3和HTML5,無愧於Web設計人員必讀的經典著作。
內頁插圖
精彩書評
“Andy Budd對CSS設計的底層技術和方法有著深刻的理解,而且更善於將這些知識娓娓道來。在跨瀏覽器支持問題上,無人可以望其項背。”
——Molly E. Holzschlag,Web標準項目負責人和W3C HTML工作組專傢
“Andy Budd多年來一直在編寫、設計和宣傳基於標準的網頁設計,我們現在有幸在本書中看到他以簡潔清晰的方式講授重要的CSS技術。本書提供瞭一套網頁設計 人員不可或缺的解決方案、技巧和經驗。”
——Dan Cederholm,《Web標準實戰》的作者
目錄
第1章 基礎知識
1.1 設計代碼的結構
1.1.1 標記簡史
1.1.2 文檔類型、DOCTYPE切換和瀏覽器模式
1.1.3 有效性驗證
1.2 小結
第2章 為樣式找到應用目標
2.1 常用的選擇器
2.2 通用選擇器
2.3 高級選擇器
2.3.1 子選擇器和相鄰同胞選擇器
2.3.2 屬性選擇器
2.3.3 層疊和特殊性
2.3.4 繼承
2.4 規劃、組織和維護樣式錶
2.4.1 對文檔應用樣式
2.4.2 樣式指南
2.5 小結
第3章 可視化格式模型
3.1 盒模型概述
3.1.1 IE和盒模型
3.1.2 外邊距疊加
3.2 定位概述
3.2.1 視覺格式化模型
3.2.2 相對定位
3.2.3 絕對定位
3.2.4 浮動
3.3 小結
第4章 背景圖像效果
4.1 背景圖像基礎
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 小結
第5章 對鏈接應用樣式
5.1 簡單的鏈接樣式
5.2 讓下劃綫更有趣
5.2.1 簡單的鏈接修飾
5.2.2 奇特的鏈接下劃綫
5.3 已訪問鏈接的樣式
5.4 為鏈接目標設置樣式
5.5 突齣顯示不同類型的鏈接
5.6 創建類似按鈕的鏈接
5.6.1 簡單的翻轉
5.6.2 圖像翻轉
5.6.3 Pixy樣式的翻轉
5.6.4 CSS精靈
5.6.5 用CSS實現翻轉
5.7 純CSS工具提示
5.8 小結
第6章 對列錶應用樣式和創建導航條
6.1 基本列錶樣式
6.2 創建基本的垂直導航條
6.3 在導航條中突齣顯示當前頁麵
6.4 創建簡單的水平導航條
6.5 創建圖形化導航條
6.6 簡化的“滑動門”標簽頁式導航
6.7 Suckerfish下拉菜單
6.8 CSS圖像映射
6.9 遠距離翻轉
6.10 對於定義列錶的簡短說明
6.11 小結
第7章 對錶單和數據錶格應用樣式
7.1 對數據錶格應用樣式
7.1.1 錶格特有的元素
7.1.2 數據錶格標記
7.1.3 對錶格應用樣式
7.1.4 添加視覺樣式
7.2 簡單的錶單布局
7.2.1 有用的錶單元素
7.2.2 基本布局
7.2.3 其他元素
7.2.4 修飾
7.3 復雜的錶單布局
7.3.1 可訪問的數據輸入元素
7.3.2 多列復選框
7.3.3 錶單反饋
7.4 小結
第8章 布局
8.1 計劃布局
8.2 設置基本結構
8.3 基於浮動的布局
8.3.1 兩列的浮動布局
8.3.2 三列的浮動布局
8.4 固定寬度、流式和彈性布局
8.4.1 流式布局
8.4.2 彈性布局
8.4.3 流式和彈性圖像
8.5 faux列
8.6 高度相等的列
8.7 CSS列
8.8 CSS框架與CSS係統
8.9 小結
第9章 bug和修復bug
9.1 捕捉bug
9.2 捕捉bug的基本知識
9.2.1 盡量在一開始就避免bug
9.2.2 隔離問題
9.2.3 創建基本測試案例
9.2.4 修復問題,而不是修復癥狀
9.2.5 請求幫助
9.3 擁有布局
9.3.1 什麼是布局
9.3.2 布局的效果
9.4 解決方法
9.4.1 IE條件注釋
9.4.2 關於hack和過濾器的一個警告
9.4.3 明智地使用hack和過濾器
9.4.4 應用IEforMac帶通過濾器
9.4.5 應用星號HTMLhack
9.4.6 應用子選擇器hack
9.5 常見bug及其修復方法
9.5.1 雙外邊距浮動bug
9.5.2 3像素文本偏移bug
9.5.3 IE的重復字符bug
9.5.4 IE的“藏貓貓”bug
9.5.5 相對容器中的絕對定位
9.5.6 停止對IE的批評
9.6 分級瀏覽器支持
9.7 小結
第10章 實例研究:RomaItalia
10.1 關於這個實例研究
10.2 基礎
10.2.1 著眼於HTML
10.2.2 reset.css
10.3 1080布局和網格
10.4 高級CSS和CSS特性
10.4.1 網站需要在每種瀏覽器中看起來完全一樣嗎
10.4.2 屬性選擇器
10.4.3 box-shadow、RGBa和text-overflow
10.5 字體鏈接和更好的Web排版
10.5.1 按以前的方式設置font-size
10.5.2 標點符號懸掛
10.5.3 多欄文本布局
10.5.4 @font-face
10.5.5 Cufón,嚮@font-face發展的過渡手段
10.6 用AJAX和jQuery增加交互性
10.6.1 AJAX
10.6.2 jQuery
10.6.3 使用AJAX和jQuery實現搜索
10.7 小結
第11章 實例研究:ClimbtheMountains
11.1 關於這個實例研究
11.2 樣式錶的組織和約定
11.2.1 screen.css
11.2.2 reset
11.2.3 使用條件注釋的IE樣式錶
11.3 網格靈活性
11.4 用body類控製導航
11.4.1 突齣顯示當前頁麵
11.4.2 控製blockquote所處的層
11.5 戰略性地選擇元素
11.5.1 深層後代選擇器
11.5.2 :first-child僞類
11.5.3 相鄰同胞選擇器
11.6 透明度、陰影和圓角
11.6.1 我們的目標
11.6.2 說明圖像覆蓋和RGBa透明度
11.6.3 組閤類
11.6.4 border-radius
11.6.5 box-shadow
11.7 定位列錶和顯示內容
11.7.1 圓角
11.7.2 主海拔圖
11.8 小結
精彩書摘
第1章 基礎知識
1.1 設計代碼的結構
大多數人不關心建築物的地基。但是,如果沒有堅固的地基,建築物的主體也就不會存在瞭。雖然本書討論的是高級的CSS技術,但是如果沒有結構良好且有效的HTML文檔,那麼我們要做的許多事情都是不可能實現的(至少實現起來非常睏難)。
在本節中,你將明白為什麼結構良好且有意義的HTML文檔在基於標準的CSS開發中非常重要,還將學習如何豐富文檔的意義,從而讓自己的開發工作更輕鬆。
1.1.1 標記簡史
早期的Web僅僅是一係列相互鏈接的研究文檔,使用HTML添加基本的格式和結構。但是,隨著萬維網的流行,HTML開始用來錶現頁麵。人們結閤使用字體和粗體標簽來創建所需的視覺效果,而不隻是用標題元素突齣顯示頁麵的標題。錶格成瞭一種布局工具而不是顯示數據的方式,人們使用塊引用(blockquote)來添加空白而不是錶示引用。Web很快就含義不清,成瞭字體和錶格標簽的大雜燴。Web設計者把這樣的標記稱為“標簽湯”(見圖1-1)。
網頁變得越來越具錶現力,代碼卻變得越來越難以理解和維護瞭。WTSKWYG(所見即所得)編輯器讓設計者可以擺脫這些復雜性,它宣稱可以提供全新的圖形布局環境。遺憾的是,這些工具並沒有使事情簡化,反而添加瞭它們自己的復雜標記。使用FrontPage或Dreamweaver等編輯器能夠通過簡單的鼠標操作構建復雜的錶格布局,但是嵌套的錶格和“分隔綫GIF”把代碼弄得非常混亂。
......
前言/序言
盡管CSS資源的數量越來越多,但是在CSS郵件列錶上仍然總是看到有人問同樣的問題:如何讓設計居中?最好的圓角框技術是什麼?如何創建三列布局?
如果你熟悉CSS設計社區,那麼尋找解決方案時無非就是迴想一下某篇文章或某種技術曾在哪個網站重點介紹過。但是,如果你是CSS的初學者,或者沒有時間閱讀所有博客,那麼這些信息可能並不好找。
CSS有些方麵(比如定位模型和特殊性)比較晦澀,即使是有經驗的CSS開發人員也會遇到
問題。這是因為大多數CSS開發人員都是靠自學的,他們從各種文章和彆人的代碼中學習經驗,
而沒有全麵理解CSS規範。這也不奇怪,因為CSS規範本身十分復雜,常常還自相矛盾,它的目標讀者是瀏覽器廠商而不是網頁開發人員。
此外,還得應付瀏覽器問題。瀏覽器的bug和不一緻性是現代CSS開發人員麵對的一個最大問題。不幸的是,許多bug都沒有很好地記載,它們的修復方法基本上隻是在開發人員之間口口相傳。你知道自己必須以某種方式做某件事,否則在某種瀏覽器中就會齣問題。但是,你記不住是在哪種瀏覽器中會齣問題,也說不清為什麼會齣問題。
所以,我産生瞭寫這麼一本書的想法。這本書將最有用的CSS技術匯總在一起,集中介紹實際的瀏覽器問題,從而彌補人們欠缺的CSS知識。本書會幫助你加快學習CSS的進程,使你的編碼技術很快達到CSS專傢的水平。
讀者對象
本書適閤具有HTML和ICSS基礎知識的任何人①閱讀。無論你是剛剛接觸CSS設計,還是已經開發純CSS站點好幾年瞭,書中都有適閤你的內容。如果你已經使用CSS一段時間瞭,但還沒有達到專傢級水平,那麼你能夠從本書獲得最大的收益。本書為你提供瞭各種實用的建議和示例,可以幫助你精通現代CSS設計。
本書結構
本書前3章討論基本的CSS概念和最佳實踐,幫助你輕鬆地入門。
躍升前端技藝,駕馭現代網頁設計:一套精益求精的實戰指南 在日新月異的Web技術浪潮中,前端開發者的角色愈發關鍵。他們不僅需要構建視覺上引人入勝的界麵,更需確保這些界麵在各種設備、瀏覽器及性能要求下都能流暢運行。本書並非一本淺嘗輒止的速成教程,而是一套深度探索CSS精髓、揭示高級Web標準解決方案的實戰工具箱。它旨在帶領讀者超越基礎語法的掌握,邁入精通CSS的殿堂,從而在復雜的Web開發環境中遊刃有餘,打造齣既美觀又高效的現代化網站。 本書的核心理念在於“解決問題”。它不是羅列CSS屬性的字典,而是圍繞實際開發中遇到的棘手難題,提煉齣一套套經過實踐檢驗、具備前瞻性的解決方案。從響應式設計的精妙布局,到復雜動畫的流暢實現,再到性能優化的極緻追求,本書將逐一剖析,並提供清晰、可復用的代碼示例和詳盡的原理闡釋。我們相信,真正的精通源於對根本原理的深刻理解,以及將這些原理應用於解決實際挑戰的能力。 為何選擇精通? 在Web設計的早期,CSS被視為一種簡單的樣式錶語言。然而,隨著Web標準的不斷演進和瀏覽器功能的日益強大,CSS的能力早已今非昔比。如今,CSS足以支撐起幾乎所有你能想象到的視覺錶現和交互邏輯。但這也意味著,要想在眾多前端開發者中脫穎而齣,掌握CSS的“深度”和“廣度”變得至關重要。 本書將深入探討以下幾個關鍵領域,它們是構建現代、高性能、用戶友好型Web應用的基礎: 響應式設計的終極哲學與實踐: 響應式設計早已不是可選項,而是必備技能。本書將從斷點設置的策略,到彈性布局(Flexbox)與網格布局(Grid)的深入應用,再到視口單位(viewport units)的精妙運用,為您提供一套完整的響應式設計框架。您將學會如何構建一個在桌麵、平闆、手機乃至更小屏幕上都能完美呈現的頁麵,並理解其背後的響應式斷點選擇、內容重排與元素隱藏/顯示的最佳實踐。我們將探討如何避免常見的響應式陷阱,例如過於僵化的斷點,以及如何利用CSS的內在靈活性來優雅地處理不同尺寸的屏幕。 高級選擇器與布局技術的威力: CSS選擇器是定位和樣式化元素的基石。本書將超越基本的標簽、類和ID選擇器,深入講解僞類(pseudo-classes)和僞元素(pseudo-elements)的強大功能,以及如何利用它們來實現復雜的交互狀態和精細的樣式控製。同時,我們將徹底解析Flexbox和CSS Grid的每一個關鍵屬性,教會您如何用最少的代碼構建齣結構清晰、易於維護的復雜布局,例如導航欄、卡片式布局、儀錶盤等。您將理解它們各自的優勢和適用場景,並學會如何將它們結閤使用,以應對各種布局挑戰。 CSS動畫與過渡的藝術: 動態效果是提升用戶體驗的關鍵。本書將引導您掌握CSS transitions和animations,從簡單的元素淡入淡齣、尺寸變化,到復雜的路徑動畫、序列動畫,您將能夠創造齣流暢、吸引人的視覺反饋。我們將深入探討`@keyframes`規則、`animation`屬性及其各個子屬性,以及如何利用`transition`屬性實現平滑的屬性變化。您將學會如何控製動畫的時間函數、延遲、迭代次數,甚至如何實現更高級的同步與異步動畫效果,讓您的網頁“活”起來。 性能優化:隱藏在代碼之下的速度奧秘: 網頁的加載速度和響應速度直接影響用戶留存率和轉化率。本書將聚焦CSS層麵的性能優化策略,包括如何編寫高效的CSS選擇器,避免冗餘樣式,以及利用CSS特性(如`will-change`屬性)來提前告知瀏覽器元素的潛在變化,從而優化渲染性能。您將學習到如何通過精簡CSS文件、利用瀏覽器緩存、以及優化媒體查詢的使用來縮短加載時間。我們還會探討如何使用工具來分析CSS的性能瓶頸,並提供行之有效的解決方案。 跨瀏覽器兼容性的智能處理: 盡管Web標準日益統一,但跨瀏覽器兼容性問題仍然是前端開發中的一個挑戰。本書將提供一套係統性的方法來應對這一問題,包括如何使用CSS前綴(vendor prefixes)的正確姿勢,以及如何利用條件注釋(conditional comments)和特性查詢(feature queries)來優雅地處理不同瀏覽器版本的差異。您將學習到如何在早期階段就預見並規避兼容性問題,從而減少後期調試的時間和精力。 模塊化與可維護性:構建可復用的CSS架構: 隨著項目規模的增長,CSS的可維護性成為一個關鍵問題。本書將介紹諸如BEM(Block, Element, Modifier)、OOCSS(Object-Oriented CSS)等流行的CSS架構方法論,幫助您構建齣清晰、模塊化、易於復用的CSS代碼。您將學會如何組織您的CSS文件,如何命名類名,以及如何編寫具有良好封裝性的CSS組件,從而提高團隊協作效率和項目的長期可維護性。 CSS變量(Custom Properties)與主題化: CSS變量(CSS Custom Properties)的齣現極大地增強瞭CSS的靈活性和動態性。本書將深入講解CSS變量的定義、使用和作用域,以及如何利用它們來實現動態的主題切換、顔色管理和響應式設計中的變量控製。您將學會如何構建一個可自定義主題的網站,讓用戶擁有更多的個性化選擇。 無障礙Web設計的CSS實踐: 構建一個對所有用戶都友好的網站是現代Web開發的道德責任。本書將探討如何在CSS層麵實現無障礙設計(Accessibility),例如如何通過顔色對比度、焦點指示器、可讀性強的排版等來確保用戶能夠順暢地訪問您的網站,無論他們是使用輔助技術還是存在視力或認知障礙。 本書的每一章都以解決一個實際的Web開發難題為齣發點,通過清晰的理論闡釋、精煉的代碼示例,以及對最佳實踐的深入分析,幫助讀者構建起紮實的CSS功底。我們強調“理解”而非“記憶”,鼓勵讀者在閱讀過程中動手實踐,並思考如何將所學知識遷移到自己的項目中。 本書的語言風格力求專業、嚴謹,同時又不失易懂性。我們避免使用過於晦澀的術語,並在必要時提供解釋。我們相信,通過本書的學習,您將不再滿足於僅僅“能寫CSS”,而是能夠“精通CSS”,成為一名能夠自信應對各種Web挑戰的高級前端開發者。無論是獨立的個人開發者,還是大型團隊的一員,本書都將是您提升技藝、邁嚮卓越的理想伴侶。準備好迎接挑戰,用CSS重塑您的Web世界吧!