使用HTML豐富的標簽可以輕松構(gòu)建不同的網(wǎng)頁結(jié)構(gòu)，但是在設(shè)計網(wǎng)頁時，控制網(wǎng)頁顯示效果方面，它的能力就比較弱，如果要在網(wǎng)站建設(shè)時設(shè)計美觀大方、賞心悅目的網(wǎng)頁效果，就要用到CSS。CSS彌補了HTML不足，為用戶提供了強大的頁面樣式美化和布局功能。

1、認識CSS

CSS是在HTML語言基礎(chǔ)上發(fā)展而來的，是為了克服HTML在網(wǎng)頁布局方面存在的不足。在HTML語言中，各種顯示效果的實現(xiàn)都是通過標簽來實現(xiàn)，然后通過標簽的各種屬性來定義標簽的顯示樣式。這造成了網(wǎng)頁代碼的臃腫、雜亂，網(wǎng)頁后期維護和控制變得非常困難。

【示例】要在一段文字中把一部分文字變成藍色，HTML標識代碼如下：

<p><font color=blue>顯示信息</font></p>

而使用CSS之后，則上例代碼可以寫成：

<p style="color: blue ">顯示信息</p>

這樣簡單比較就可以看出CSS簡化了HTML中各種繁瑣的標簽，使得各個標簽的屬性在網(wǎng)頁設(shè)計時更具有一般性和通用性，并且樣式表擴展了原先的標簽功能，能夠?qū)崿F(xiàn)更多的效果，樣式表甚至超越了網(wǎng)頁本身顯示功能，而把樣式擴展到多種媒體上，顯示了難以抗拒的魅力。這僅僅是一個小小的例子，如果把整個網(wǎng)頁，甚至全部網(wǎng)站都用一張或幾張樣式表來專門設(shè)計網(wǎng)頁的屬性和顯示樣式，讀者就會發(fā)現(xiàn)使用CSS的優(yōu)越性，特別是對后期更改維護提供了方便。

樣式表的另一個巨大貢獻就是把對象引入了HTML，使得可以使用JavaScript腳本控制網(wǎng)頁標簽的顯示效果，這在早期的HTML中實現(xiàn)起來會非常困難。CSS比較簡單、靈活、易學(xué)。除了可以控制文本屬性外，如字體、字號、顏色等，還可以設(shè)計復(fù)雜的網(wǎng)頁樣式，如對象位置、圖片效果、網(wǎng)頁布局等。通過CSS樣式表，可以統(tǒng)一控制HTML中各標簽的顯示屬性。對頁面布局、字體、顏色、背景和其他圖文效果實現(xiàn)更加精確的控制。用戶只修改一個CSS樣式表文件就可以實現(xiàn)改變一批網(wǎng)頁的外觀和格式，保證在所有瀏覽器和平臺之間的兼容性，擁有更少的編碼、更少的頁數(shù)和更快的下載速度。

2、CSS基本語法

樣式是CSS最小語法單元，每個樣式包含兩部分內(nèi)容：選擇器和聲明（或稱為規(guī)則）。

 ?選擇器（Selector）：選擇器告訴瀏覽器該樣式將作用于頁面中哪些對象，這些對象可以是某個標簽、所有網(wǎng)頁對象、指定Class或ID值等。瀏覽器在解析這個樣式時，根據(jù)選擇器來渲染對象的顯示效果。   

?聲明（Declaration）：聲明可以增加一個或者無數(shù)個，這些聲明命令瀏覽器如何去渲染選擇器指定的對象。聲明必須包括兩部分：屬性和屬性值，并用分號來標識一個聲明的結(jié)束，在一個樣式中最后一個聲明可以省略分號。所有聲明被放置在一對大括號內(nèi)，然后整體緊鄰選擇器的后面。   

?屬性（Property）：屬性是CSS提供的設(shè)置好的樣式選項。屬性名由一個單詞或多個單詞組成，多個單詞之間通過連字符相連。這樣能夠很直觀地表示屬性所要設(shè)置樣式的效果。   

?屬性值（Value）：屬性值是用來定義顯示樣式的參數(shù)，包括數(shù)值和單位，或者關(guān)鍵字。

【示例】定義網(wǎng)頁字體大小為12像素，字體顏色為深灰色，則可以設(shè)置如下樣式：

body{font-size: 12px; color: #CCCCCC;}

多個樣式可以并列在一起，不需要考慮如何進行分隔。例如，定義段落文本的背景色為紫色，則可以在上面樣式基礎(chǔ)上定義如下樣式：                     body{font-size: 12px; color: #CCCCCC;}

p{background-color: #FF00FF;}

由于CSS語言忽略空格（除了選擇器內(nèi)部的空格外），因此可以利用空格來格式化CSS源代碼，則上面代碼可以進行如下美化：

body {    font-size: 12px;    color: #CCCCCC;}

p { background-color: #FF00FF; }

這樣在閱讀CSS源代碼時就一目了然了，既方便閱讀，也更容易維護。CSS使用“/*注釋語句*/”對樣式進行注釋。例如，對于上面樣式可以增加注釋：

body {/*頁面基本屬性*/    font-size: 12px;    color: #CCCCCC;}

/*段落文本基礎(chǔ)屬性*/

p { background-color: #FF00FF; }