css下划线_CSS链接样式
超链接是⽹页的基本元素之⼀，⼏乎每个⽹页我们都可以看到超链接。在之前讲 HTML 的时候就讲过，超链接会⾃带⼀些默认样式，例如未点击的超链接会显⽰带下划线的蓝⾊字体、点击时字体变为红⾊、点击后字体变为紫⾊。这种点击前后不⼀致的样式，其实是超链接的伪类样式，伪类就是不根据名称、属性或者内容，⽽是根据标签处于某种⾏为或状态时的特征来修饰样式，也就是说超链接将根据不同的状态显⽰不同的样式。
去掉链接的下划线
⾸先，我们知道超链接本⾝是带有默认下划线的，但是⼀般我们在⽹页中看到的超链接都是没有下划线的，那么要如何去掉超链接的下划线呢？ 其实前⾯我们讲⽂本样式的时候提到过，就是使⽤ text-decoration 属性。
⽰例：
下⾯是两个超链接：
<body>
<p><a href="#">普通的超链接</a></p>
<p><a href="#" class="no">去掉下划线的超链接</a></p>
</body>
我们使⽤类选择器 no ，去掉其中⼀个链接的下划线：
.no{
text-decoration: none;
}
在浏览器中的演⽰效果：
链接伪类
超链接有⼀个特点，就是可以根据它们所处的状态来设置不同的样式。
超链接的四种状态（伪类）如下所⽰：
伪类样式的基本语法：
a：伪类名 {
属性：属性值;
}
⽰例：
例如设置不同状态下超链接的字体颜⾊：
<a href="#">这是⼀个超链接</a>
CSS 样式代码：
a:link{ color: #F00; }  /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}  /* ⿏标指针移动到链接上 */
a:active {color: #ff7300;}  /* 正在被点击的链接 */
在浏览器中的演⽰效果：
上⾯讲到的四种超链接伪类，在设置样式时对顺序有没有要求呢？当然有啦，在 CSS 设置超链接伪类的顺序为：a:link 和 a:visited --> a:hover --> a:active。
其中 a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后，如果设置顺序不对，则样式可能不起作⽤。
css鼠标点击样式
设置⿏标指针形状
在浏览⽹页的时候，我们通常可以看到⿏标的指针形状⼀般可以为箭头、⼿形、I字形等，这些效果都可以通过 CSS 中的 cursor 属性来设置。
cursor 属性的常⽤属性值如下所⽰：
⽰例：
举个例⼦，例如要设置当⿏标移动到超链接上时，将⿏标指针变为⼗字状：
a:hover {
color: green;
cursor: crosshair;
}
在浏览器中的演⽰效果：
总结
本节我们讲了四种超链接伪类，即 a:link、a:visited、a:hover 、a:active。其中⽤的⽐较多的还是a:hover ⿏标悬浮其上。⼀定要记住如果想
要同时使⽤好⼏种状态，四种状态的书写顺序， a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。