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

1、認(rèn)識(shí)CSS

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

【示例】要在一段文字中把一部分文字變成藍(lán)色，HTML標(biāo)識(shí)代碼如下：

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

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

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

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

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

2、CSS基本語法

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

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

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

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

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

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

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

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

p{background-color: #FF00FF;}

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

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

p { background-color: #FF00FF; }

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

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

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

p { background-color: #FF00FF; }