2.1 認(rèn)識(shí)CSS

CSS指層疊樣式表（Cascading Style Sheets），對(duì)于設(shè)計(jì)者來說，CSS是一個(gè)非常靈活的工具，使用戶不必再把復(fù)雜的樣式定義編寫在文檔結(jié)構(gòu)當(dāng)中，而將有關(guān)文檔的樣式內(nèi)容全部脫離出來。這樣做的最大優(yōu)勢(shì)就是在后期維護(hù)中只需要修改相應(yīng)的代碼即可。

2.1.1 CSS功能

隨著Internet的不斷發(fā)展，用戶對(duì)頁面效果的需求越來越強(qiáng)烈，只依賴HTML這種結(jié)構(gòu)化標(biāo)記，實(shí)現(xiàn)樣式已經(jīng)不能滿足網(wǎng)頁設(shè)計(jì)者的需要。其表現(xiàn)有以下幾個(gè)方面。

（1）維護(hù)困難。為了修改某個(gè)特殊標(biāo)記格式，需要花費(fèi)很多時(shí)間，尤其對(duì)整個(gè)網(wǎng)站而言，后期修改和維護(hù)成本較高。

（2）標(biāo)記不足。HTML本身標(biāo)記十分少，很多標(biāo)記都是為網(wǎng)頁內(nèi)容服務(wù)，而關(guān)于內(nèi)容樣式標(biāo)記，例如文字間距、段落縮進(jìn)很難在HTML中找到。

（3）網(wǎng)頁過于臃腫。由于沒有統(tǒng)一對(duì)各種風(fēng)格樣式進(jìn)行控制，HTML頁面往往體積過大，占用掉很多寶貴的空間。

（4）定位困難。在整體布局頁面時(shí)，HTML對(duì)于各個(gè)模塊的位置調(diào)整顯得捉襟見肘，過多的table標(biāo)記將會(huì)導(dǎo)致頁面的復(fù)雜和后期維護(hù)的困難。

在這種情況下，就需要尋找一種可以將結(jié)構(gòu)化標(biāo)記與豐富的頁面表現(xiàn)相結(jié)合的技術(shù)。CSS樣式技術(shù)就產(chǎn)生了。

CSS稱為層疊樣式表，也可以稱為CSS樣式表或樣式表，其文件擴(kuò)展名為.css。CSS是用于增強(qiáng)或控制網(wǎng)頁樣式，并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。

引用樣式表的目的是將“網(wǎng)頁結(jié)構(gòu)代碼”和“網(wǎng)頁樣式風(fēng)格代碼”分離開，從而使網(wǎng)頁設(shè)計(jì)者可以對(duì)網(wǎng)頁布局進(jìn)行更多的控制。利用樣式表，可以將整個(gè)站點(diǎn)上所有網(wǎng)頁都指向某個(gè)CSS文件，設(shè)計(jì)者只需要修改CSS文件中的某一行，整個(gè)網(wǎng)頁上對(duì)應(yīng)的樣式就會(huì)隨之發(fā)生改變。

2.1.2 瀏覽器與CSS

CSS制定完成之后，具有了很多新功能，即新樣式。但這些新樣式在瀏覽器中不能獲得完全支持。主要在于各個(gè)瀏覽器對(duì)CSS很多細(xì)節(jié)處理上存在差異，例如某個(gè)標(biāo)記的屬性有些瀏覽器支持，而有些瀏覽器不支持，或者雖然兩種瀏覽器都支持，但是其顯示效果卻不一樣。

各主流瀏覽器，為了自己產(chǎn)品的利益和推廣，定義了很多私有屬性，以便加強(qiáng)頁面顯示樣式和效果，導(dǎo)致現(xiàn)在每種瀏覽器都存在大量的私有屬性。雖然使用私有屬性可以快速構(gòu)建效果，但是對(duì)網(wǎng)頁設(shè)計(jì)者卻是一個(gè)很大的麻煩，設(shè)計(jì)一個(gè)頁面，就需要考慮在不同瀏覽器上顯示的效果，一不注意就會(huì)導(dǎo)致同一個(gè)頁面在不同瀏覽器上的顯示效果不一致。甚至有的瀏覽器不同版本之間，也具有不同的屬性。

