CSS Link

17 Mar 2025 | 6 分钟阅读

引言

文本链接经过着色和高亮，以提供视觉注意力，就像大多数画作被装裱以增强其外观和装饰目的。HTML/CSS 标准规定，点击的超链接默认会带有下划线。这促进了网页的可点击性和参与度，并具有多种功能。在线服务示例包括电子商务网站、搜索引擎展示网站、通信渠道、百科全书、新闻门户、视频库、索引页面等。

此外，无论您是前端网页设计师，因为文本不一致而对自定义网站的外观不满意，还是您试图消除带下划线的超链接造成的非统一性，本文都将精确地为您阐明替代方案。

CSS 中的链接是什么？

链接，通常称为超链接，是连接在线页面或同一网页内部分的项目。HTML 中的标签表示超链接，其中“href”属性指示目标 URL。此外，无论连接状态如何，HTML 标准都要求文本超链接保持高亮。在所有已知浏览器中，链接一次只能处于四种状态之一（未访问、已访问、悬停或活动链接状态）。然而，通过使用多种 CSS 样式代码，可以克服这一常见限制。

因此，超链接是使用 CSS 属性来设置样式的。此外，链接的不同状态可以通过定义伪类来设置样式。

我们可以使用链接从一个页面导航到另一个页面。如果已访问，链接在最纯粹的形式下是蓝色和紫色的下划线。因此，即使没有任何 CSS 代码，HTML 中的链接也与纯文本显得截然不同。

默认链接值

带下划线的链接
当鼠标悬停时，符号变为手型。
未访问的链接是蓝色的。
已访问的链接用紫色高亮显示。
活动链接显示为红色。
焦点链接周围有轮廓。

但谁想要标准外观呢？为什么不个性化每个网页上链接的外观呢？标准样式可能并不总是与背景颜色或纹理相辅相成。如本文所示，在任何这些情况下，您都可以使用 CSS 快速设计链接。但在我们深入研究样式之前，让我们先了解一下我们可以设计的 CSS 链接的不同状态。

不同的 CSS 链接状态

CSS 链接有多种状态。这些状态描述了用户与链接交互时链接如何变化。例如，在点击链接之前、点击之后、悬停在链接上时等等。以下是 CSS 链接的多种状态。

链接 (a:link)： 当用户尚未点击链接时发生的未访问状态。
已访问 (a:visited)： 用户至少访问过一次链接的状态。
悬停 (a:hover)： 鼠标悬停在链接上时的状态。
活动 (a:active)： 链接已被点击但尚未将用户定向到目标 href URL 的状态。
焦点 (a:focus)： 链接处于焦点状态，例如在键盘上按下 Tab 键进行导航时。

CSS 链接语法

使用 CSS 链接的语法是

a:link {
style code
}

CSS 链接允许您使用一些基本的 CSS 特性。这些特性包括 color、font-family、text-decoration、background-color 等。颜色值可以使用颜色名称、十六进制代码或 RGB 值来定义。text-decoration 属性用于保留或删除链接的下划线。将 text-decoration 属性值设置为“none”以关闭下划线。我们将在所有示例中利用这些特性来设置不同状态下的链接样式。但首先，让我们构建将在所有示例中使用的 HTML 代码。

代码

<html>
<head>
<title>Example for CSS links</title>
<style>
p {
font-size: 20px;
text-align: left;
}
</style>
</head>
<body>
<p>
<a href="https://www.youtube.com/">
Youtube Link
</a>
</p>
</body>
</html>

输出

CSS 链接属性

以下是链接的一些基本 CSS 特性

1. 颜色

链接文本的颜色可以使用此 CSS 属性进行更改。

语法

a {
    color: color_name;
}

示例： 此示例演示了链接中颜色属性的使用。

<html>

<head>
<title>Example for Link color property</title>
<style>
p {
font-size: 30px;
text-align: left;
}

/*unvisited link will appear green*/
a:link {
color: green;
}

/*visited link will appear green*/
a:visited {
color: green;
}

/*when the mouse hovers over the link, it will appear orange*/
a:hover {
color: blue;
}

/*when the link is clicked, it will appear black*/
a:active {
color: blue;
}
</style>
</head>

<body>
<p>
<a href="https://www.youtube.com/">
Youtube
</a>
This link will change colors with different states.
</p>
</body>

</html>

输出

2. 字体家族

font-family 属性用于修改链接的字体类型。

语法

a {
    font-family: "font-family name";
}

示例： 此示例演示了链接中 font-family 属性的使用。

