8.前端小白之CSS背景和列表

背景和列表

css背景样式
background-color
background-image
background-position
background-attachment
background-repeat
background 简写，将背景属性设置在一个声明中

css列表样式
list-style-type
list-style-image
list-style-position
list-style 简写

背景包括content,padding,border,但没有margin
border如果不设置样式则不会显示背景。

div{
width:30px;
height:30px;
background-image:url(little.png);
padding:20px;
margin:20px;
border:10px dashed;
background-color:red;
}

当同时设置背景图片和背景颜色时显示的是背景图片
其实是先显示颜色，然后图片覆盖颜色

但有时重复的背景图片并不好看，设置元素的背景图片的重复方式：
background-repeat:repeat|no-repeat|repeat-x|repeat-y

背景图片显示方式

background-attachment: scroll | fixed
说明:
scroll:默认值，背景图片随滚动条滚动
fixed:当页面的其余部分滚动时，背景图片不会移动

背景图片定位
设置元素的背景图片的起始位置
background-position:
百分比│值 | top | right l bottom | left | center


背景缩写
background: [background-color] [background-image]
[background-repeat]
[background-attachment]
[background-position] []
说明
·各值之间用空格分割，不分先后顺序

div{
width:30px;
height:30px;
background:#000 url(little.png) no-repeat top fixed;
padding:20px;
margin:20px;
border:10px dashed;
}

可能存在图片不显示出来，因为这里fixed是相对整个网页来说的，top和fixed固定好了，没显示隐藏了，把width改100%试试看吧

列表项标记
设置列表项的标记样式类型
list-style-type:关键字|none

使用图片设置列表项的标记
list-style-image: url | none

ul li{
	list-style-image:url(1.jpg);
}

设置列表项标记的位置
list-style-position : inside | outside
inside :列表项目标记放置在文本以内，且环绕文本根据标记对齐

outside :默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

list-style:list-style-type list-style-position list-style-image
说明：
值之间用空格分开，
顺序不固定，
list-style-image会覆盖list-style-type的设置

ul li{
	list-style:url(1.jpg) square inside;
}

总结：

NEXT:
css盒子模型，页面布局