使用CSS格式化網(wǎng)頁

　　使用CSS格式化網(wǎng)頁

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

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

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

　　總之，樣式表將面向紙張的復(fù)雜的出版機(jī)制引入了Web。樣式表確實(shí)實(shí)現(xiàn)了這一點(diǎn)。

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

　　12.1 理解CSS

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

　　121 理解CSS

　　樣式規(guī)則是可應(yīng)用于網(wǎng)頁中元素，如文本段落或鏈接的格式化指令。樣式規(guī)則由一個(gè)或多個(gè)樣式屬性及其值組成。內(nèi)部樣式表直接放在網(wǎng)頁中，外部樣式表保存在獨(dú)立的文檔中，網(wǎng)頁通過一個(gè)特殊標(biāo)簽鏈接外部樣式表——稍后將介紹這個(gè)標(biāo)簽。

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

　　用一個(gè)簡單例子可能更能夠解釋清楚�？聪旅娴拇�碼，你是否能夠說出文本的顏色

　　<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>

　　在這個(gè)例子中，顏色green通過樣式屬性color應(yīng)用于<div>標(biāo)簽。因此

　　標(biāo)簽中的文本是綠色的。由于<p>標(biāo)簽是<div>標(biāo)簽的子標(biāo)簽，因此綠色的文本樣式傳遞給<p>中的文本。然而，第一個(gè)<p>標(biāo)簽覆蓋了color樣式，將它改為藍(lán)色。最后的結(jié)果是，第一段文本是藍(lán)色的，第二段文本仍為傳遞而來的綠色。

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

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

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

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