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：默认值，列表项目标记放置在文本外，且环绕文本不根据标记对齐

前端基础夯实--（CSS系列）CSS背景和列表