這篇文章主要跟大家介紹CSS設定動態超連結的方法,有程式碼有文字說明,比較容易理解,有興趣的朋友可以參考一下,希望對你有幫助。
HTML中,超連結是透過標記實現的,具體的位址使用標記的href屬性。
預設的情況下,瀏覽中的超連結統一為藍色並且有底線,點擊過後的超連結則為紫色,而且也有底線。
CSS可以設定超連結的各種屬性,例如字體、顏色和背景等等,而且,可以透過偽類別製作許多動態效果。
首先,去掉超連結的底線:
a{ text-decoration:none; }
此時,無論是超連結本身,或是點擊過的超連結下劃線都去掉了。
CSS的偽類別-Anchor Pseudo Classes,使用偽類別製作動態下過,具體的屬性如下:
A:link-超連結的普通樣式,正常瀏覽器中的樣式。
A:visited-點擊過的超連結的樣式。
A:hover-滑鼠指標經過超連結上時的樣式。
A:active-在超連結上點選時,即當前啟動時,超連結的樣式。
<html> <head> <title> </title> <style> <!-- a:link{ color:#005799; text-decoration:none; } a:visited{ color:#0000; text-decoration:none; } a.hover{ color:#ffff00; text-decoration:underline; } --> </style> </head> <body> <table width="600px"cellpadding="2" class="chara1" align="center"> <tr> <td><a href="#">首页</a></td> <td><a href="#">心情日记</a></td> <td><ahref="#">Free</a></td> <td><a href="#">一起走到</a></td> <td><a href="#">从明天起</a></td> <td><a href="#">纸飞机</a></td> <td><a href="#">下一站</a></td> </tr> </table> </body> </html>
可以看出,超連結本身都是深藍色,沒有下劃線,點擊過後變成了黑色也沒有下劃線,當滑鼠指標經過時,超連結變成了黃色,而且有下劃線。
此外,各種背景、邊框和排版的效果都可以加入到超連結的幾個偽屬性中,目前啟動狀態a:active,一般顯示的情況非常少,很少使用。
當使用者點擊一個超連結之後,焦點很容易就會轉移到其他地方,例如新開啟的視窗等,此時,超連結就不是目前啟動狀態了。
以上是怎麼用CSS設定動態超連結(附代碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!