1、背景样式
2、列表样式
3、背景样式详解
3.1、背景颜色
1、上面的这个transparent有什么作用?主要是transparent是你希望某个元素没有背景颜色,但是同时又希望用户对浏览器颜色的设置不会影响到你的设置,那么transparent就是有用的。
2、背景包括内边距padding,也就是会背景颜色会去填充内边距。同时整个div的大小也会变化:比如说下面这段代码:给div设置了10像素的内边距,div实际已经变成了320px。但是设置外边距就没有任何变化,div依旧是300px,所以外填充不包含在背景中。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
div{
width:300px;
height:300px;
background-color:rgb(255,0,0);
padding:10px;
/*margin:10px*/
}
</style>
</head>
<body>
<div>
background-color
</div>
</body>
</html>
3、边框也是包含在背景填充当中的,只不过没有给边框设置颜色的时候,边框的颜色默认和元素内的文本颜色是一致的。这种颜色会覆盖背景颜色,下面我们将边框设置成为虚线来看看。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
div{
font-color:green;
width:300px;
height:300px;
background-color:rgb(255,0,0);
padding:10px;
border:20px dashed;/* solid是边框直线,dashed是边框虚线*/
}
</style>
</head>
<body>
<div>
background-color
</div>
</body>
</html>
然后我们看一下效果:
3.2、背景图片
1、我们使用的时候代码如下:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
div{
font-color:green;
width:500px;
height:500px;
padding:10px;
background-image:url(9FEOYL]2XUOR6_VV_LUUOCR.png);
}
</style>
</head>
<body>
<div>
background-color
</div>
</body>
</html>
2、同时设置了背景颜色和背景图片,谁会起作用,这里是这样的,两者都是存在有效果的,只不过背景图片覆盖了背景颜色,所以显示的是背景图片,但是在实际开发当中,我们是同时设置的,防止背景图片出问题,那就显示背景颜色。
3.3如何处理图片重复的问题
1、上一小结我们说了,默认的图片会从左上角开始,在水平和垂直方向重复,但是这样肯定不好看,现在我们在背景样式中有个参数,叫做:background-repeat:
background-repeat:repeat(重复) | no-repeat(不重复) | repeat-x(水平重复) | repeat-y(垂直重复)
2、最后注意就是这个属性是只有背景图片存在的时候才会起作用。
3.4背景图片显示方式
1、设置元素的背景图片的显示方式:
background-attachment:scroll |fixed
scroll;默认值,背景图片随着滚动条滚动
fixed:当页面的其余部分滚动时,背景图片不会移动
3.5、背景图片定位
1、设置元素的背景图片的起始位置:
background-position:百分比 | 值 | top | right | bottom | left | center
4、背景的最后一个属性
1、也就是下面这样的代码方式:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
div{
font-color:green;
width:100%;
height:1500px;
padding:10px;
background:url(9FEOYL]2XUOR6_VV_LUUOCR.png) #000000 no-repeat right fixed;
}
</style>
</head>
<body>
<div>
background-color
</div>
</body>
</html>
5、列表样式
5.1列表项的标记样式类型
1、设置列表项的标记样式类型:list-style-type
list-style-type:关键字 | none
2、代码书写规则:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
ul li{
/*无序*/
/*list-style-type:circle;*/
/*有序*/
/*list-style-type:lowe-roman;*/
list-style-type:upper-alpha;
}
</style>
</head>
<body>
<ul>
<li>家用电器</li>
<li>手机</li>
<li>电脑</li>
</ul>
</body>
</html>
3、使用图片设置列表项的标记:
list-style-image:URL | none
可以这样写 :
ul li{ list-style-image:url(图片的位置);}
5.2列表项标记位置
1、设置列表项的标记位置:
list-style-position:inside | outside
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐
outside:默认值,列表项目标记放置在文本外,且环绕文本不根据标记对齐