CSS 简明教程 - 链接样式属性 - 简单教程，简单编程

在 CSS 中，我们可以为链接设置不同的样式，甚至可以创建各种样式的链接按钮

例如下面这段代码

<style>
.txtlink {
    color: green;
    text-decoration:none;
    margin-left:20px;
    font-size:16px;
}

.txtlink:hover {
    text-decoration:underline;
}

.button1 {
    display: inline-block;
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin-left:20px;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

.button2 {
    display:inline-block;
    background-color:#f44336;
    color: #FFFFFF;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    font-size:16px;
    margin-left:20px;
    opacity:0.8;
}

.button2:hover {
    color:white;
    background-color:red;
    opacity:1;
}
</style>

<a href="javascript:void(0)">Text Link</a>
<a href="javascript:void(0)" class="txtlink">Text Link</a>
<a href="javascript:void(0)" class="button1">Link Button</a>
<a href="javascript:void(0)" class="button2">Link Button</a>

有许多的 CSS 属性可以用来设置链接的样式，比如 color、font-family、background 等

链接状态

链接有 4 种状态

状态	说明
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:link 和 a:visited 必须在 a:hover 之前，并且 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:#B2FF99;
}
a:visited {
    background-color:#FFFF85;
}
a:hover {
    background-color:#FF704D;
}
a:active {
    background-color:#FF704D;
}

链接按钮

我们可以结合其它几个属性将一个链接显示为一个按钮的外观，例如

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;
}

我们还可以添加另一些 CSS 属性，将不同的链接设置为不同的按钮外观