四，CSS样式设置
2020-12-14 本文已影响0人
好多可乐
一，背景样式
1，background-color：设置背景色
2，background-image：设置背景图片（跟图片位置）url("xxx")
3，background-repeat：设置背景图片的重复方向
属性值：
- repeat
- repeat-x
- repeat-y
- no-repeat
4，background-attachment：背景是否随滚动条滚动
属性值：
- scroll：图片不随文字一起滚动
- fixed：图片随文字滚动
5，background-position：背景图片的起始位置（属性值可以设置）
属性值有三种设置方法：
1，如果只规定了一个关键词，那么第二个值将是center；默认值：0%，0%；
top left，top center，top right；center left；center center；center right；
bottom left，bottom center，bottom right
2，x% ，y%
第一个值是水平位置，第二个值是垂直位置；
左上角是0%，0%，右上角是100%，100%；
如果仅规定了一个值，那么另一个值将是50%
3，xpos ypos
第一个值是水平位置，第二个值是垂直位置；
左上角是0 0，单位是像素（0px 0px）或任何其他的css单位；
如果仅规定了一个值，那么另一个值将是50%；
可以混合使用%和position值
6，background：背景样式的值是复合属性值组合（需要按照上面5个值依次进行设置）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-color: red;
background-image: url("image/3.jpg");
background-attachment: scroll;
background-repeat: no-repeat;
background-position: center center;
font-size: 40;
}
.p1{
font-family: 隶书;
}
</style>
</head>
<body>
<p>http://www.imooc.com</p>
<p class="p1">慕课网</p>
</body>
</html>
