首頁  >  文章  >  web前端  >  怎麼用CSS設定動態超連結(附代碼)

怎麼用CSS設定動態超連結(附代碼)

yulia
yulia原創
2018-09-26 15:46:143537瀏覽

這篇文章主要跟大家介紹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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn