CSS 链接样式

myzbx 2024-12-02 22:46 46 浏览

超链接是网页的基本元素之一，几乎每个网页我们都可以看到超链接。在之前讲 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 之后，如果设置顺序不对，则样式可能不起作用。

设置鼠标指针形状

在浏览网页的时候，我们通常可以看到鼠标的指针形状一般可以为箭头、手形、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 之后。

HTML 样式

上一篇：CSS 三种样式
下一篇：HTML之CSS (Border)边框(边框样式和边框宽度)

CSS 链接样式

去掉链接的下划线

链接伪类

设置鼠标指针形状

总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