如何使用CSS设置动态超链接的详细解析教程

这篇文章主要给大家介绍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通常很少显示,也很少使用。
用户单击超链接时,焦点可以轻松移动到其他地方(例如,新打开的窗口等)。此时超链接当前不活动。

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片