W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 链接(Link)



使用CSS,不同的链接可以有不同的样式。

文本链接 文本链接 按钮链接 按钮链接

链接样式

链接的样式,可以用任何CSS属性(如: colorfont-familybackground,等等)。

Example

a {
    color: hotpink;
}
尝试一下 »

特别的链接,可以有不同的样式,这取决于他们是什么 状态

这四个链接状态是:

  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

Example

/* 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 属性主要用于删除链接中的下划线:

Example

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}
尝试一下 »

背景颜色

background-color 属于用来指定链接背景色:

Example

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
尝试一下 »

高级 - 链接按钮

这个例子演示了一个更高级的链接,我们使用一些CSS属性来链接框/按钮:

Example

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;
}
尝试一下 »

Examples

更多实例

添加不同样式的超链接
这个例子演示了如何为超链接添加其他样式。

高级 - 创建链接框
这个例子演示了一个更高级的例子,我们结合若干CSS属性显示为方框。