超链接在任意一个网页上都是最基本的元素之一，通过超链接可以实现页面的跳转、功能的激活等，我们来学习如何使用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>

链接的颜色变化依次为：

css设置鼠标形状

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

default：默认光标，箭头形；
pointer：超链接光标，手指形；
wait：指示程序正忙，通常是一只表或沙漏；
help：指示可用的帮助，通常是一个问号或一个气球；
text：指示文本；
crosshair：鼠标呈现十字状；

CSS之设置超链接样式以及设置鼠标形状相关推荐

怎么设置超链接网址css,css应该怎么设置超链接样式
css设置超链接样式的方法是,给超链接添加伪类,例如[a:visited {color:#00FF00;}].[a:visited]表示用户已经访问过的链接. 本文操作环境:windows10系统.c ...
php超链接样式,html和css中设置超链接样式方法的总结
在之前的文章中我们介绍了关于html中超链接的颜色设置,我们都也知道超链接在网站中都是无处不在的,超链接是跳转到另一个页面的入口,当你把鼠标移动到超链接上,会有颜色或者样式的改变,那么我们今天就给大家 ...
css如何设置超链接样式
css设置超链接样式是通过伪类来实现的 (1) :link:设置a对象在未被访问前的样式表属性. (2) :visited:设置a对象在其链接地址已被访问过时的样式表属性. (3) :hover:设置 ...
CSS（十一）——用CSS设置超链接样式
目录 1.使用CSS伪类别来设置超链接样式 1.1普通的.未被访问的链接 1.2用户已访问的链接
【CSS3】设置超链接样式
超链接样式伪类名称说明示例 a:link 单击访问前的超链接样式 a:link{ color: orange; } a:visited 单击访问后的超链接样式 a:visited{ color: ...
html怎样点击超链接在指定div显示,是否可以仅在特定DIV中设置超链接样式
我正在制作纯粹的javascript webapp(无JQuery),它会在运行时生成所有内容.没有要加载的CSS文件,所有样式都由JS生成. 例如: function newParagraph( ...
html超链接悬停颜色,HTML怎么设置超链接颜色？设置超链接颜色总结
有细心的小伙伴可能会发现,我们在浏览网页时,不同状态下的链接显示的颜色是不一样的.比如百度,未访问时链接未深蓝色,鼠标滑到该链接时则显示为浅蓝色,当我点击该链接后,链接则变为紫色.那么 HTML 怎么 ...
CSS设置超链接样式常用
伪类名称含义示例 a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;} a:visited 单击访问后超链接样式 a:visited {color:#333;} a: ...
html文字超链接不让变色,css不让超链接变色怎么设置？
[相关推荐:css在线手册] 链接有四个状态a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被 ...

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

css设置鼠标形状

CSS之设置超链接样式以及设置鼠标形状相关推荐

最新文章

热门文章