超链接样式的使用-CSS入门基础（014）

最新推荐文章于 2024-05-26 15:00:58 发布

虾米大王

最新推荐文章于 2024-05-26 15:00:58 发布

阅读量882

点赞数

分类专栏： CSS 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/modern358/article/details/111397692

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们分享关于超链接样式的内容。

在浏览器中，超链接的样式有默认样式、点击后样式、鼠标悬停样式和激活样式四种状态。

超链接默认情况下是带有下划线的，看起来很丑，用户体验不好，前面我们说到了text-decoration:none可以去除下划线。

表示四种访问状态，可以使用超链接的伪类来定义。

语法：

a:link {属性：属性值}a:visited {属性：属性值}a:hover {属性：属性值}a:actived {属性：属性值}

超链接伪类
属性	说明
a:link	定义a元素未访问时的样式
a:visited	定义a元素访问后的样式
a:hover	定义鼠标悬停其上时的样式
a:actived	定义鼠标单击激活时的样式

定义这四个伪类，必须按照顺序进行，依次为link、visited、hover和active，否则浏览器无法正常显示样式。请大家注意此点。

示例代码：

<html>  <head>    <title>超链接伪类</title>    <style>      #div1      {        width:200px;        height:30px;        line-height:30px;        border: 1px solid #cccccc;        text-align:center;        background-color:#40b20f;      }      a { text-decoration:none; font-size:18px;}      a:link { color:white;}      a:visited { color:purple;}      a:hover { color:yellow; text-decoration:underline;}      a:active { color:red;}    </style>  </head>  <body>    <div id="div1">      <a href="http://www.baidu.com">baidu</a>    </div>  </body></html>

常用超链接伪类：

初学者会有疑问，是不是每一个超链接都必须定义4中状态样式才可以？答案是否定的。一般情况下，我们只需要定义常用的两种状态，未访问状态和鼠标悬停状态。

未访问状态，可以直接使用a标签代替就可以了。

语法：

a {属性：属性值；}a:hover {属性：属性值；}

示例代码：

<html>  <head>    <title>超链接伪类</title>    <style type="text/css">      #d1       {          width:200px;          height:40px;          line-height:40px;           border: 1px solid #cccccc;          text-align:center;          background-color: #40b20f;        }      a { text-decoration:none; color:purple;}      a:hover { color:white;}    </style>  </head>  <body>    <div id="d1">      <a href="http://www.baidu.com">baidu</a>    </div>  </body></html>