CSS設(shè)置動(dòng)態(tài)超鏈接的方法

發(fā)布時(shí)間：2020-05-11 15:46:27 來源：億速云閱讀：254 作者：Leah 欄目：web開發(fā)

今天小編就為大家?guī)硪黄狢SS設(shè)置動(dòng)態(tài)超鏈接方法的文章。小編覺得挺不錯(cuò)的，為此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

HTML中，超鏈接是通過標(biāo)記<a>實(shí)現(xiàn)的，具體的地址使用標(biāo)記<a>的href屬性。

<ahref="http://blog.csdn.net/nangeali">ali的博客</a>

默認(rèn)的情況下，瀏覽中的超鏈接統(tǒng)一為藍(lán)色并且有下劃線，點(diǎn)擊過后的超鏈接則為紫色，而且也有下劃線。

CSS可以設(shè)置超鏈接的各種屬性，比如字體、顏色和背景等等，而且，可以通過偽類別制作很多動(dòng)態(tài)效果。

首先，去掉超鏈接的下劃線：

a{   text-decoration:none;  }

此時(shí)，無論是超鏈接本身，還是點(diǎn)擊過的超鏈接下劃線都去掉了。

CSS的偽類別——Anchor Pseudo Classes，使用偽類別制作動(dòng)態(tài)下過，具體的屬性如下：

A:link——超鏈接的普通樣式，正常瀏覽器中的樣式。

A:visited——點(diǎn)擊過的超鏈接的樣式。

A:hover——鼠標(biāo)指針經(jīng)過超鏈接上時(shí)的樣式。

A:active——在超鏈接上單擊時(shí)，即當(dāng)前激活時(shí)，超鏈接的樣式。

<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="#">紙飛機(jī)</a></td>
                            <td><a href="#">下一站</a></td>
                     </tr>   
              </table>
       </body>
</html>

可以看出，超鏈接本身都是深藍(lán)色，沒有下劃線，點(diǎn)擊過后變成了黑色也沒有下劃線，當(dāng)鼠標(biāo)指針經(jīng)過時(shí)，超鏈接變成了黃色，而且有下劃線。

此外，各種背景、邊框和排版的效果都可以加入到超鏈接的幾個(gè)偽屬性中，當(dāng)前激活狀態(tài)a:active，一般顯示的情況非常少，很少使用。

當(dāng)用戶單擊一個(gè)超鏈接之后，焦點(diǎn)很容易就會(huì)轉(zhuǎn)移到其他地方，比如新打開的窗口等，此時(shí)，超鏈接就不是當(dāng)前激活狀態(tài)了。

以上就是CSS設(shè)置動(dòng)態(tài)超鏈接方法的介紹，詳細(xì)使用情況還需要大家自己使用過才領(lǐng)會(huì)。如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

CSS設(shè)置動(dòng)態(tài)超鏈接的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