使用CSS格式化網頁

　　在前一章，讀者學習了如何使用表格將信息排列為行和列。表格作為網頁布局工具曾被大量用于Web，但隨著樣式表的出現，表格的這種用途已被摒棄。表格仍很有用，但主要用于其原始目的，也就是將信息排列為行和列。除取代表格作為網頁布局機制外，樣式表也是指定字體、控制邊距、指定邊框和調整網頁外觀的首選方法。

　　樣式表背后的概念很簡單：創建一個獨立的樣式表文檔，以指定字體、顏色、背景和其他確定網站外觀的特征。然后鏈接需要使用該樣式表的所有網頁，而不是在每個文檔中都重復指定這些樣式。決定修改字體或顏色主題時，只要修改一兩個樣式表，就可以一次性修改所有網頁。因此，樣式表是一組格式化指令，能夠同時控制眾多HTML頁面的外觀。

　　樣式表的作用不僅是將網頁內容同格式分離。CSS樣式表能夠設置許多以前沒有大量工作不可能實現的格式化特征，這包括精確的字體控制、字間距和行間距、頁面邊距和邊框以及對非歐洲語言和字符的擴展支持。樣式表還能夠以人們熟悉的英寸、毫米、點和picas等來指定大小和其他度量值。你還可以使用樣式表正確地控制圖像和文本在網頁上的位置。

　　總之，樣式表將面向紙張的復雜的出版機制引入了Web。樣式表確實實現了這一點。

　　注意：如果有3個或更多的網頁使用類似的格式和字體，可能想在閱讀本章時為它們創建一個樣式表。即使不想創建完整的樣式表，將樣式直接應用于網頁中的HTML元素也很有幫助。

　　12.1 理解CSS

　　樣式表背后的技術稱為CSS，即級聯樣式表(Cascading Style Sheets)。CSS是一種定義樣式(如字體、顏色和位置)的語言，用于描述如何格式化和顯示網頁中的信息。CSS樣式可直接存儲在HTML網頁中，也可存儲為獨立的樣式表文件。不管以哪種方式保存，樣式表都包含將樣式應用于特定元素類型的樣式規則。在外部使用時，樣式表規則放在外部樣式表文檔中，文件擴展名為.css。

　　121 理解CSS

　　樣式規則是可應用于網頁中元素，如文本段落或鏈接的格式化指令。樣式規則由一個或多個樣式屬性及其值組成。內部樣式表直接放在網頁中，外部樣式表保存在獨立的文檔中，網頁通過一個特殊標簽鏈接外部樣式表——稍后將介紹這個標簽。

　　名稱CSS中的“級聯(cascading)”表示樣式表規則應用于HTML文檔元素的方式。具體地說，CSS樣式表中的樣式形成一個層次結構，更具體的樣式覆蓋通用樣式。樣式規則的優先級由CSS根據這個層次結構決定，從而實現級聯效果。如果上述解釋還不是很清楚，可將 CSS的級聯機制看成一種類似繼承的關系，在這種繼承關系中，父親的特征傳遞給子女，但子女有更特殊的特征;基樣式規則適用于整個樣式表，但可被更具體的樣式規則覆蓋。

　　用一個簡單例子可能更能夠解釋清楚。看下面的代碼，你是否能夠說出文本的顏色

　　<div style="color:green">
　　This text is green.
　　<p style="color:blue">
　　This text is blue.
　　</p>
　　<p>
　　This text is still green.
　　</p>
　　</div>

　　在這個例子中，顏色green通過樣式屬性color應用于<div>標簽。因此

　　標簽中的文本是綠色的。由于<p>標簽是<div>標簽的子標簽，因此綠色的文本樣式傳遞給<p>中的文本。然而，第一個<p>標簽覆蓋了color樣式，將它改為藍色。最后的結果是，第一段文本是藍色的，第二段文本仍為傳遞而來的綠色。

　　注意：你可能注意到了，我在本章和下面幾章中大量使用了術語“元素”。元素就是網頁中的信息(內容)，如圖像、段落或鏈接。標簽用于對元素進行編碼，可以將元素看成標簽及其內部的描述信息(屬性、文本、圖像等)。

　　與許多Web技術一樣，CSS已經發展很多年了。CSS最初的版本稱為Cascading Style Sheets Level 1(CSS1)，創建于1996年。后來的CSS2標準創建于1998年，雖然這似乎是很久以前了，但直到最近CSS2仍得到所有網頁瀏覽器的支持。由于 CSS的強大功能，瀏覽器的支持始終是一個問題。幸運的是，瀏覽器最后支持了大部分功能，現在你可以安全地使用CSS2樣式表，不用擔心太多事情。因此，當我在本書中談到CSS時，指的是CSS2。

　　警告：即使在最新的網頁瀏覽器中，仍有一些CSS2特性沒有得到正確支持。我將在本書接下來的幾章中指出這些特性及相關的解決方法。

　　在http://www.w3.org/Style/CSS/上可以找到關于樣式表語言CSS1和CSS2的完整參考，還可以找到各個CSS版本都包含哪些樣式。本章接下來將解釋如何以與最新的網頁瀏覽器兼容的方式使用這些參考文檔中的信息。