在當(dāng)今的網(wǎng)頁(yè)制作中，幾乎所有漂亮的網(wǎng)頁(yè)都用了CSS。 CSS是 Cascading Style Sheet的縮寫，有些書上把它譯為 “層疊樣式表”。有了CSS的控制，我們的網(wǎng)頁(yè)便會(huì)給人一種心曠神怡、工工整整的感覺(jué)，同時(shí)字體的色彩變化也使主頁(yè)變得更加生動(dòng)活潑。

一、看下面的樣式：

a:link { text-decoration: none} //a:link 指正常的未被訪問(wèn)過(guò)的鏈接
a:active { text-decoration: none } //a:active 指點(diǎn)擊鏈接的瞬間出現(xiàn)的鏈接情況
a:visited { text-decoration: none } //a:visited 指已經(jīng)訪問(wèn)過(guò)的鏈接
a:hover { text-decoration: none; } //a:hover 指鼠標(biāo)放上去鏈接出現(xiàn)的情況

　　hover是一個(gè)經(jīng)常會(huì)被混淆的屬性，一般大家都認(rèn)為鏈接是三個(gè)屬性：link,active,visited，而且一般的網(wǎng)頁(yè)制作軟件里也只有這三個(gè)設(shè)置，但是hover其實(shí)也是一個(gè)非常重要的屬性，它還可以在鏈接上加上背景色（BACKGROUND:#ccffcc;），其它的設(shè)置與上面三個(gè)一樣，所以大家現(xiàn)在可以記住，鏈接上可以做四個(gè)屬性設(shè)置，分別是：link,active,visited,hover

　　text-decoration是文字修飾效果的意思，none參數(shù)表示使有超級(jí)鏈接的文字不顯示下劃線。假如講none替換成underline就表示有下劃線，換成overline則給超連文字加上劃線，換成 line-through給超連文字加上刪除線。還有一個(gè)是blink參數(shù)，顧名思義是閃爍效果，但是他要在NetScape瀏覽器上才能顯示。

二、使粗體文字加上刪除線。

　　粗體文字使用的代碼是：B { text-decoration: line-through }

　　使粗體文字中所有的字母大寫。使用代碼： B { text-transform: uppercase }（這個(gè)在NS中才顯示出來(lái)，IE沒(méi)有相應(yīng)效果顯示）

　　產(chǎn)生既大寫，又有顏色，又有刪除線的效果的代碼是：b { text-decoration: line-through; text-transform: uppercase; color: #66FFFF} 。另外，用lowercase使所有字母小寫顯示，capitalize 使每個(gè)單詞的首字母大寫顯示。

三、產(chǎn)生鏈接變色效果：

　　經(jīng)過(guò)在對(duì)鏈接的幾個(gè)屬性進(jìn)行顏色設(shè)置后，可以使具有l(wèi)ink,active,visited屬性的鏈接顯示不同的顏色，但是卻不會(huì)產(chǎn)生鼠標(biāo)覆蓋變色效果。
a:link { text-decoration: none ; color: green } //正常鏈接文字顯示綠色
a:active { text-decoration: none ; color: yellow } //點(diǎn)擊瞬間的鏈接顯示黃色
a:visited { text-decoration: none ; color: red } //已經(jīng)訪問(wèn)過(guò)的鏈接顯示紅色

　　要想產(chǎn)生鼠標(biāo)放上去產(chǎn)生變色效果，就要用到另一個(gè)屬性了,這就是 hover。如：a:hover { text-decoration: none ; color: yellow；background:white; } 表示鼠標(biāo)移動(dòng)到鏈接文字上時(shí)，文字修飾風(fēng)格為“無(wú)”，同時(shí)鏈接文字顯示黃色，鏈接文字的底色顯示為白色。

四、看一下下面鏈接設(shè)置的總體運(yùn)用情況：

a:link { text-decoration: none ; color: blue ; font-size: 9pt }
a:active { text-decoration: underline ; color: yellow;font-size: 10pt }
a:visited { text-decoration: none ; color: red;font-size: 10.5pt }
a:hover { text-decoration: underline; color: green ; font-size: 11pt;background:white; }

查看更多 動(dòng)易Cms教程  動(dòng)易Cms模板