15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > CSS之设置超链接样式

CSS之设置超链接样式

时间:2023-10-03 04:00:02 | 来源:网站运营

时间:2023-10-03 04:00:02 来源:网站运营

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

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

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


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

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



访问后的链接



超链接单击前后不同的颜色,其实就是超链接的默认伪类元素。所谓伪类就是不根据名称、属性、内容而是根据标签处于某种行为或状态时的特征来修饰样式,伪类样式的基本语法为:标签名:伪类名{声明;},例如:a:hover{color:#000;}


最常用的超链接伪类

超链接的伪类一共有四种,在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>
链接的颜色变化依次为:



超链接字体颜色
鼠标悬浮时



鼠标点击时



css设置鼠标形状

大家在访问网页时是不是发现鼠标形状有时候是箭头形状、有时候又是手势形状、或者Ⅰ字形,这些效果都是通过css中的cursor属性设置的各式各样的鼠标指针样式。cursor属性可以在任何选择器中使用,来改变各种页面元素的鼠标指针效果。




关键词:样式,设置

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