CSS實戰精粹

《CSS實戰精粹》是2008年電子工業出版社出版的圖書，作者是（美）克拉夫特、（美）勞埃德、（美）羅賓著，譯者是李方進。

基本介紹

• 書名：CSS實戰精粹
• 作者：（美）克拉夫特，（美）勞埃德，（美）羅賓
• 譯者：李方進
• ISBN：9787121055720
• 定價：￥59.80
• 出版社：電子工業出版社
• 出版時間：2008-3-1
• 裝幀：平裝
• 字數：574000

圖書信息

本書提供了一系列現代的、高效的CSS技術，囊括了CSS工作原理的所有細節，主要介紹了能夠在項目中使用的具體CSS設計技巧，包括優先權和級聯，hack和濾器（以及如何儘可能不使用它們），有效地代碼維護和最佳化，高級選擇符和規則，高級的樣式設計和布局技術，創建一般頁面元素，疑難問題解答，等等。本書的技術主要集中於如何創建可維護、可重複使用、可兼容的實用網站。

本書適用於那些為一般人群設計專業站點的網路開發者和程式設計者，以及對（X）HTML和CSS有基本理解並希望能更上一層樓的人群。

作者簡介

Jeff Croft，網頁和圖形設計師，致力於基於網路標準的開發。目前居住並就職於堪薩斯州的勞倫斯。作為一名world Online的高級設計師，Jeff工作於多家極負盛名的標準化網站，他還擁有非常受歡迎的私人部落格和個人站點：那裡面有很多關於各個主題的文章，如現代網頁和圖形設計等。 除此之外，Jeff還在兩所有名的大學任教，向學生們傳授網路標準。同時，他還是一位自由撰稿人，完成了許多不同委託人委託的寫作任務。他的興趣愛好廣泛，不在電腦上耗著的時候，他喜歡攝影，聽音樂，看電影、電視，或是在郊外度過一個寧靜的夜晚。

目錄

作者簡介

技術評論員簡介

致謝

導言

第1章 CSS的目標

1.1 使用CSS製作樣式的優勢

1.2 語義化（x）HTML：有意義的標記

1.2.1 什麼是語義化標記

1.2.2 編寫語義化標記在現實中對你有什麼幫助

1.2.3 創建富含語義的（x）HTML標記

1.2.4 避免使用非結構性標籤

1.2.5 避免“Divitis”和“Classitis”

1.3 選擇你的標記語言和DOCTYPE

1.3.1 HTML對XHTML：決定的重要性

1.3.2 DOCTYPE：最被低估的標籤

1.4 現代Web文檔的三層結構

1.5 總結

第2章 樣式表語言

2.1 為文檔增添樣式

2.1.1 標籤

2.1.2 使用多個樣式表

2.1.3 style元素

2.2 創建樣式表

2.3 聲明

2.4 選擇符

2.4.1 元素選擇符

2.4.2 類選擇符

2.4.3 ID選擇符

2.5 （X）HTML的家族樹

2.5.1 後代選擇符

2.5.2 子元素選擇符

2.5.3 相鄰選擇符

2.6 特性選擇符

2.6.1 存在的特性

2.6.2 具體屬性值

2.6.3 部分屬性值

2.6.4 特定屬性選擇符

2.7 偽類和偽元素

2.7.1 偽類

2.7.2 偽元素

2.8 選擇符的串聯

2.9 選擇符分組

2.10 總結

第3章 優先權和級聯

3.1 選擇符

3.1.1 選擇符：簡單和組合

3.1.2 通配選擇符：“*”

3.1.3 元素選擇符

3.1.4 後代選擇符、子元素選擇符和相鄰選擇符

3.1.5 偽類選擇符

3.1.6 連結和動態偽類：讓人又愛又恨

3.1.7 偽元素

3.2 級聯：計算優先權

3.2.1 CSS 2.1規範對級聯的描述

3.2.2 翻譯規範

3.2.3 保持評分

3.2.4 幾個實例

3.2.5 理解評分機制

3.2.6 級聯、行內樣式和!important對評分的影響

3.2.7 實例

3.3 總結

第4章 瀏覽器

4.1 歷史回顧

4.2 標準的遷移

4.3 當前（桌面）瀏覽器概況

4.3.1 Firefox

4.3.2 Safari

4.3.3 Opera

4.3.4 Intemet Explorer

4.3.5 其他瀏覽器

4.4 如何應對舊的桌面瀏覽器

4.4.1 瀏覽器分級支持

4.4.2 如何選擇開發瀏覽器

4.5 行動網路的瀏覽器

4.6 總結

第5章 CSS檔案管理

5.1 樣式儲存

5.1.1 CSS檔案路徑

5.1.2 將多個檔案當成一個樣式表

5.2 類和id名稱的慣例

5.3 格式化CSS定義

5.3.1 所有屬性一行VS.每行一種屬性

