CSS 链接

CSS 链接样式

学习如何使用现代 CSS 技术为超链接设置样式。

通过 <a> HTML 标签定义的链接，可以通过多种方式设置样式，以增强用户体验并匹配你的网站设计。

链接的基本样式

你可以对链接应用几乎所有 CSS 属性，包括 color、font-family、background-color、padding、display 等等。

/* 基本链接颜色 */
a {
  color: #007bff; /* 链接的常见蓝色 */
  text-decoration: none; /* 移除默认下划线 */
}

/* 悬停样式以提供视觉反馈 */
a:hover {
  color: #0056b3;
  text-decoration: underline; /* 悬停时添加下划线 */
}

此外，链接可以根据其状态使用伪类（pseudo-classes）进行不同的样式设置。这些状态反映了用户交互：

核心链接状态：

:link - 用户尚未访问过的普通链接。
:visited - 用户之前访问过的链接。
:hover - 鼠标指针悬停在链接上时的状态。
:focus - 链接获得焦点时的状态，通常通过键盘导航（例如，使用 Tab 键）。这对于可访问性很重要。
:focus-visible - 链接获得焦点且浏览器判断应显示焦点样式时的状态（通常鼠标点击时跳过焦点样式，但键盘导航时显示）。这提供了更好的用户体验。
:active - 链接被点击或激活时的瞬间状态。

/* 未访问的链接 */
a:link {
  color: #1a0dab; /* 示例：谷歌蓝 */
}

/* 已访问的链接 */
a:visited {
  color: #681da8; /* 示例：谷歌紫 */
}

/* 链接获得焦点（键盘） */
a:focus-visible {
  outline: 2px solid #007bff; /* 添加醒目的轮廓以提高可访问性 */
  outline-offset: 2px;
}

/* 鼠标悬停在链接上 */
a:hover {
  color: #f00; /* 悬停时显示红色 */
  text-decoration: underline;
}

/* 链接被点击 */
a:active {
  color: #f00; /* 激活时显示红色 */
}

顺序很重要：为这些链接状态定义样式时，由于 CSS 特异性规则，在 CSS 中的顺序至关重要。通常推荐的顺序是 Link（链接）、Visited（已访问）、Focus（焦点）、Focus-Visible（可见焦点）、Hover（悬停）、Active（激活），简称 LVF(V)HA。这确保了 :hover 样式覆盖 :link 和 :visited，而 :active 样式覆盖 :hover。

:hover 应放在 :link 和 :visited 之后。
:focus 和 :focus-visible 理想情况下应放在 :link 和 :visited 之后，但在 :hover 和 :active 之前。
:active 应放在 :hover 之后。

提示：为了提高可访问性，请确保链接文本与背景之间有足够的颜色对比度，并始终为 :focus 或 :focus-visible 状态提供清晰的视觉提示。

常见的链接样式技术

除了改变颜色，还有其他常见的链接样式设置方法：

文本装饰

text-decoration 属性常用于移除链接的默认下划线，并在悬停或获得焦点时重新添加下划线，以提供视觉反馈。

a:link,
a:visited {
  text-decoration: none; /* 移除默认和已访问状态下的下划线 */
}

a:hover,
a:focus-visible {
  text-decoration: underline; /* 悬停和键盘焦点时添加下划线 */
}

/* 激活状态通常不需要不同的 text-decoration，它继承自悬停/焦点状态 */
a:active {
  text-decoration: underline;
}

背景颜色

你可以改变链接的 background-color（背景颜色），通常与 padding（内边距）结合使用，创建类似按钮的外观。

a {
  display: inline-block; /* 使 padding 生效的必要设置 */
  padding: 8px 12px;
  border-radius: 4px; /* 可选：圆角 */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* 平滑过渡效果 */
}

a:link,
a:visited {
  background-color: #e0e0e0;
  color: #333;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  outline: none; /* 自定义焦点样式，通过背景/颜色变化实现 */
}

a:active {
  background-color: #0056b3;
  color: #fff;
}

实际应用：导航菜单样式

这些链接样式技术是创建交互式导航栏、按钮以及网页应用中内联文本链接的基础。

进阶示例思路：创建按钮样式的链接

结合 background-color、color、padding、border-radius、text-align、display: inline-block; 等属性以及过渡（transitions），使链接看起来和感觉上都像交互式按钮。

进一步探索更多 CSS 属性，创建独特且高效的链接样式。