CSS 超链接样式

1,032 阅读2分钟

一、超链接伪类

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

超链接伪类有如下几个:

伪类说明
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>

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

image.png

image.png

image.png

image.png

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

二、:hover 伪类

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

三、鼠标样式

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

1、浏览器鼠标样式

比较常用的属性值如下:

属性值说明
default默认值,箭头
pointer手指
textI 形状

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

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 上时,鼠标会变成自定义的图片:

image.png