CSS 超链接样式

一、超链接伪类

在浏览器中，超链接通常带有下划线，在默认情况下、鼠标点击时、鼠标点击后超链接的样式都会改变。可以用超链接伪类来定义超链接在点击的不同时期的样式。

超链接伪类有如下几个：

伪类	说明
a:link	未访问时的样式
a:visited	访问后的样式
a:hover	鼠标经过时的样式
a:active	鼠标点击激活时的样式

定义四个伪类。必需按照 link、visited、hover、active 的顺序来定义，不然浏览器可能不能正常显示。

有如下示例：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css"> a{ text-decoration: none; } a:link{ color: blueviolet; } a:visited{ color: aquamarine; } a:hover{ color:wheat; } a:active{ color:yellowgreen; } </style>
    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>
    </body>
</html>

默认样式、点击后、鼠标经过、鼠标点击激活的样式依次如下：

在实际应用时，这四个伪类可以不全使用，一般来说常用的为 hover 伪类，对于未点击时的默认状态，可以直接在 a 标签中设置，不在 link 伪类中设置。

二、：hover 伪类

：hover 伪类不仅仅可以用于 a 标签，还可以用于很多元素，如 div、img 等，它用来设置鼠标经过这一元素时的样式，在实际开发中经常用到。

三、鼠标样式

使用 cursor 属性定义鼠标样式，有两种方式来定义：浏览器鼠标样式和自定义鼠标样式。

1、浏览器鼠标样式

比较常用的属性值如下：

属性值	说明
default	默认值，箭头
pointer	手指
text	I 形状

另外，还有等待、缩放样式的鼠标样式，此处不再赘述。

2、自定义鼠标样式

可以不使用浏览器的鼠标样式，使用自定义图片样式，语法：cursor:url（图片地址），属性值；，鼠标图片的地址一般都是 .cur，使用 PS 可以生成；属性值一般为：default、pointer、text，即默认情况下的鼠标样式、手状样式、文字指向样式，有如下示例：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css"> div{ height: 100px; width: 300px; cursor: url(cat.cur),default; } </style>
    </head>
    <body>
        <div class="div_default">自定义鼠标默认样式</div>
    </body>
</html>

当鼠标移到 div 上时，鼠标会变成自定义的图片：

今天的文章CSS 超链接样式分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/18178.html