怎麼用CSS設定動態超連結（附代碼）
- yulia原創
- 2018-09-26 15:46:143554瀏覽
這篇文章主要跟大家介紹CSS設定動態超連結的方法，有程式碼有文字說明，比較容易理解，有興趣的朋友可以參考一下，希望對你有幫助。
HTML中，超連結是透過標記3499910bf9dac5ae3c52d5ede7383485實現的，具體的位址使用標記3499910bf9dac5ae3c52d5ede7383485的href屬性。
2027a75694c4961b064ca4941c50a15aali的部落格5db79b134e9f6b82c0b36e0489ee08ed
預設的情況下，瀏覽中的超連結統一為藍色並且有底線，點擊過後的超連結則為紫色，而且也有底線。
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中文網其他相關文章！