CSS链接

为链接添加样式

链接能应用任何CSS样式属性 (例如： color, font-family, background等).

a {
    color: hotpink;
}

让我试试

此外，链接可以根据不同的状态，显示不同的样式。

下面是链接的四种状态:

  • a:link - 一个正常的、未访问过的链接
  • a:visited - 用户已访问的链接
  • a:hover - 当用户将鼠标放置在它上面时的状态
  • a:active - 链接被点击
/* unvisited link */
a:link {
    color: red;
}

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

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
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;
}

让我试试