怎麼用CSS設定動態超連結（附代碼）-css教學-PHP中文網

怎麼用CSS設定動態超連結（附代碼）

yulia

發布： 2018-09-26 15:46:14

原創

3572 人瀏覽過

這篇文章主要跟大家介紹CSS設定動態超連結的方法，有程式碼有文字說明，比較容易理解，有興趣的朋友可以參考一下，希望對你有幫助。

HTML中，超連結是透過標記實現的，具體的位址使用標記的href屬性。

ali的部落格

預設的情況下，瀏覽中的超連結統一為藍色並且有底線，點擊過後的超連結則為紫色，而且也有底線。

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中文網其他相關文章！