如果所有瀏覽器都支持CSS樣式，那么網(wǎng)頁設(shè)計(jì)者只需要使用一種統(tǒng)一標(biāo)記，就會(huì)在不同瀏覽器上顯示同一樣式效果。

當(dāng)CSS被所有瀏覽器接受和支持的時(shí)候，網(wǎng)頁設(shè)計(jì)將會(huì)變得非常容易，其布局更加合理，樣式更加美觀，到那個(gè)時(shí)候，整個(gè)Web頁面顯示會(huì)煥然一新。雖然現(xiàn)在CSS還沒有完全普及，各個(gè)瀏覽器對(duì)CSS的支持還處于發(fā)展階段，但CSS是一個(gè)新的、發(fā)展?jié)摿艽蟮募夹g(shù)，在樣式修飾方面，是其他技術(shù)無可替代的。此時(shí)學(xué)習(xí)CSS技術(shù)，才能保證技術(shù)不落伍。

2.1.3 CSS發(fā)展歷史

萬維網(wǎng)聯(lián)盟（W3C）是一個(gè)非營(yíng)利的標(biāo)準(zhǔn)化聯(lián)盟，在1996年制定并發(fā)布了一個(gè)網(wǎng)頁排版樣式標(biāo)準(zhǔn)，即層疊樣式表，用來對(duì)HTML有限的表現(xiàn)功能進(jìn)行補(bǔ)充。

隨著CSS的廣泛應(yīng)用，CSS技術(shù)越來越成熟。CSS現(xiàn)在有三個(gè)不同層次的標(biāo)準(zhǔn)，CSS1、CSS2和CSS3。

CSS1（CSS Level 1）是CSS的第一層次標(biāo)準(zhǔn)，它正式發(fā)布于1996年12月17日，1999年1月11日進(jìn)行了修改。該標(biāo)準(zhǔn)提供簡(jiǎn)單的樣式表機(jī)制，使網(wǎng)頁的編者通過附屬的樣式對(duì)HTML文檔的表現(xiàn)進(jìn)行描述。

CSS2（CSS Level 2）于1998年5月12日被正式作為標(biāo)準(zhǔn)發(fā)布，CSS2基于CSS1，包含了CSS1的所有特色和功能，并在多個(gè)領(lǐng)域進(jìn)行完善，將表現(xiàn)樣式文檔和文檔內(nèi)容進(jìn)行分離。CSS2支持多媒體樣式表，使得我們能夠根據(jù)不同的輸出設(shè)備給文檔制定不同的表現(xiàn)形式。

2001年5月23日，W3C完成了CSS3的工作草案，在該草案中制訂了CSS的發(fā)展路線圖，詳細(xì)列出了所有模塊，并計(jì)劃在未來逐步進(jìn)行規(guī)范。在以后的時(shí)間內(nèi)，W3C逐漸發(fā)布了不同模塊。

CSS1主要定義了網(wǎng)頁的基本屬性，如字體、顏色、空白邊等。CSS2在此基礎(chǔ)上添加了一些高級(jí)功能，如浮動(dòng)和定位，以及一些高級(jí)的選擇器，如子選擇器、相鄰選擇器和通用選擇器等。CSS3開始遵循模塊化開發(fā)，這將有助于厘清模塊化規(guī)范之間的不同關(guān)系，減少完整文件的大小。以前的規(guī)范是一個(gè)完整的模塊，結(jié)構(gòu)龐大，而且比較復(fù)雜，所以，新的CSS3規(guī)范將其分為了多個(gè)模塊。