背景
背景样式：
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-repeat 设置背景图像是否重复及如何重复
background-attachment 背景图像是否固定或者随着 页面的其余部分 滚动
background-position 设置背景图像的起始位置
background 简写属性，作用是将背景属性设置在一个声明中
background-color
设置元素的背景颜色
background-color:颜色 | transparent
说明：
transparents是全透明黑色的速记法，类似rgba(0,0,0,0)这样的值
颜色值：（颜色名 | RGB | 十六进制）
背景区包括内容，内边距（padding）和边框，不包含外边距（margin）
View Code
上面代码我们给设置了一个红色的背景色
我们给加上边距padding，发现变成了220*220的背景
View Code
我们在给加上5px的边框，实线
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> p{height: 200px;width: 200px;background-color: red;} p{border: 5px solid} </style> </head> <body> <p class="d1">CSS背景和列表</p> </body> </html>
刷新代码我们发现，背景色还是200*200，这是因为边框的背景色默认为内容的颜色，因为内容的颜色是黑色，所以边框的背景将我们设置的红色背景覆盖了，我们可以将solid换成虚线dashed，这样我们就能看出效果了
View Code
我们在给加上外边距margin
View Code
刷新发现背景大小还是200*200，所以印证了背景区包括内容，内边距（padding）和边框，不包含外边距（margin）
background-image
设置元素的背景图片
background-image:URL | none
说明：
URL地址可以是相对地址也可以是绝对地址
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
默认的，背景图像位于元素的左上角，并在水平和垂直方向上重复（比如图片的大小为25*25，我们设置的背景图片的大小为100*100，这样的话，图片会显示16张，重复显示）
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> p{width: 300px;height: 300px; background-image: url("bg.png")} </style> </head> <body> <p class="d1"></p> </body> </html>
background-repeat
设置背景图像是否重复及如何重复
上面我们设置的图片重复显示了，但是大多数情况下，我们不想让图片重复显示，这时就要用到background-repeat了
语法：
background-repeat:repeat | no-repeat | repeat-x | repeat-y
repeat 默认值，背景图片水平方向和垂直方向重复
no-repeat 背景图片不重复
repeat-x 背景图片水平方向重复
repeat-y 背景图片垂直方向重复
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> p{ width: 200px;height: 200px;border: 1px solid red; background-image: url("bg-little.png"); background-repeat: repeat-x; } </style> </head> <body> <p class="d1"></p> </body> </html>
background-attachment
设置元素的背景图片的显示方式
background-attachment:scroll | fixed
说明：
scroll 默认值，背景图片随滚动条滚动
fixed 当页面的其余部分滚动时，背景图片不会移动
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> p{ width: 200px;height: 2000px;border: 1px solid red; background-image: url("bg-little.png"); background-repeat: no-repeat; background-attachment:fixed; } </style> </head> <body> <p class="d1"></p> </body> </html>
background-position
设置元素的背景图片的起始位置
background-position：百分比 | 值 或者 top | right | left | bottom | center
背景缩写
如果我们想加上背景图片，固定，不重复等等，那我们可以简写
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> p{ width: 100%;height: 1000px;border: 1px solid red; background: url("bg-little.png") no-repeat fixed} </style> </head> <body> <p class="d1"></p> </body> </html>
各值之间用空格分割，不分先后顺序
CSS列表样式
list-style-type 设置列表项标志的类型
list-style-image 将图像设置为列表项标志
list-style-position 设置列表中列表项 标志的位置
list-style 简写属性，用于把所有列表的属性设置在一个声明中
list-style-type
设置列表项的标记样式类型
list-style-type：关键字 | none
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> </style> </head> <body> <ul> <li>测试</li> <li>开发</li> <li>产品</li> </ul> </body> </html>
我们打开上面的网页，发现li标签有默认样式小圆点，但我们有时候不需要这些样式或者想换个样式，这时候就要用到list-style-type了
去掉默认的样式，将list-style-type设置为none
点我
还有其他的样式，如下图，大家可以自己去尝试
无序列表
有序列表
使用图片设置列表项的标记
有时候我们想在列表的前面显示一些小图标，这样上面的方法就不能满足我们的需求了，我们就要用到list-style-image了，比如我们想要达到下面的效果
点我
列表项标记位置
设置列表项的标记位置
list-style-position:inside | outside
inside:列表项 目标记放置在文本以内，且环绕文本根据标记对齐
outside：默认值，列表项目标记放在文本以外，且环绕文本不根据标记对齐
好吧，我知道你没有看懂，直接看效果吧
使用inside的效果
点我偷看
使用outside的效果
点我偷看
list-style
简写方式，看下图，懒的敲代码。。。
