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

yufei       2 年, 4 月 前       242

在 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 属性可以用来设置链接的样式,比如 colorfont-familybackground

链接状态

链接有 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:linka: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 属性,将不同的链接设置为不同的按钮外观

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.