超链接a常用的样式控制包括超链接伪类和CSS鼠标样式。
1. 超链接伪类
A. 超链接伪类可以定义链接在不同时期的样式,使用方法为:
选择器:link{CSS样式},元素未访问时的样式
选择器:visited{CSS样式},元素访问后的样式
选择器:hover{CSS样式},鼠标经过元素的样式
选择器:actived{CSS样式},鼠标点击激活时的样子(瞬间)
e.g. <head>
<title>超链接伪类</title>
<style type="text/css">
#div1 {
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid #CCCCCC;
text-align: center;
}
a {
text-decoration: none;
font-size: 18px;
}
#x:link {
color: red
}
#x:visited {
color: purple;
}
#x:hover {
color: yellow;
text-decoration: underline;
}
#x:active {
color: green;
}
</style>
</head>
<body>
<div id="div1">
<a id="x" href="http://www.baidu.com">百度一下</a>
</div>
</body>
B. 一般情况下,超链接只需要设置为访问时和鼠标经过时的状态就行,而未访问时的样式可以直接对标签a设置样式,所以超链接伪类一般只用到hover。
e.g. <head>
<title>超链接伪类</title>
<style type="text/css">
#div1 {
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid #CCCCCC;
text-align: center;
}
/*text-decoration:none可以取消a标签自带的下划线样式*/
a {
text-decoration: none;
color: purple
}
a:hover {
color: white
}
</style>
</head>
<body>
<div id="div1">
<a href="http://www.baidu.com">百度一下</a>
</div>
</body>
2. hover伪类
A. hover不仅仅适用于标签a,它可以用在任意元素,即”元素:hover{样式}“