在當(dāng)今的網(wǎng)頁制作中,幾乎所有漂亮的網(wǎng)頁都用了CSS。 CSS是 Cascading Style Sheet的縮寫,有些書上把它譯為 “層疊樣式表”。有了CSS的控制,我們的網(wǎng)頁便會給人一種心曠神怡、工工整整的感覺,同時字體的色彩變化也使主頁變得更加生動活潑。
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)過在對鏈接的幾個屬性進(jìn)行顏色設(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 } //點(diǎn)擊瞬間的鏈接顯示黃色
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è)置的總體運(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; }
新聞熱點(diǎn)
疑難解答
圖片精選