手揣网教程：绿色安全纯净官方版,体验当今速度最快的浏览器！

如何用CSS设置动态超链接（附代码）

时间：2024/10/21作者：未知来源：手揣网教程人气：

[摘要]这篇文章主要给大家介绍CSS设置动态超链接的方法，有代码有文字说明，比较容易理解，感兴趣的朋友可以参考一下，希望对你有所帮助。HTML中，超链接是通过标记<a>实现的，具体的地址使用标记...
这篇文章主要给大家介绍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，一般显示的情况非常少，很少使用。
当用户单击一个超链接之后，焦点很容易就会转移到其他地方，比如新打开的窗口等，此时，超链接就不是当前激活状态了。
以上就是怎么用CSS设置动态超链接（附代码）的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：怎样用CSS设置动态超链接（附代码）



Copyright © 2012-2018 手揣网教程(http://www.shouchuai.com) .All Rights Reserved 网站地图 友情链接

免责声明：本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除，敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版