- 链接伪类
- a:link{属性: 值;} a{属性:值;} 效果一样
-
- a:link{属性: 值} 链接的默认状态
- a:visited{属性: 值} 链接访问之后的状态
- a:hover{属性: 值} 鼠标放到链接上显示的状态
- a:active{属性: 值} 链接激活的状态(鼠标按下没有松开时显示的状态)
- :focus{属性: 值} 获取焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*默认的状态*/
a:link{
color: red; }
/*访问之后的状态*/
a:visited{
color: green;
}
/*鼠标放在链接上面的状态*/
a:hover{
color: yellow;
}
/*链接激活的状态*/
a:active{
color: orange;
}
</style>
</head>
<body>
<a href="#">AAAAA</a>
</body>
</html>
- 文本修饰 text-decoration: none | underline | line-through
- none 不要下划线
- underline 要下划线
- line-through 删除线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*默认的状态*/
a:link{
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">AAAAA</a>
</body>
</html>
- 背景属性
- background-color 背景颜色
- background-image 背景图片
- background-repeat 背景平铺 repeat | no-repeat | repeat-x | repeat-y
- background-position 背景定位 left | right | center | top | bottom
- 方位值只写一个的时候, 另外一个默认居中
- 写两个方位值的时候, 顺序没有要求
- 写两个具体值的时候, 第一个值代表水平方向, 第二个值代表垂直方向
- background-attachment 背景是否滚动 scroll | fixed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 500px;
background-color: #999;
background-image: url("1.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background: red url("1.jpg") no-repeat bottom scroll;
}
</style>
</head>
<body>
<div class="box">
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
<p>AAAAA</p>
</div>
</body>
</html>