CSS產(chǎn)生特殊效果是如何作到這一點的呢?在<head>和</head>之間加上如下的CSS語法控制:
<style type="text/css"> <!-- a:link { text-decoration: none} a:active { text-decoration: none } a:visited { text-decoration: none } --> </style>
這樣瀏覽器在執(zhí)行時,就明白:a:link指正常的未被訪問過的鏈接a:active指正在點擊的鏈a:visited指已經(jīng)訪問過的鏈接其中,text-decoration是文字修飾效果的意思,none參數(shù)表示使有超級鏈接的文字不顯示下劃線。如果講none替換成underline就表示有下劃線,換成overline則給超連文字加上劃線,換成line-through給超連文字加上刪除線,blink則使文字在閃爍。
★★類似的控制:使粗體文字加上刪除線
例子2:閃爍的粗體文字使用的代碼是:B { text-decoration: line-through}
★★類似的控制:是粗體文字中所有的字母大寫
使用代碼:B { text-transform: uppercase }
例子3:產(chǎn)生既大寫,又有顏色,又有刪除線的效果
以上的代碼是:b { text-decoration: line-through; text-transform: uppercase; color: #66FFFF}
類似的,用lowercase使所有字母小寫顯示,capitalize使每個單詞的首字母大寫顯示。
★★下面則是產(chǎn)生連接變色效果的內(nèi)容
在上面的“例子1”中,如果作一點修飾,可以使具有l(wèi)ink,active,visited屬性的連接顯示不同的顏色,但是卻不會產(chǎn)生鼠標(biāo)覆蓋變色效果。先看下面的代碼,使連接文字顯示綠色,正在點擊的連接顯示色,已經(jīng)反復(fù)問過的連接顯示紅色。算是復(fù)習(xí)前面的內(nèi)容(別忘記。。
<style type="text/css"> <!-- a:link { text-decoration: none ; color: green } a:active { text-decoration: none ; color: yellow } a:visited { text-decoration: none ; color: red } --> </style>
如果要產(chǎn)生變色效果,就要用到另一個屬性了,這就是hover,看下面的代碼。
a:hover { text-decoration: none ; color: yellow }表示鼠標(biāo)移動到連接文字上時,文字修飾風(fēng)格為“無”(即沒有下劃線),同時顯示黃色。
a:hover { text-decoration: underline; color: green }表示鼠標(biāo)移動到連接文字上時,文字修飾風(fēng)格為“underline”(即下劃線),同時顯示綠色。
★★擴(kuò)展一下:如果我們同時用下面2種屬性,會產(chǎn)生什么效果呢?
a:link { text-decoration: none ; color: yelloe ; font-size: 9pt } a:hover { text-decoration: underline; color: green ; font-size: 12pt }
連接文字沒有下劃線,黃色顯示,9pt大小。鼠標(biāo)移動到連接上時出現(xiàn)下劃線,顏色為綠色,字符大小12pt。是不是變色了?而且字體由于大小變化,就有動感了,似乎一下子擴(kuò)大了。
|