<html>

<head>
<style>
/*Initial link font family arial*/
a {
font-family: Arial;
}

p {
font-size: 20px;
text-align: left;
}

/*unvisited link font family*/
a:link {
color: Arial;
}

/*visited link font family*/
a:visited {
font-family: Calibri;
}

/*when the mouse hovers over, it will change to Times New Roman*/
a:hover {
font-family: Times New Roman;
}

/*when the link is clicked, it will change to Times New Roman*/
a:active {
font-family: Times New Roman;
}
</style>
</head>

<body>
<p>
<a href="https://www.youtube.com/" id="link">
Youtube
</a>
A youtube channel
</p>
</body>

</html>

输出

3. 文本装饰

此属性用于从链接中移除或添加下划线。

语法

a {
    text-decoration: none;
}

示例： 此示例演示了链接中文本装饰属性的使用。

<html>
<head>
<title>Example for Text decoration in link</title>
<style>
/*Set the font size for better visibility*/
p {
font-size: 20px;
}

/*Removing underline using text-decoration*/
a {
text-decoration: none;
}

/*underline can be added using
text-decoration:underline;
*/
</style>
</head>

<body>
<p>
<a href="https://www.youtube.com/" id="link">
Youtube
</a>
an entertainment channel
</p>
</body>
</html>

输出

4. 背景颜色

此属性用于指定链接的背景颜色。

语法

a {
    background-color: color_name;
}

示例： 此示例演示了链接中 background-color 属性的使用。

<!DOCTYPE html>
<html>

<head>
<title>Example for background color</title>
<style>
/*Setting font size for better visibility*/
p {
font-size: 20px;
}

/*Designing unvisited link button*/
a:link {
background-color: lightpink;
color: black;
padding: 3px 3px;
text-decoration: none;
display: inline-block;
}

/*Designing the link button when the mouse cursor moves over it*/
a:hover {
background-color: green;
color: white;
padding: 5px 5px;
text-align: left;
text-decoration: none;
display: inline-block;
}
</style>
</head>

<body>
<p>
<a href="https://www.youtube.com/" id="link">
Youtube
</a>
An entertainment channel
</p>
</body>

</html>

输出

CSS 链接按钮

CSS 链接也可以使用自定义按钮/框进行自定义。以下示例演示了如何将 CSS 链接制作成按钮。

示例： 此示例演示了将链接用作按钮。

<!DOCTYPE html>
<html>

<head>
<title>Example for Link button</title>
<style>
/*Setting font size for better visibility*/
p {
font-size: 20px;
}

a {
background-color: lightblue;
color: yellow;
padding: 3px 3px;
border-radius: 6px;
text-align: left;
text-decoration: none;
display: inline-block;
}
</style>
</head>

<body>
<p>
<a href="https://www.youtube.com/" id="link">
Youtube
</a>
An entertainment channel
</p>
</body>
</html>

输出

以下是前面示例中使用的所有锚点伪类的分解。

a:link： 它用于样式化尚未查看的 URL。在此示例中，它将 text-decoration 更改为 none，这会移除传统上与链接相关的下划线。
a:visited： 它用于样式化以前访问过的 URL。在这种情况下，颜色表示链接已被点击。
a:hover： 当鼠标指针悬停在链接上时，它使用 a:hover 进行样式化。此示例将文本装饰更改为下划线，并将颜色更改为紫色，从而产生下划线效果并将链接颜色更改为紫色。
a:active： 此类用于在链接被点击时进行样式化。

伪类 :hover、:focus 和 :active 允许我们根据用户与它们的交互方式来样式化项目。根据设备的不同，这些伪类在不同的时刻（或根本不）变为活动状态。

这就是为什么按照它们通常发生的顺序指定这些样式至关重要，以便用户知道何时识别新的交互。用户通常会悬停在元素上，使其获得焦点，然后激活它。因此，安排伪类样式的最简单方法是：先 :hover，然后 :focus，然后 :active。

下一主题CSS 登录

CSS Link

引言

CSS 中的链接是什么？

默认链接值

不同的 CSS 链接状态

CSS 链接语法

CSS 链接属性

CSS 链接按钮

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Link

引言

CSS 中的链接是什么？

默认链接值

不同的 CSS 链接状态

CSS 链接语法

CSS 链接属性

CSS 链接按钮

相关帖子

CSS font-weight

CSS Lists

CSS text-align

CSS top property

CSS filter

Normalize CSS

CSS Display Grid

CSS bottom property

CSS Position Fixed

CSS transform-origin

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器