css背景和列表样式

背景样式

background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-attachment 背景图像是否固定或随着页面其余部分滚动
background-repeat 设置背景图像是否重复及如何重复
background 简写属性，作用是将背景属性设置在一个声明中

background-color

设置元素的背景颜色
background-color：颜色 | transparent
说明：

• transparent是全透明黑色，相当于透明色
• 颜色值（颜色名 | RGB | 十六进制）
• 背景区包括内容、内边距和边框、不包含外边距

background-image 把图像设置为背景

设置元素的背景图片
background-image：URL | none
说明：

• url地址可以是相对地址也可以是绝对地址
• 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
• 默认的，背景图像位于元素的左上角，并在水平和垂直方向上重复

background-position 设置背景图像的起始位置

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

值	说明
长度值	第一个水平位置，第二个垂直位置（若只写一个参数，第二个参数默认居中）
百分比	第一个水平位置百分比，第二个值垂直位置百分比（若只规定一个值，第二个值为50%）
top	顶部显示，相当于垂直方向0（若只写一个参数，第二个参数默认居中）
right	右部显示，相当于水平方向100%（若只写一个参数，第二个参数默认居中）
left	左部显示，相当于水平方向0（若只写一个参数，第二个参数默认居中）
bottom	底部显示，相当于垂直方向100%（若只写一个参数，第二个参数默认居中）

| center | 居中显示，相当于水平方向50%或垂直方向50% |

background-attachment 背景图像是否固定或随着页面其余部分滚动

设置元素的显示方式
background-attachment：scroll | fixed
说明：

• scroll ：默认值，背景图片随滚动条滚动
• fixed ：当页面的其余部分滚动式，背景图片不会移动

background-repeat 设置背景图像是否重复及如何重复

设置元素的背景图片的重复方式
background-repeat：repeat | no-repaet
repeat-x | repeat-y

background 简写属性，作用是将背景属性设置在一个声明中

设置元素的显示方式
backgroundt：【background-color】
【background-image】
【background-repeat】
【background-attachment】
【background-position】
说明：

• 各值之间用空格分割，不分先后顺序
• fixed ：当页面的其余部分滚动式，背景图片不会移动
  例：
  background：#000000 url(img/image.jpg) no-repeat right fixed;

列表样式

list-style-type 设置列表项标志的类型
list-style-image 将图像设置为列表项标志
list-style-position 设置列表中列表项标志的位置
list-style 简写属性，用于把所有列表的属性设置于同一个声明中

list-style-type 设置列表项标志的类型

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

无序列表

值	说明
none	无标记
disc	实心的圆点
circle	空心的圆点
square	实心的方块

有序列表

值	说明
none	无标记
discimal	从1开始的整数
lower-roman	小写的罗马数字
upper-roman	大写的罗马数字
lower-alpha	小写的英文字母
upper-alpha	大写的英文字母

list-style-image 将图像设置为列表项标志

使用图片设置列表项的标记
list-style-image：url | none
例：
list-style-image:url(img/image.jpg);

list-style-position 设置列表中列表项标志的位置

设置列表项标记的位置
list-style-position：inside | outside
说明：

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

list-style 简写属性，用于把所有列表的属性设置于同一个声明中

设置列表项的标记样式类型
list-style：list-style-type
list-style-position
list-stylr-image
说明：

• 值之间用空格分割
• 顺序不固定
• list-style-iamge会覆盖list-style-type的设置
  例：
  list-style：url(img/image.jpg) inside square;