網(wǎng)頁設(shè)計(jì)中的CSS應(yīng)用技術(shù)

【摘 要】本文從講述CSS產(chǎn)生的背景過渡到解釋什么是CSS技術(shù)，CSS與網(wǎng)頁的關(guān)系等。雖然目前我們使用的CSS技術(shù)已經(jīng)能精確控制網(wǎng)頁的整體布局、提高網(wǎng)頁代碼的重用率、能簡化HTML靜態(tài)網(wǎng)頁中的各種繁瑣標(biāo)記、提升網(wǎng)頁在互聯(lián)網(wǎng)上的傳輸連率、使得網(wǎng)頁的更新與維護(hù)變得方便。但是在一些實(shí)際的使用過程中，由于CSS技術(shù)依然存在不少缺陷，因此還是需要進(jìn)行一些局部的優(yōu)化操作。

【關(guān)鍵詞】CSS技術(shù) CSS與網(wǎng)頁相關(guān)性 CSS缺陷 局部優(yōu)化

一、引言

從網(wǎng)絡(luò)誕生到發(fā)展至今.HTML的功能也隨著網(wǎng)絡(luò)的發(fā)展而日趨完善。然而，網(wǎng)頁內(nèi)容跟控制樣式夾雜混合一直是網(wǎng)頁設(shè)計(jì)語言的一大缺陷。為了能夠使網(wǎng)頁具有更好的兼容性，萬維網(wǎng)聯(lián)盟制定出統(tǒng)一的CSS規(guī)范，把需要利用樣式來控制的內(nèi)容徹底地從網(wǎng)頁中分離出來。

二、什么是CSS

CSS的全稱是Cascading Style Sheets，中文又稱為“層疊樣式表”，是一種用于控制網(wǎng)頁頁面布局的便捷技術(shù)，可以較輕松地控制頁面的布局，使頁面的元素變得合一；與此同時(shí)，它不再需要一頁一頁地修改單個(gè)頁面（假設(shè)每個(gè)頁面都是修改相同的部分），而可以將多個(gè)網(wǎng)頁的風(fēng)格同時(shí)進(jìn)行更新；并且由于CSS具有非常好的兼容性，幾乎能在所有瀏覽器上使用。因此CSS技術(shù)在現(xiàn)代網(wǎng)頁設(shè)計(jì)中得到了非常廣泛的應(yīng)用。

三、CSS的產(chǎn)生背景

CSS是萬維網(wǎng)聯(lián)盟組織為了克服HTML語言在設(shè)計(jì)網(wǎng)頁樣式時(shí)的不足而制定出的擴(kuò)展樣式標(biāo)準(zhǔn)。CSS在各個(gè)方面不僅原本繼承了HTML各種標(biāo)記的屬性設(shè)定（即樣式） ，同時(shí)還擴(kuò)充了HTML中沒有實(shí)現(xiàn)的功能區(qū)，比如它能夠通過VBScript程序等設(shè)計(jì)語言來控制網(wǎng)頁，這樣便能實(shí)現(xiàn)有效地對網(wǎng)頁的外觀和布局進(jìn)行更精確的控制，繼而使網(wǎng)頁的展示、網(wǎng)頁的布局更加靈活。CSS可以將網(wǎng)頁內(nèi)容與控制網(wǎng)頁內(nèi)容的樣式分開設(shè)定，也就是說將網(wǎng)頁的外觀設(shè)定信息從網(wǎng)頁內(nèi)容中獨(dú)立出來，并集中管理。如果進(jìn)一步將重用的CSS樣式信息存儲為單個(gè)獨(dú)立的文件我們就能讓多個(gè)不同的網(wǎng)頁搭配同一個(gè)樣式，從而實(shí)現(xiàn)統(tǒng)一的風(fēng)格，這樣的話在修改網(wǎng)頁模板時(shí)可單獨(dú)修改被保存的獨(dú)立CSS文件，節(jié)省出修改每一個(gè)網(wǎng)頁文件的時(shí)間。

CSS的每一條定義都有如下的形式：

selector{property： value； property： value；……}

其中，selector可以是HTML的tag，ID或class，如P，BODY，A；property就是那些將要被修改的性質(zhì)（屬性），如color；value是給property賦的值（參數(shù)），如color的值為red。

四、CSS與網(wǎng)頁的相關(guān)性

