您的位置：首页 > Web前端 > CSS

CSS(十) 设置超链接样式

2017-10-08 09:51 288 查看

使用CSS 伪类别来设置超链接样式

链接的四种状态：

a:link：普通的、未被访问的链接

a:visited：用户已访问的链接

a:hover：鼠标指针位于链接的上方

a:active：链接被点击的时刻

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用CSS伪类别来设置超链接样式</title>
<style type="text/css">
a:LINK {
color: red;
text-decoration: none;
}

a:VISITED {
color: blue;
text-decoration: none;
}

a:HOVER {
background-color: pink;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点我去百度</a>
</body>
</html>


没有点击的时候是红色，当鼠标移动上去的时候是粉色，当点击超链接之后变成蓝色

创建按钮式超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建按钮式超链接</title>
<style type="text/css">
body{
margin: 20px;
}

a{
font-family: Arial;
margin: 5px;
}

a:LINK,a:VISITED {
color:#A62020;
padding:4px 10px 4px 10px;
background-color:#DDD;
text-decoration: none;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}

a:HOVER {
color: #821818;
padding: 5px 8px 3px 12px;
background-color: #CCC;
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">Java</a>
<a href="http://www.baidu.com">Php</a>
<a href="http://www.baidu.com">.Net</a>
</body>
</html>


点击超链接的时候会有凹凸感，就像点击按钮一样
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航