5.3.2 特點排序

5.3.3 用縮略來省時間

5.4 用注釋為CSS規則標記和分組

5.4.1 CSS注釋語法

5.4.2 代碼標記

5.4.3 為元數據注釋

5.4.4 “代碼術語”的注釋

5.4.5 分組注釋

5.5 為CSS規則排序

5.5.1 從一般到特殊

5.5.2 根據規則出現的順序

5.5.3 根據網站的頁面或分區

5.6 創建一個可重複使用的框架

5.7 大量重設

5.8 總結

第6章 Hacks和Workarounds

6.1 使用“標準優先”的方法

6.1.1 IE/Win是你最後的選擇，然後像外科醫生一樣hack

6.1.2 慢著，你忘了一些瀏覽器

6.2 是否hack

6.2.1 什麼時候該用hack

6.2.2 沒必要太生動

6.3 讓hack保持獨立及注釋

6.3.1 IE條件性注釋

6.3.2 一定要讓hack保持獨立

6.3.3 你可能根本就不需要hack

6.3.4 這些代碼的作用是什麼

6.4 一些好的hack（和變通方法）

6.4.1 請容許我為你介紹

6.4.2 濾器：一種複雜又高級的hack

6.4.3 你應該了解的IE 7的“進步”

6.5 hack一個真實的布局

6.5.1 布局

6.5.2 hack

6.6 不需要hack的例子

6.6.1 設計

6.6.2 標記

6.6.3 樣式表

6.6.4 為IE 6做一定的調整

6.7 總結

第7章 GSS布局

7.1 永無休止的爭論：什麼是最完美的頁面寬度

7.1.1 固定寬度布局

7.1.2 流式布局

7.1.3 彈性布局

7.1.4 解析度依賴性布局

7.1.5 兩欄或三欄

7.2 輕觸開關改變布局

7.2.1 切換到醒目頁面

7.2.2 切換到入口頁面部分

7.3 Faux欄：使用背景圖片創建欄

7.3.1 解決方法：Faux欄

7.3.2 可變文本+固定背景寬度=麻煩

7.3.3 固定寬度布局：隨著字型大小而變化的欄

7.4 管理浮層

7.4.1 浮動所有的東西

7.4.2 使用簡易清除

7.4.3 用溢出控制浮動

7.5 否定的好處

7.6 CSS布局的彈性

7.6.1 布局實例

7.6.2 樣式轉換器：賦予用戶控制權

7.7 總結

第8章 創建一般頁面元素

8.1 設計頁眉

8.1.1 使用小Logo

8.1.2 混合併匹配前景和背景圖片

8.1.3 定位Logo和標語

8.1.4 增加背景圖片

8.1.5 增加倒影圖片

8.1.6 使樣式表失效

8.1.7 增加網站搜尋和站點級別的頁眉連結

8.1.8 將連結浮動到位

8.1.9 定位搜尋盒

8.2 創建基於CSS的Tab式導航

8.2.1 創建標記

8.2.2 定位連結

8.2.3 設計連結

8.3 當前位置

8.3.1 展示當前位置的層次

8.3.2 設計層次的順序

8.4 圖片和懸停效果

8.4.1 簡單圖片互換

8.4.2 避免“Divitis”

8.4.3 小魔法：多種狀態一個圖片

8.4.4 遠處圖片的轉換

8.4.5 遠處圖片轉換和小魔法的組合

8.5 圓角盒

8.5.1 創建一個固定寬度的圓盒子

8.5.2 創建一個可放大的圓角盒

8.5.3 製作背景圖片

8.6 總結

第9章 排版

9.1 字樣分類

9.1.1 Serif（font.family：serif；）?

9.1.2 Sans Serif（font—family：sans—serif；）

9.1.3 Monospace（font—family：monospace；）

9.1.4 Cursive（font—family：cursive；）

9.1.5 Fantasy（font.family：fantasy；）

9.2 用CSS選擇字型

9.2.1 使用一般字型族

9.2.2 使用特殊字型族

9.2.3 網路上的字樣問題

9.2.4 微軟Vista字型

9.3 字型粗細

9.3.1 用關鍵字分配font—weight

9.3.2 用數值分配font—weight

9.3.3 bolder和lighter

9.3.4 關於字型粗細的最後結語

9.4 設定字型大小

9.4.1 絕對尺寸關鍵字

9.4.2 相對尺寸關鍵字

9.4.3 使用像素設定文本大小

9.4.4 用百分值和em設定文本尺寸

9.4.5 Richard Rutter的62.5%hack

9.5 字型樣式

9.6 轉換文本

9.7 字型變異

9.8 設定文本塊

9.8.1 行距

9.8.2 空行（或行高）

9.8.3 字元間距調整

9.8.4 文本對齊和校對

9.8.5 塊段落和傳統段落

9.8.6 提示新段落

9.8.7 設定引用

