1000字范文 > CSS之设置超链接样式以及设置鼠标形状

CSS之设置超链接样式以及设置鼠标形状

时间：2023-07-02 09:47:05

相关推荐

CSS之设置超链接样式以及设置鼠标形状

超链接在任意一个网页上都是最基本的元素之一，通过超链接可以实现页面的跳转、功能的激活等，我们来学习如何使用CSS设置超链接的样式

定义超链接是使用**标签，用于从一个页面链接到另一个页面，元素最重要的属性是 href 属性，它指示链接的目标。**

在所有浏览器中链接都是默认带有下划线，未被访问的链接带有下划线而且是蓝色的，已被访问的链接带有下划线而且是紫色的，活动链接带有下划线而且是红色的，我们来验证一下：

<body><p><a href="#">这是一个没有被访问过的链接1</a></p><p><a href="#">这是一个没有被访问过的链接2</a></p><p><a href="#">这是一个没有被访问过的链接3</a></p></body>

上面定义有三个链接，我们访问这个HTML页面，能够看到三个链接都是初始状态，也就是带有下划线且是蓝色字体

现在我们点击一下第一个超链接，能够看到字体变成了紫色：

超链接单击前后不同的颜色，其实就是超链接的默认伪类元素。所谓伪类就是不根据名称、属性、内容而是根据标签处于某种行为或状态时的特征来修饰样式，伪类样式的基本语法为：最常用的超链接伪类

a:link：未单击访问时的超链接的样式，比如：a:link {color: #000;}

a:visited：单击访问后超链接的样式，比如：a:visited{color: #F00;}

a:hover：鼠标移动到超链接上的样式，比如：a:hover{color: #CCC;}

a:active：鼠标单击未释放的超链接的样式，比如：a:active {color: #999;}

超链接的伪类一共有四种，在css设置伪类的顺序为：a:link–>a:visited–>a:hover–>a:active，大家一定要注意设置的先后顺序，比如说如果先设置a:hover然后再设置a:visited，那在IE中a:hover就不起作用了；

在实际开发中一般只设置两种超链接样式，一个是超链接a标签选择器的样式，还有一种是鼠标悬浮在超链接上的样式；

那我们动手来试一下，编辑一个红色的超链接a标签，鼠标悬浮在链接上面是字体变为黄色，鼠标点击时字体变为紫色：

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">p{width:350px;}a{color:#f00;}a:hover{color:#FDF405;}a:active{color:#F707EE;}</style></head><body><p><a href="#">编辑一个红色的超链接a标签，鼠标悬浮在链接上面是字体变为黄色，鼠标点击时字体变为紫色</a></p></body></html>

链接的颜色变化依次为：