cari

Rumah  >  Artikel  >  hujung hadapan web  >  怎么用CSS设置动态超链接（附代码）

怎么用CSS设置动态超链接（附代码）

yulia
yuliaasal
2018-09-26 15:46:143528semak imbas

这篇文章主要给大家介绍CSS设置动态超链接的方法，有代码有文字说明，比较容易理解，感兴趣的朋友可以参考一下，希望对你有所帮助。

HTML中，超链接是通过标记3499910bf9dac5ae3c52d5ede7383485实现的，具体的地址使用标记3499910bf9dac5ae3c52d5ede7383485的href属性。

f71173eeb04f2e8dcc72b7ef2431b450ali的博客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，一般显示的情况非常少，很少使用。

当用户单击一个超链接之后，焦点很容易就会转移到其他地方，比如新打开的窗口等，此时，超链接就不是当前激活状态了。

Atas ialah kandungan terperinci 怎么用CSS设置动态超链接（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：深入理解CSS中display:none和visibility:hidden的区别Artikel seterusnya：如何用CSS设置段落的垂直对齐（附代码）

Artikel berkaitan

Lihat lagi