4.1　為什么需要CSS

如前所述，網(wǎng)站的目標之一是吸引用戶訪問網(wǎng)站上的內(nèi)容，而這需要網(wǎng)站的設(shè)計人員通過視覺設(shè)計手段，不斷吸引用戶的眼球，并幫助他們方便快捷地找到感興趣的內(nèi)容。

Web剛興起的時候，網(wǎng)站的設(shè)計人員只能利用HTML控制網(wǎng)頁中文本和其他元素的顯示，具體做法是給HTML標簽定義大量的屬性，利用Photoshop設(shè)計頁面，然后通過切圖將整個頁面切成很多小塊，最后使用表格標簽對這些小塊實現(xiàn)合理的布局。由于向HTML標簽直接添加樣式屬性的做法無法實現(xiàn)代碼的復用性，導致大量冗余代碼。Photoshop切圖則帶來了大量額外的圖片負擔，導致網(wǎng)站的下載速度變得異常緩慢，這顯然背離了網(wǎng)站的快捷性原則。

為了解決這個問題，人們便想到采用分層的思想，讓HTML專門負責網(wǎng)頁內(nèi)容的組織，即控制結(jié)構(gòu)層；而CSS則負責網(wǎng)頁的外觀，即表示層。因此，HTML和CSS共同構(gòu)成了Web開發(fā)的必備技能。

4.1.1　什么是CSS

CSS（Cascading Style Sheets，層疊樣式表），是一種樣式語言，用于修飾HTML設(shè)計的元素，從而告訴瀏覽器如何將這些元素精美地顯示在網(wǎng)頁中。

為了更好地理解CSS的準確含義，讓我們按字面意思從后往前看。首先，一個網(wǎng)頁的外觀控制需要定義一系列的樣式規(guī)則，這些規(guī)則組成了一個樣式表。其次，由于元素的嵌套關(guān)系會帶來樣式的繼承或直接為一個元素規(guī)定多種樣式，導致一個元素通常會受到外層樣式規(guī)則的影響，這時就形成了在顯示層級、顯示順序和顯示優(yōu)先級方面的層疊關(guān)系，最終瀏覽器只選擇其中一種樣式顯示元素。至此，CSS的名字便一目了然了，不過，為了便于記憶，你可以簡稱它為CSS或樣式即可。

4.1.2　CSS的工作原理

CSS的本質(zhì)就是定義元素的樣式規(guī)則，告訴瀏覽器如何在網(wǎng)頁中顯示元素；比如，將標題顏色設(shè)置為紅色。那么HTML、CSS和瀏覽器到底要怎么配合才能實現(xiàn)這個過程？我們已經(jīng)知道各類瀏覽器都必須遵守W3C的約定，才能做到正確地解析HTML的各類標簽，那么對于CSS它又該如何解釋呢？其實，瀏覽器首先要解析HTML，并且創(chuàng)建一棵DOM樹，然后下載并解析CSS，目的是找到元素的樣式定義。這樣，HTML和CSS結(jié)合便能夠畫出一棵文檔對象模型樹（簡稱DOM樹），這里的DOM其實是計算機上存儲的一個文檔，它保存了文檔內(nèi)容和樣式的邏輯關(guān)系，瀏覽器最終根據(jù)DOM樹繪制并顯示網(wǎng)頁的元素，主要過程如圖4.1所示。

為了理解DOM樹，我們來簡單看一段添加了CSS樣式的代碼片段，如下：

它對應的DOM樹為圖4.2。

其中，每一個不同的形狀都是一個節(jié)點，節(jié)點的類型采用不同的形狀表示。需要說明的是，這里我們只繪制了一棵DOM樹，但如果CSS樣式是被定義在一個獨立的外部文件中，那么真實的DOM樹會是兩棵，一棵是HTML對應的DOM樹，一棵是CSS對應的DOM樹。之所以CSS文檔也會解析成樹的結(jié)構(gòu)，是方便于瀏覽器去檢查頂部的通用規(guī)則，比如應用于body的樣式，然后再逐級向下找到某一個精確元素的樣式，如果發(fā)現(xiàn)有重復定義的樣式，則越靠后的樣式定義會覆蓋之前的樣式，所以就有了層疊樣式的由來。

什么是DOM樹？

DOM樹實際上是對文檔的一種邏輯結(jié)構(gòu)抽象，人們想象著HTML元素和CSS樣式的層級結(jié)構(gòu)就像一棵樹根被倒置過來，有樹根＜document＞、無數(shù)樹枝（＜html＞、＜head＞、＜body＞）以及葉子組成等，而每一個樹枝和葉子都叫作一個節(jié)點，于是，文檔中的所有代碼在計算機中采用樹的數(shù)據(jù)結(jié)構(gòu)進行存儲。這里節(jié)點可以是一個元素，一個屬性，甚至是一段文本等。關(guān)于文檔中的層級關(guān)系，是通過樹枝與葉子節(jié)點之間的關(guān)系來實現(xiàn)的，因此會出現(xiàn)一些父親節(jié)點，另一些是兒子節(jié)點，擁有同一個父親的節(jié)點則是兄弟關(guān)系。

4.1.3　CSS帶來了哪些變化

網(wǎng)頁中有無CSS還是區(qū)別很大的，請你仔細對比圖4.3（無CSS）和圖4.4（有CSS），看看兩者的區(qū)別。簡單來說，HTML只提供了網(wǎng)頁的框架結(jié)構(gòu)和內(nèi)容，樣式則是對內(nèi)容的修飾，包括文字的顏色變化、內(nèi)容的布局、列表的圖標設(shè)置等，總之有了CSS，你的HTML頁面才會變得更出眾。

我們來看一下，加入CSS之后，原來的HTML頁面到底發(fā)生了哪些變化？

（1）頁面上方的導航文字的大小和顏色發(fā)生了變化，導航文字由原來的縱向排列，變?yōu)闄M向布局，并且導航之間還存在一定的距離。

（2）為了分割不同的內(nèi)容板塊，添加了分割線，有實線也有虛線。

（3）每一個問答塊以一個整體的布局展示，與問答相關(guān)的話題名稱和標簽內(nèi)容以及日期都聚集顯示在一個塊中，呈現(xiàn)出合理的布局形式。

我們來總結(jié)一下CSS在網(wǎng)頁中的作用：

（1）規(guī)定元素的基本樣式，比如字體顏色、圖片大小、背景圖片和視頻的表現(xiàn)等；

（2）設(shè)計元素的布局方式，比如橫向布局、元素之間的間距設(shè)置等；

（3）控制元素的動態(tài)變化，比如變形、過渡和動畫等。