靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)

杜黎強(qiáng)

摘要：互聯(lián)網(wǎng)技術(shù)發(fā)展越來(lái)越迅猛，其應(yīng)用技術(shù)也越來(lái)越廣泛，因此互聯(lián)網(wǎng)技術(shù)所依托的技術(shù)平臺(tái)之一——網(wǎng)站開(kāi)發(fā)也越來(lái)越重要，其中尤其包括網(wǎng)站前端開(kāi)發(fā)技術(shù)之CSS樣式的應(yīng)用。

關(guān)鍵詞：互聯(lián)網(wǎng)；網(wǎng)站前端開(kāi)發(fā)；CSS樣式

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）01-0215-02

現(xiàn)代社會(huì)互聯(lián)網(wǎng)技術(shù)的發(fā)展和廣泛應(yīng)用，快速推動(dòng)了人類社會(huì)信息時(shí)代的發(fā)展，由此帶動(dòng)和影響了現(xiàn)代社會(huì)各方面技術(shù)的變革和發(fā)展，因此對(duì)于互聯(lián)網(wǎng)技術(shù)本身依托的技術(shù)和平臺(tái)在其應(yīng)用過(guò)程中也是非常關(guān)鍵，下面就以筆者所教授的課程《靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)》所涉及的網(wǎng)站前端開(kāi)發(fā)技術(shù)中CSS樣式的應(yīng)用進(jìn)行闡述。

《靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)》這門課程是針對(duì)互聯(lián)網(wǎng)技術(shù)專業(yè)學(xué)生的靜態(tài)網(wǎng)頁(yè)制作及編程的基礎(chǔ)課，是知識(shí)性和技能性相結(jié)合的課程，此課程任務(wù)是要求講解網(wǎng)頁(yè)制作標(biāo)記語(yǔ)言及腳本語(yǔ)言的相關(guān)理論知識(shí)，以及實(shí)際操作。達(dá)到熟練掌握HTML、XHTML、CSS等標(biāo)記語(yǔ)言及Web標(biāo)準(zhǔn)布局的基本應(yīng)用。課程目標(biāo)是能熟練掌握靜態(tài)網(wǎng)頁(yè)頁(yè)面布局及代碼的編寫(xiě)。課程的主要內(nèi)容包括：1、HTML超文本標(biāo)記語(yǔ)言及XHTML可擴(kuò)展超文本標(biāo)記語(yǔ)言。2、CSS即“層疊樣式表”，使用樣式控制頁(yè)面中的元素。

CSS也叫層疊樣式表，它現(xiàn)在是網(wǎng)站前端開(kāi)發(fā)不可或缺的一部分。程序開(kāi)發(fā)者可以對(duì)任何頁(yè)面中的任意元素使用CSS，使之前認(rèn)為不可能的效果成為可能。在本課程講述到CSS應(yīng)用部分時(shí)，因?yàn)镃SS的屬性非常多，所以學(xué)生在靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)中使用起來(lái)記不清楚或者容易混淆，比如本文中所要講述的“如何使用CSS屬性控制網(wǎng)頁(yè)上超鏈接文本的格式”，因?yàn)槌溄釉诰W(wǎng)頁(yè)上使用的頻率非常高，因此超鏈接文本格式的設(shè)計(jì)也非常重要，CSS可控制超鏈接文本格式的樣式如下：

a：link是超級(jí)鏈接的初始狀態(tài)

a：visited是訪問(wèn)過(guò)后的情況

a：hover是把鼠標(biāo)放上去時(shí)懸停的狀況

a：active 是鼠標(biāo)點(diǎn)擊時(shí)

如上所示在CSS中也把設(shè)置超鏈接文本格式樣式的屬性稱作偽類，下面列舉超鏈接樣式案例：

1）使用CSS標(biāo)記選擇符設(shè)置整個(gè)網(wǎng)頁(yè)超鏈接文本格式的樣式a{color：#339；text-decoration：none； }

//對(duì)整個(gè)網(wǎng)頁(yè)有鏈接的文字顏色樣式設(shè)置為color：#939；并超鏈接文本初始狀態(tài)無(wú)下劃線text-decoration：none；

如下代碼視圖和效果圖：

2）使用CSS類選擇符設(shè)置網(wǎng)頁(yè)超鏈接文本格式的樣式

.linkyangshi{color：#339；text-decoration：none； }

//對(duì)整個(gè)網(wǎng)頁(yè)有鏈接的文字顏色樣式設(shè)置為color：#339；并超鏈接文本初始狀態(tài)無(wú)下劃線text-decoration：none；

對(duì)應(yīng)HTML代碼：

超鏈接文本

通過(guò)這樣的設(shè)置可以控制鏈接內(nèi)的CSS類名為“l(fā)inkyangshi”超鏈接的樣式。

如下代碼視圖和效果圖：

3）使用CSS偽類設(shè)置超鏈接文本格式的樣式

a：link{ color：#399；text-decoration：none；}

//是超級(jí)鏈接的初始狀態(tài)：超鏈接文本顏色為#399，并且文字無(wú)下劃線；

a：visited{ color：#939；text-decoration：none；}

//是鼠標(biāo)點(diǎn)擊超鏈接文本時(shí)的狀態(tài)：超鏈接文本顏色為#939，并且文字無(wú)下劃線；

a：hover{ color：#999；text-decoration：underline；}

//是把鼠標(biāo)放在超鏈接文本上的狀態(tài)：超鏈接文本顏色為#999，并且文字帶下劃線；

a：active{ color：#d33；text-decoration：underline；}

//是鼠標(biāo)點(diǎn)擊超鏈接文本時(shí)的狀態(tài)：超鏈接文本顏色為#d33，并且文字帶下劃線；

如下代碼視圖和效果圖：

初始狀態(tài)：

指向鏈接：

激活鏈接：

訪問(wèn)過(guò)后：

由上所述，CSS層疊樣式在網(wǎng)頁(yè)設(shè)計(jì)中的使用非常靈活，僅就上述實(shí)例的應(yīng)用可以使用多種方法，雖然其在網(wǎng)站前端開(kāi)發(fā)設(shè)計(jì)中只是其中的一部分，但就其對(duì)前端設(shè)計(jì)中網(wǎng)頁(yè)的標(biāo)準(zhǔn)布局和修飾前端設(shè)計(jì)的作用真是必不可少。

參考文獻(xiàn)：

[1] 網(wǎng)頁(yè)設(shè)計(jì)中重要并且簡(jiǎn)單易用的CSS，51CTO.COM，2012.10.11.

[2] HTML 網(wǎng)頁(yè)制作從入門到精通[M].人民郵電出版社.

[3] Web程序設(shè)計(jì)[M].2版.電子工業(yè)出版社，2005.