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

一、看下面的樣式：

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

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

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

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

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

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

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

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

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

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

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

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; }

查看更多 動易Cms教程  動易Cms模板