CSS 链接
利用 CSS 样式的强大功能，我们能够为超链接量身定制多样化的独特样式。
链接可以使用任何 CSS 属性（例如color、font-family、background等）来设置样式。
CSS 链接实例
下面通过定制多样化的链接，来深化你对链接<a>的理解。
/* 基础链接样式 */
a.link-text {
color: #3498db;
}
/* 带边框的链接样式 */
a.link-border {
color: #3498db;
border:solid 1px #3498db;
padding:3px 5px;
text-decoration:none;
}CSS 链接状态
在网页中，超链接<a>默认拥有四种样式，分别对应着链接所处的四种不同状态：
a:link- 正常的，未访问的链接显示效果。a:visited- 用户访问过的链接的显示效果。a:hover- 用户将鼠标悬停在链接上时的显示效果。a:active- 链接被按下时的显示效果。
CSS 链接状态实例
下面通过 CSS 链接四种状态的实例，来深化你对链接<a>四种状态的理解。
/* 未被访问的链接 */
a:link {
color: red;
}
/* 已被访问的链接 */
a:visited {
color: green;
}
/* 将鼠标悬停在链接上 */
a:hover {
color: hotpink;
}
/* 被选择的链接 */
a:active {
color: blue;
}CSS 文本装饰
text-decoration属性在链接中，主要用于 添加/去除超链接下划线 的装饰效果。
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}CSS 背景色
background-color属性在链接中，主要用于 指定超链接的背景颜色。
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
} 更多实例
- 设置带边框的链接
- 本例演示使用 CSS 样式，创建一个带边框的的链接。
- 设置按钮效果的链接
- 本例演示使用 CSS 样式，创建一个按钮效果的链接。
- 设置3D效果的按钮链接
- 本例演示使用 CSS 样式，创建一个3D按钮效果的链接。
- 设置链接的光标显示
- 本例演示使用 cursor 属性，指定鼠标悬停时，显示的光标类型。
评论区 0
发表评论
教程介绍
CSS 层叠样式表（Cascading Style Sheets），一种用于为 HTML 或 XML 添加样式的语言。
36
章节
52
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