html超链接样式(四种不同状态)设置示例

下面是“html超链接样式(四种不同状态)设置示例”的完整攻略。

一、认识超链接样式

超链接是项目建设中常用的功能之一，它能够让用户能够跳转到指定的网址或者位置。在设计网站时，要使得链接目标和周边信息区分明确，统一的链接样式显得尤为重要。 当用户与我们的网站进行交互时，超链接有以下状态：

• link：默认状态，指的是用户还未访问过该链接；
• visited：该状态指的是用户在这个超链接上已经进行了过一次的点击动作；
• hover：在鼠标悬停在链接上时的状态；
• active：表示正在被点击的状态。

二、设置超链接样式

为了让四种超链接状态的样式更明显，接下来将分别介绍如何设置。

1. link状态

a:link {
  color: #000;
  text-decoration: none;
}

在默认状态下，链接颜色为黑色，无下划线。

2. visited状态

a:visited {
  color: #999;
  text-decoration: none;
}

在访问过该链接之后的状态，颜色改为浅灰色，但是依然无下划线。

3. hover状态

a:hover {
  color: #ff0000;
  text-decoration: underline;
}

在鼠标悬停在链接上时的状态，链接颜色变为红色，下划线出现。

4. active状态

a:active {
  color: #ff0000;
  text-decoration: underline;
}

当用户点击链接时呈现的状态，与hover状态相同，颜色变为红色，下划线出现。

三、示例说明

示例1：改变链接颜色和下划线

a:link {
  color: #24639e;
  text-decoration: underline;
}
a:visited {
  color: #3a6ea5;
  text-decoration: underline;
}
a:hover {
  color: #6d9ed3;
  text-decoration: none;
}
a:active {
  color: #4a7ead;
  text-decoration: none;
}

这个示例演示了如何改变链接的颜色和下划线的样式。默认状态下，链接的颜色为浅蓝色，有下划线。链接访问过之后，颜色变深，下划线不变。当鼠标悬停在链接上时，颜色深度增加，下划线消失。而在用户点击链接时，颜色变成深蓝色，下划线也没有。

示例2：链接有背景色

a:link {
  background-color: #red;
  padding: 10px 15px;
  text-decoration: none;
  color: #fff;
}
a:visited {
  background-color: #darkred;
  padding: 10px 15px;
  text-decoration: none;
  color: #fff;
}
a:hover {
  background-color: #ff0000;
  padding: 10px 15px;
  text-decoration: none;
  color: #fff;
}
a:active {
  background-color: #ff6347;
  padding: 10px 15px;
  text-decoration: none;
  color: #fff;
}

这个示例演示了如何为链接添加背景颜色。当用户在默认状态下时，链接有红色背景，并在坐标轴周末留有适当的空间。访问后颜色变成深红色。悬停时颜色变成暗红色。当用户点击链接时是红橙色。