链接的伪类选择器
a:link | a:visited | a:hover | a:focus | a:active |
未访问链接 | 已访问链接 | 鼠标悬停 | 键盘选中 | 被激活的,发生在单击时 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>link</title>
<style>
a:link,a:visited {
text-decoration: none;/*取消下划线*/
font-weight: bold;/*用加粗代替下划线*/
color: blue;
}
a:hover,a:focus,a:active {
color: red;
text-decoration: none;
border-bottom: 1px solid #000;/*利用边框自定义下划线*/
}
a[href^="http:"],a[href^="https:"] {
/*利用属性选择器设置外部链接的样式*/
/*如果站内有http开头,需要自定义重新设置*/
background: url(./images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}
</style>
</head>
<body>
<a href="#" target="_blank">未访问过</a>
<a href="#" target="_blank">访问过的</a>
<a href="#" target="_blank">鼠标悬停</a>
<a href="#" target="_blank">自定义下划线</a>
<a href="https://blog.csdn.net/funkstill" target="_blank">外部链接</a>
</body>
</html>
创建类似按钮的链接
简单翻转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Link button</title>
<style>
a {
display: block;
width: 7em;
line-height: 1.4;
text-align: center;
text-decoration: none;
border:1px solid #66a300;
background-color: #8cca12;
color: #fff;
}
/*使用伪类实现翻转*/
a:hover,a:focus {
background-color: #f7a300;
border-color: #ff7400;
}
</style>
</head>
<body>
<a href="#">假装这是按钮</a>
<br>
<a href="#">悬停在按钮</a>
</body>
</html>
图像翻转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像翻转</title>
<style>
a:link,a:visited {
display: block;
width: 203px;
height: 72px;
text-indent: -1000em;
background:url(./images/button.png) left top no-repeat;
}
a:hover,a:focus {
background-image: url(./images/button-over.png);
}
a:active {
background-image: url(./images/button-active.png);
}
</style>
</head>
<body>
<a href="#"></a>
<br>
<a href="#"></a>
</body>
</html>
Pixy样式翻转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像翻转</title>
<style>
/*通过改变对齐方式设置按钮背景*/
a:link,a:visited {
display: block;
width: 203px;
height: 72px;
text-indent: -1000em;
background:url(./images/buttons.png) -203px no-repeat;
}
a:hover,a:focus {
background-position: right top;
}
a:active {
background-position: left top;
}
</style>
</head>
<body>
<a href="#"></a>
<br>
<a href="#"></a>
<br>
<a href="#"></a>
</body>
</html>
CSS精灵
把许多图标包含到一个图像中减少服务器调用。