您好,登錄后才能下訂單哦!
今天小編就為大家帶來一篇CSS設置動態超鏈接方法的文章。小編覺得挺不錯的,為此分享給大家做個參考。一起跟隨小編過來看看吧。
HTML中,超鏈接是通過標記<a>實現的,具體的地址使用標記<a>的href屬性。
<ahref="http://blog.csdn.net/nangeali">ali的博客</a>
默認的情況下,瀏覽中的超鏈接統一為藍色并且有下劃線,點擊過后的超鏈接則為紫色,而且也有下劃線。
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設置動態超鏈接方法的介紹,詳細使用情況還需要大家自己使用過才領會。如果想了解更多相關內容,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。