如何使用 CSS 设置链接样式：详细的初学者教程

已发表: 2022-09-02

在本教程中，我们将讨论如何通过 CSS 设置 Web 链接样式。 链接是任何网站的核心部分。 它们允许您将访问者转移到它的其他部分，参考来源以强调您正在提出的观点，帮助读者发现更多相关的博客文章等等。

学习如何更改他们的设计可以确保您可以将其识别为链接并适合您网站的其余部分。 CSS为此提供了许多不同的方法和属性，所以让我们一一介绍。

链接标准和默认链接样式

在我们讨论如何更改链接设计之前，让我们首先了解它们的构成。 这是 HTML 中的链接元素的样子：

 <a href="https://torquemag.io/">TorqueMag</a>

如您所见，它由几个部分组成：

  • <a> – 这是用于创建链接元素的运算符。 为什么a ？ 因为在 HTML 中，链接也被称为锚标签。
  • href="" – 双引号内的任何内容都是此链接指向的位置。 这是点击它的人将登陆的地址。
  • TorqueMag – 这是出现在页面上的链接文本，例如像这样（不要点击它，这个链接无处可去）。
  • </a> - 关闭链接元素并告诉浏览器链接文本到此结束的部分。

到目前为止，很容易。

默认情况下链接是什么样的

有趣的是，当您查看页面上此类链接的外观时。 你可能以前见过它。

链接默认样式示例

如果您在 HTML 文档中声明任何旧链接并且不提供任何样式信息，它将采用默认样式：

  1. 链接文本为蓝色，链接本身带有下划线。
  2. 当您将鼠标悬停在它上面时，光标会变成一个小手形图标。
  3. 当您单击它时，它会变成红色一秒钟。
  4. 访问该链接后，其颜色将变为紫色。
  5. 当您通过键盘上的制表键导航到链接时，它周围会有一个蓝色轮廓。

这些标准是在 Internet 的早期建立的，自 90 年代以来没有太大变化。 有趣的是，即使您从未有意识地考虑过这一点，在某种程度上，您可能只是通过网上冲浪就知道了上述大部分内容。

了解链接状态

从上面也可以明显看出，链接具有不同的状态，这些状态会影响它们的外观。 您可以使用不同的 CSS 伪类来定位它们，这些伪类允许您影响它们各自的样式。 这些是：

  • a – 这是前面提到的锚标签。 它针对所有阶段的所有链接。
  • a:link – 用于正常的、未访问的链接。 用技术术语来说， :link以所有具有href属性的锚标记为目标。 实际上，它并没有用那么多。 很多人只是简单地使用a ，因为没有href属性的锚标记相当少见，所以通常不需要这种类型的区分。
  • a:visited – 描述当前用户之前访问过的链接，这意味着它存在于浏览器的历史记录中。
  • a:hover – 当用户将鼠标光标悬停在链接上时显示的目标样式。
  • a:active – 在点击链接的那一刻短暂可见的样式。
  • a:focus – 一个有焦点的链接，例如用户使用 tab 键导航到的链接。 hover和focus通常一起设计。

需要注意的是，一次更改多个链接状态的样式时，必须按以下顺序进行。

  1. a
  2. a:link
  3. a:visited
  4. a:focus
  5. a:hover
  6. a:active

链接状态的样式建立在彼此的基础上并向下级联。 因此，顺序很重要，以确保它们按预期工作。

满足用户期望

在我们讨论如何通过 CSS 更改链接样式之前的最后一点是讨论用户期望。 您很可能很容易将默认链接识别为链接的原因是因为某些默认值已经在我们作为用户的很长时间内根深蒂固。

因此，我们——以及其他所有人——对链接的外观有着非常明确的期望。 如果没有实现，可能会使人们难以识别链接的期望。 出于这个原因，在进行网站设计时，最好保持接近这些期望。

实际上，这意味着：

  • 确保以某种方式突出显示链接。 只要您使链接在页面上突出，颜色或下划线都可以。 避免使用斜体或粗体。
  • 通过在悬停时更改链接来提供反馈，并且在较小程度上单击（ a:active ，还记得吗？）。 您也不应该将光标变成手形符号来表示交互元素。

在下文中，我们将告诉您如何更改以上所有内容。 但是，请记住，您应该适度地这样做以避免让您的用户感到沮丧。

如何通过 CSS 更改链接文本的样式

让我们首先谈谈如何更改链接的文本部分，因为这是构成链接的内容。

修改链接文本颜色

我们在本节中介绍的内容与我们关于如何通过 CSS 声明颜色的文章相对相似。 所以，如果你想真正了解细节，我建议你也看看那个帖子。

您可以通过几种不同的方式更改链接文本的颜色：颜色词和不同的颜色符号系统，如 HEX 代码、 rgb() / rgba() 、 hsl() / hsla()等。

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

以下是页面上的上述内容：

通过 css 示例更改链接颜色

最常见的是，您将使用 HEX 或rgb()类的东西。 在简单的测试用例之外，使用颜色名称极为罕见。

您使用哪种颜色系统取决于不同的因素，例如浏览器兼容性或您是否需要透明度。 但是，如您所见，通过color属性为链接分配颜色非常简单，并且它对所有其他链接状态的工作方式相同。 因此，您也可以轻松更改:hover或:focus的文本颜色。

调整背景颜色

