1.1  使用CSS的優(yōu)點(diǎn)

通過使用CSS表現(xiàn)Web文檔，可以大大減少編寫單個(gè)文檔乃至整個(gè)網(wǎng)站所花費(fèi)的時(shí)間。您會(huì)發(fā)現(xiàn)，相比只使用HTML提供的樣式設(shè)置機(jī)制，CSS實(shí)現(xiàn)的功能更加多樣。如果能有效使用CSS的眾多功能，那么可以減少網(wǎng)站所占用的硬盤空間以及服務(wù)器和瀏覽器之間傳輸網(wǎng)站所需的帶寬?？傊?，CSS具有以下優(yōu)點(diǎn)：

● 整個(gè)網(wǎng)站的表現(xiàn)形式集中到一個(gè)或少量文檔中，從而可以在片刻之間更新網(wǎng)站的外觀。在傳統(tǒng)的HTML文檔中，表現(xiàn)形式完全包含在每個(gè)文檔的主體中。而CSS為HTML提供了這樣的功能：文檔的結(jié)構(gòu)和表現(xiàn)相分離。因此設(shè)計(jì)人員可以獨(dú)立于HTML編寫CSS。

● 瀏覽器開始支持多重樣式表，使網(wǎng)站同時(shí)支持多種表現(xiàn)形式。用戶可以選擇最喜歡的一種外觀形式。這種功能以前只能借助更為復(fù)雜的編程語(yǔ)言才能實(shí)現(xiàn)。

● 使用樣式表可以針對(duì)不同的設(shè)備類型對(duì)網(wǎng)站內(nèi)容進(jìn)行優(yōu)化。例如，相同的HTML文檔在手持設(shè)備(如PDA和手機(jī))中顯示和在打印時(shí)會(huì)表現(xiàn)為不同的版本。

● 使用樣式表可以提高下載速度，因?yàn)槭褂肅SS的Web文檔占用的帶寬比較少。瀏覽器還支持一種緩存特性，這樣瀏覽器只需要下載一次CSS文件或其他Web文檔，就只在網(wǎng)站更新后才會(huì)再次向Web服務(wù)器請(qǐng)求該文件，從而進(jìn)一步增強(qiáng)了網(wǎng)站性能。

● 網(wǎng)站用戶可以編寫自己的樣式表，提高網(wǎng)站的可訪問性。例如，用戶可以編寫高反差的樣式表，從而使文檔內(nèi)容更容易閱讀。許多瀏覽器都為初級(jí)用戶提供了這種功能，但其仍然是通過CSS實(shí)現(xiàn)的。

與僅僅使用HTML相比，使用層疊樣式表的這些功能和層疊的能力可以簡(jiǎn)化網(wǎng)站的規(guī)劃、制作及維護(hù)。通過使用CSS表現(xiàn)Web文檔，可以大量減少網(wǎng)站規(guī)劃和開發(fā)的時(shí)間。

1.2  編寫CSS

與編寫HTML源代碼一樣，編寫CSS也需要一個(gè)文本編輯器。但Microsoft Word 這樣的文字處理程序并不適合CSS，因?yàn)樗鼈儠?huì)自動(dòng)完成有助于寫信或?qū)憰脑S多工作，例如自動(dòng)更正拼寫，但是在編寫代碼的時(shí)候這些功能只會(huì)適得其反。

編寫CSS時(shí)，需要的是不會(huì)修改輸入內(nèi)容、但是可以編寫和保存純文本的編輯器。

Windows中的Notepad程序就是編寫源代碼的一個(gè)理想的文本編輯器。選擇“開始”|“運(yùn)行”命令，在“打開”文本框中輸入Notepad命令就可以啟動(dòng)Notepad。

在Mac OS X中，與Notepad程序相當(dāng)?shù)氖荰extEdit，它位于Mac OS X Applications文件夾中。

還有一些更加高級(jí)的文本編輯器，能夠用不同的顏色顯示代碼(稱為語(yǔ)法高亮顯示)以幫助用戶清晰理解各部分代碼的功能，還能夠在開始輸入的時(shí)候自動(dòng)完成代碼。

下面介紹Windows中幾種可以使用的文本編輯器：

● Notepad++  可從http://sourceforge.net/projects/notepad-plus/站點(diǎn)免費(fèi)下載。

● Crimson Editor  可從www.cirmsoneditor.com站點(diǎn)免費(fèi)下載。

● HTML-kit  可從www.chami.com/html-kit站點(diǎn)免費(fèi)下載。

下面是Mac OS X中使用的一些文本編輯器：

● TextWrangler  可從ww.barebones.com站點(diǎn)免費(fèi)下載。

● TextMate  可從http://macromates.com/站點(diǎn)下載30天免費(fèi)試用版。

● 從http://en.wikipedia.org/wiki/List_of_HTML_editors可以找到更多適合編寫CSS和HTML的文本編輯器。

除此之外，還有非常流行的Adobe Dreamweaver(www.adobe.com/products/dreamweaver)，

這個(gè)產(chǎn)品將文本編輯器的功能與WYSIWYG(What You See Is What You Get，所見即所得)代碼生成器的功能結(jié)合起來，為使用HTML和CSS創(chuàng)建網(wǎng)頁(yè)提供了一個(gè)圖形界面。為理解并嘗試本書中的代碼，必須使用Dreamweaver或類似應(yīng)用程序的代碼視圖，而不能使用WYSIWYG視圖。

用戶必須創(chuàng)建帶有.html擴(kuò)展名的HTML文件。注意，如果使用Notepad或TextEdit，那么文件以.txt擴(kuò)展名保存，Web瀏覽器將把這樣的文件解釋為普通的文本而不是HTML。

為了確保在Windows中正確保存HTML文件，選擇“開始”|“運(yùn)行”命令，輸入Explorer(或者右擊“開始”菜單，然后從彈出菜單中選擇“資源管理器”命令)以打開Windows資源管理器。在打開Windows資源管理器之后，選擇“工具”|“文件夾選項(xiàng)”命令以打開“文件夾選項(xiàng)”對(duì)話框，單擊“查看”選項(xiàng)卡，取消選中“隱藏已知文件類型的擴(kuò)展名”復(fù)選框。然后單擊“確定”按鈕。

在Mac OS X中，需要打開Finder并選擇Finder | Preferences命令。然后在Advanced選項(xiàng)卡中，選中Show All File Extensions復(fù)選框。