杜黎強

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

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

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

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

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

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

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

a：visited是訪問過后的情況

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

a：active 是鼠標(biāo)點擊時

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

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

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

如下代碼視圖和效果圖：

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

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

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

對應(yīng)HTML代碼：

超鏈接文本

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

如下代碼視圖和效果圖：

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

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

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

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

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

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

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

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

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

如下代碼視圖和效果圖：

初始狀態(tài)：

指向鏈接：

激活鏈接：

訪問過后：

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

參考文獻：

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

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

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