除了更改文本颜色外，您还可以修改链接的背景颜色及其不同​​状态。 这就像使用background-color属性一样简单。

通过css示例样式链接背景颜色

这是上面示例的标记：

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

其他文本样式选项

由于链接只是文本，所有其他在 CSS 中设置文本样式的方式也适用于它们。 这意味着，您可以为链接及其不同状态分配其他属性，并在用户将鼠标悬停在链接上时让它们更改字体大小、字体系列或其他内容。

替代链接 css 样式

这对于某些设计来说是有意义的，但是，它们是通过 CSS 设置链接样式的不太常见的方式。

这是实现上述效果的标记：

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

使用下划线

正如我们在一开始所了解的那样，链接默认带有下划线。 如果你想摆脱它，你可以使用text-decoration: none; （这是text-decoration属性最常见的用法）。

 a { text-decoration: none; }

有些人还喜欢只在悬停时添加下划线，而不是在普通链接上添加下划线。 这也很容易做到。

 a { text-decoration: none; } a:hover { text-decoration: underline; }

另外，你可以使用border: bottom; 而不是text-decoration: underline; 在您的链接下添加一行。 人们过去常常使用它，因为它提供了更好的样式选择。 但是，这些天来，我们为标准underline方法提供了新属性，可以进行更多自定义。

例如， text-underline-offset允许您在使用text-decoration时控制文本与下方行之间的距离。 text-decoration-thickness允许您设置自定义线宽。 因此，走border路线不再像以前那样有必要了。

除此之外，还有很多方法可以使用链接下的线条，包括动画。 您可能可以就此写另一篇文章。

更改悬停时的光标样式

正如我们已经讨论过的，当您将鼠标悬停在链接上时，鼠标光标会从一个小箭头变为一个指向的小手。

鼠标悬停时光标变为指针 10

到目前为止，这是您正在处理可点击 HTML 元素的通用标志。 但是，您可能不知道您也可以将光标更改为其他东西，从十字准线过度调整箭头到加载指示器。

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

如果你好奇，可以在本地开发环境中试试上面的，看看他们的效果。 还有更多选择，您可以在此处找到。

但是，由于指针是如此通用，这绝对是用户所期望的，您通常应该坚持使用它。 如果由于某种原因它不适用于您的链接，您可以使用以下代码进行更正：

 a { cursor: pointer; }

如果您想在网站上使用自己的光标，甚至可以使用自定义图像。 例如，一家德国音乐商品在线商店使用他们自己的主题指针光标。

自定义悬停光标示例

如果您通过浏览器开发人员工具检查他们是如何做到的，您会发现以下代码：

 a { cursor: url(../images/hand.cur),pointer; }

如您所见，您可以通过向图像文件提供地址来简单地使用自定义光标。

更改 a:focus

focus样式是一项重要的辅助功​​能，因此请确保它始终存在。 默认情况下，高亮是通过outline属性发生的，它会在其周围出现一个框。

链接默认大纲示例

你问为什么要outline而不是border ​​？

因为outline不占用页面空间。 它位于元素的背景之上。 这样，聚焦链接不会改变页面布局跳转或类似情况。

那么，对于重点链接，您还有哪些其他样式选项？

很多。 它包含从background-color到color 、 font-size 、 box-shadow的所有内容，应有尽有。

通过 css 示例样式焦点链接

以下是实现上述目标的方法：

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

使用a:focus ，您基本上可以做任何您想做的事情。 然而，最有趣的应用程序之一可能是您还可以使用outline属性简单地自定义浏览器默认值。

 a:focus { outline: 3px dotted green; }

以下是页面上的上述内容：

通过 css 示例样式焦点链接大纲

链接按钮和框

当然，链接不仅仅是文本链接。 在某些地方，它们通常显示为框，例如导航菜单、表单的一部分或号召性用语。

链接为按钮示例

这并不难实现。 基本上，您只需想办法在链接文本周围添加空间并提供背景或边框/轮廓，以便将其显示为按钮或框。 除此之外，它们仍然是我们之前使用的相同链接元素。

有几种方法可以实现这一点，从简单地将填充添加到 flexbox 或网格等系统。 下面只是一个例子，你可以如何做到这一点，还有更多的选择。

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

在这种情况下，CSS 既包含链接的样式，也包含链接所在的容器。当然，您可以使用与以前相同的链接状态来包含不同场景的不同行为。

在链接中包含图标

值得一提的是，您还可以在链接中包含图标。 有些人这样做是为了更清楚地表明某些东西是一个将用户带离当前页面的外链。

通过 css 示例将图标添加到外部链接
图标来源：Icons8

这是如何做到这一点的。 首先是 HTML：

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

然后，CSS：

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

a[href^="http"]仅针对在href=""中具有以http开头的地址的锚标记。 为此，标记添加了一个背景图像，即图标，将其设置为不重复，将其一直向右移动，并将其垂直居中。 标记的其余部分定义图标大小并在它和文本之间创建一点空间。

最后的想法：链接的 CSS 样式

一旦你掌握了基础知识，通过 CSS 改变链接的样式就不是那么难了。 最重要的部分是理解它们具有不同的操作符和伪类所针对的不同状态。 之后，只需使用常见的 CSS 属性将其设计更改为您想要的任何内容。 您现在拥有开始使用所需的所有信息。

你最喜欢通过 CSS 设置链接样式的方式是什么？ 还有什么技巧可以分享吗？ 请在评论中这样做！