CSS 链接

使用 CSS 可以给链接添加多种不同的样式，可以让链接更突出，可以让链接看起来像个按钮，可以识别出访问过的链接。

使用 CSS 可以给链接添加多种不同的样式，可以让链接更突出，可以让链接看起来像个按钮，可以识别出访问过的链接。

链接的状态

除了给链接添加颜色、字体、背景色等样式外，还可使用伪类根据链接所处的状态改变链接的样式。

链接的四个状态：

  • a:link - 未访问的链接
  • a:visited - 访问过的链接
  • a:hover - 鼠标悬停时的链接
  • a:active - 点击链接时的链接
/* 未访问的链接 */
a:link {
  color: red;
}

/* 访问过的链接 */
a:visited {
  color: green;
}

/* 鼠标悬停时的链接 */
a:hover {
  color: hotpink;
}

/* 点击链接时的链接 */
a:active {
  color: blue;
}

在为链接设置状态样式时，有一些顺序规则：

  • a:hover 必须在 a:link 和 a:visited 之后
  • a:active 必须在 a:hover 之后

文字装饰

text-decoration 属性主要用于从链接中删除下划线：

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

背景颜色

background-color 属性可用于指定链接的背景颜色：

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

按钮链接

这个例子展示了一个更高级的例子，我们结合了几个 CSS 属性来将链接的样子看起来和按钮一样：

a:link,
a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover,
a:active {
  background-color: red;
}

另一个不同外观的按钮链接：

a:link,
a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover,
a:active {
  background-color: green;
  color: white;
}

光标类型

正确的光标类型能提高产品的交互体验，不同的链接操作可能需要不同的光标类型。

<a style="cursor: auto">auto 浏览器根据当前内容决定指针样式</a><br />
<a style="cursor: default">default 默认指针，通常是箭头</a><br />
<a style="cursor: pointer">pointer 悬浮于连接上时，通常为手</a><br />
<a style="cursor: crosshair">crosshair 交叉指针</a><br />
<a style="cursor: e-resize">e-resize 调节大小</a><br />
<a style="cursor: s-resize">s-resize 调节大小</a><br />
<a style="cursor: n-resize">n-resize 调节大小</a><br />
<a style="cursor: w-resize">w-resize 调节大小</a><br />
<a style="cursor: ne-resize">ne-resize 调节大小</a><br />
<a style="cursor: nw-resize">nw-resize 调节大小</a><br />
<a style="cursor: se-resize">se-resize 调节大小</a><br />
<a style="cursor: sw-resize">sw-resize 调节大小</a><br />
<a style="cursor: help">help 指示帮助</a><br />
<a style="cursor: move">move 被悬浮的物体可被移动</a><br />
<a style="cursor: progress">progress 程序后台繁忙，用户仍可交互</a><br />
<a style="cursor: wait">wait 程序繁忙，用户不可交互</a>
<a style="cursor: text">text 指示文字可被选中</a><br />
CSS 字体 CSS 边框