CSS樣式跟HTML網(wǎng)頁的完美結(jié)合，實(shí)現(xiàn)了網(wǎng)頁的展現(xiàn)效果控制代碼跟網(wǎng)頁實(shí)際內(nèi)容的分離。使得新的網(wǎng)頁設(shè)計(jì)經(jīng)常利用CSS技術(shù)來控制網(wǎng)頁的樣式，這其中通常包括控制頁面的整體布局、文字、圖片、背景等等相關(guān)信息，而HTML則干脆只用來羅列網(wǎng)頁中的幾大元素。一個(gè)完備的CSS樣式表可以以多種方式應(yīng)用到HTML頁面當(dāng)中，但外部連接通常是最常用也是最好的方式之一。這種方式采取將CSS樣式代碼單獨(dú)放入一個(gè)外部文件中，再由HTML中的link標(biāo)記來進(jìn)行調(diào)用。這樣做的好處是可以使多個(gè)網(wǎng)頁調(diào)用同一個(gè)樣式表文件，最大限度的實(shí)現(xiàn)了代碼重用及網(wǎng)站文件的最優(yōu)化配置。

CSS樣式在HTML中以STYLE標(biāo)識出現(xiàn)，其格式為：

< style >

a{text-decoration：none； color：yellow}

a：hover{text-decoration：underline； color：purple}

p{font-size：20； background：red； color：blue}

< /style >

將如上代碼插入任一HTML文檔后，刷新顯示，則所有錨點(diǎn)變?yōu)槠胀ㄗ煮w，顏色為黃，但當(dāng)鼠標(biāo)移至其上時(shí)，則錨點(diǎn)的提示字符變?yōu)閹聞澗€的紫色字體；整個(gè)文檔中被置標(biāo)P包圍的文字將以紅底藍(lán)字、字體大小為20個(gè)象素的形式出現(xiàn)。如果其中某段文字需另加修飾，可以單獨(dú)的的形式出現(xiàn)，例如

< p style=”font-size：30； font-weight ：bolder； background：white；color：blue” >

................

< /p >

則此段文字白底藍(lán)字，30個(gè)象素大小，且字體加粗。

五、CSS缺陷

（一）DIV+CSS盡管不是高不可攀，但是在網(wǎng)站建設(shè)中至少要比表格定位復(fù)雜的多，即使是對于網(wǎng)站建設(shè)的高手也是容易出現(xiàn)問題，更不要說是初學(xué)者了。（二）CSS網(wǎng)站建設(shè)的設(shè)計(jì)元素通常會放在一個(gè)外部文件中，或幾個(gè)文件，有可能相當(dāng)?shù)膹?fù)雜，甚至比較龐大，如果在網(wǎng)站建設(shè)中CSS文件調(diào)用出現(xiàn)異常，那么整個(gè)網(wǎng)站將變得慘不忍睹。（三）雖然說DIV+CSS解決了大部分瀏覽器兼容的問題，但是也有在部分瀏覽器中使用出現(xiàn)異常。（四）DIV+CSS在網(wǎng)站建設(shè)中對搜索引擎優(yōu)化與否，取決于網(wǎng)頁設(shè)計(jì)的專業(yè)水平，而不是DIV+CSS本身，在網(wǎng)站建設(shè)中使用DIV+CSS樣式的方法其實(shí)并不能保證網(wǎng)頁對搜索引擎的優(yōu)化，甚至不能保證一定比用HTML進(jìn)行網(wǎng)站建設(shè)更加的簡潔。

六、CSS局部優(yōu)化方法

編寫網(wǎng)頁時(shí)盡量減少占用網(wǎng)頁字節(jié)，同時(shí)簡化CSS代碼，讓自己寫的CSS代碼更加專業(yè)，多采用同屬性提取共用CSS選擇器，分離網(wǎng)頁顏色和背景設(shè)置樣式等技術(shù)。

總的來說，雖然CSS技術(shù)給網(wǎng)頁布局模式注入了新的生命力，能夠使得相同的HTML代碼呈現(xiàn)出數(shù)以百計(jì)風(fēng)格迥異的網(wǎng)站。但是要想比較熟練的掌握這種布局方式還需要更多的學(xué)習(xí)，積累實(shí)踐經(jīng)驗(yàn)，最終目標(biāo)是要能夠靈活掌握CSS語言并能設(shè)計(jì)制作出符合Web標(biāo)準(zhǔn)的網(wǎng)頁。

參考文獻(xiàn)：

[1]《基于Web技術(shù)的CSS網(wǎng)頁布局應(yīng)用》 吳芳費(fèi)，計(jì)算機(jī)光盤軟件與應(yīng)用，2011.

[2]《CSS層疊樣式表在DHTML中的應(yīng)用》王丹玲，鞍山師范學(xué)院學(xué)報(bào)，2006

[3]《CSS技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用與優(yōu)化》杜濤，長治學(xué)院學(xué)報(bào)，2007

[4]《CSS技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用探析》張志潔，電腦知識與技術(shù)，2007

作者簡介：

曹方明（1983—），男，湖南郴州市，工作單位：郴州技師學(xué)院，職務(wù)：專職教師。