HTML 可以通过 CSS 设置链接属性样式(例如 color、font-family、background 等)。
此外,可以根据链接处于什么状态来设置链接的不同效果。
四种链接状态分别是:
a:link – 正常的,未访问的链接
a:visited – 用户访问过的链接
a:hover – 用户将鼠标悬停在链接上时
a:active – 链接被点击时
注:如果为多个链接状态设置样式,请遵循如下顺序规则:
a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后
text-decoration 属性主要用于删除链接的下划线。
background-color 属性用于设置链接的背景色。
下面我们来看一个把链接设置成按钮样式的例子,代码如下:
<style>
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;
}
</style>
<a href="http://www.zhuei.com/" target="_blank">这是一个链接</a>
如果你发现错误或有其他见解,请给www.zhuei.com留言,我们会尽快更新本文!