9.9 標題和副標題

9.9.1 頁面邊距

9.9.2 圖片替換

9.9.3 完整的例子

9.10 總結

第10章 設計表格

10.1 表格標記

10.1.1 caption元素

10.1.2 tIl元素

10.1.3 abbr屬性

10.1.4 scope屬性

10.1.5 在複雜表格中分配作用域

10.1.6 thead、tfoot和tbody元素

10.1.7 欄

10.1.8 summary屬性

10.1.9 所有的標記

10.2 增加樣式

10.2.1 表格框線

10.2.2 斑馬式表格

10.2.3 設計標題

10.3 更上一層樓

10.4 總結

第11章 設計表單

11.1 設計表單控制項

11.2 表單布局

11.2.1 表單的語義化（x）HTML

11.2.2 對表單套用基本的設計

11.2.3 中級表單設計

11.2.4 將標籤和它們的域放在中間

11.3 總結

第12章 設計列表

12.1 基本列表

12.2 去掉瀏覽器默認樣式

12.3 列表平齊

12.4 白定義項目編號

12.4.1 設計有序列表

12.4.2 用背景圖片自定義項目符號

12.4.3 右邊排列的圖示

12.5 垂直導航連結

12.5.1 連結的填充

12.5.2 連結的懸停效果

12.5.3 完整的頁面

12.5.4 命名和隱藏連結組

15.6 用關聯選擇符顯示位置

12.7 設計定義列表

12.7.1 例1：安排日常事務

12.7.2 例2：貨物評論

12.8 總結

第13章 設計列印和其他媒體樣式

13.1 媒體類型簡介

13.1.1 實用的媒體類型

13.1.2 不是那么實用的媒體類型

13.2 指定媒體類型

13.2.1 給連結元素增加一個媒體屬性

13.2.2 給@import語句增加一個媒體屬性

13.2.3 為樣式表中的某個特定選擇符增加媒體屬性

13.3 創建一個列印樣式表

13.4 列印CSS檔案中包含的內容

13.4.1 重設布局

13.4.2 隱藏導航和其他互動元素

13.4.3 糾正一些從螢幕樣式表中繼承來的小問題

13.5 獲得更好的列印頁面的小竅門

13.6 需要警惕的事情

13.6.1 檢查你的頁面寬度

13.6.2 CSS定位的列印錯誤

13.6.3 蒐集有關你的“有趣的列印輸出”的反饋

13.7 高級CSS列印技巧

13.7.1 在列印頁面插入URL

13.7.2 用DOM和CSS實現選擇性列印

13.8 其他媒體類型的樣式表

13.8.1 投影

13.8.2 語音媒體

13.8.3 攜帶型媒體

13.8.4 所有媒體類型

13.9 總結

第14章 常見問題解析

14.1 當你不知道什麼出了錯時該怎么辦

14.1.1 實用的瀏覽器助手和工具

14.1.2 檢驗標記和樣式

14.1.3 在塊中使樣式失效

14.1.4 讓hack失效

14.1.5 創建最小測試案例，讓問題變得簡單.

14.2 CSS常見錯誤

14.2.1 特異性問題

14.2.2 圖片路徑

14.2.3 連結順序

14.2.4 清除掉所有浮動

14.3 CSS常見bug（在IE中）

14.3.1 兩倍的浮動邊距

14.3.2 三像素偏移

14.3.3 在一個相對容器里的絕對定位

14.3.4 空格bug

14.4 在現實中解決問題：演練

14.4.1 創建布局

14.4.2 讓它在Firefox中表現完美

14.4.3 IE的悲哀

14.4.4 增加副導航

14.4.5 為什麼不把hack分組呢

14.5 總結

附錄A CSS參考

A.1 CSS單位、關鍵字和其他屬性值

A.1.1 分數和整數

A.1.2 顏色

A.1.3 font

A.1.4 長度

A.1.5 百分數

A.1.6 定位關鍵字

A.1.7 URL

A.1.8 多種用途的屬性

A.1.9 繼承

A.2 CSS屬性

A.2.1 font、文本顏色、文本尺寸和類似屬性

A.2.2 間距和排列類型

A.2.3 盒模型

A.2.4 定位

A.2.5 背景顏色、圖片和類似的屬性

A.2.6 列表

A.2.7 表格

A.2.8 生成的內容

A.2.9 cursor

A.2.10 列印

附錄B GSS特異性分級表

B.1 元素選擇符

B.2 後代、子和相鄰選擇符

B.3 屬性選擇符

B.4 偽類選擇符

B.5 偽元素

附錄C 瀏覽器分級表

C.1 背景

C.2 框線

C.3 邊距

C.4 間距

C.5 尺寸

C.6 文本

C.7 font

C.8 列表和標記

C.9 定位

C.10 分級

C.11 表格

C.12 偽類

C.13 偽元素

C.14 輪廓

索引