css--背景和列表
背景
背景样式：
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）
<!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;} </style> </head> <body> <p class="d1">CSS背景和列表</p> </body> </html>
上面代码我们给设置了一个红色的背景色
我们给加上边距padding，发现变成了220*220的背景
<!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{padding: 10px} </style> </head> <body> <p class="d1">CSS背景和列表</p> </body> </html>
我们在给加上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，这样我们就能看出效果了
<!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 dashed} </style> </head> <body> <p class="d1">CSS背景和列表</p> </body> </html>
我们在给加上外边距margin
<!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{margin: 10px} </style> </head> <body> <p class="d1">CSS背景和列表</p> </body> </html>
刷新发现背景大小还是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
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> li {list-style-type: none} </style> </head> <body> <ul> <li>测试</li> <li>开发</li> <li>产品</li> </ul> </body> </html>
还有其他的样式，如下图，大家可以自己去尝试
无序列表
有序列表
使用图片设置列表项的标记
有时候我们想在列表的前面显示一些小图标，这样上面的方法就不能满足我们的需求了，我们就要用到list-style-image了，比如我们想要达到下面的效果
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> li {list-style-image:url("remind.png")} </style> </head> <body> <ul> <li>测试</li> <li>开发</li> <li>产品</li> </ul> </body> </html>
列表项标记位置
设置列表项的标记位置
list-style-position:inside | outside
inside:列表项 目标记放置在文本以内，且环绕文本根据标记对齐
outside：默认值，列表项目标记放在文本以外，且环绕文本不根据标记对齐
好吧，我知道你没有看懂，直接看效果吧
使用inside的效果
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> li {list-style-position: inside; list-style-image: url("remind.png")} </style> </head> <body> <ul> <li>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</li> <li>开发</li> <li>产品</li> </ul> </body> </html>
使用outside的效果
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> li {list-style-position: outside; list-style-image: url("remind.png")} </style> </head> <body> <ul> <li>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</li> <li>开发</li> <li>产品</li> </ul> </body> </html>
list-style
简写方式，看下图，懒的敲代码。。。
