背景样式
background-color:设置元素的背景颜色
background-image:把图像设置为背景
background-position:设置背景图像的起始位置
background-attachment:背景图像是否固定或者随着页面的其余部分滚动
background-repeat:设置背景图像是否重复及如何重复
background:简写属性。作用是将背景属性设置于一个声明
背景颜色
设置元素的背景颜色
background-color:颜色 | transparent
说明:
transparent是全透明黑色(black)的速记法,类似rgba(0, 0, 0, 0)这样的值。
颜色值(颜色名 | RGB | 十六进制)
背景区包括内容、内边距(padding)和边框、不包括外边距(margin)
背景图片
设置元素的背景图片
background-image:URL | none
说明:
url地址可以是相对地址也可以是绝对地址
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复
背景图片重复
设置元素的背景图片的重复方式
background-repeat:repeat | no-repeat | repeat-x | repeat-y
背景图片显示方式
设置元素的背景图片的显示方式
background-attachment:scroll | fixed
说明:
scroll:默认值,背景图片随滚动条滚动
fixed:当页面的其余部分滚动时,背景图片不会移动
背景图片定位
设置元素的背景图片的初始位置
background-position:百分比 | 值 | top | right | bottom | left | center
值 | 说明 | 注意 |
---|---|---|
长度值(x y) | 第一个值水平位置,第二个值垂直位置 | 只写一个参数的话,第二个默认为居中 |
百分比(x% y%) | 第一个时水平位置的百分比,第二个值垂直位置的百分比 | 只写一个参数的话,第二个默认为居中 |
top | 顶部显示,相当于垂直方向0 | 只写一个参数的话,第二个默认为居中 |
right | 右边显示,相当于水平方向100% | 只写一个参数的话,第二个默认为居中 |
left | 左边显示,相当于水平方向0 | 只写一个参数的话,第二个默认为居中 |
bottom | 底边显示,相当于垂直方向100% | 只写一个参数的话,第二个默认为居中 |
center | 居中显示,相当于水平方向50%或者垂直方向50% | 水平、垂直方向都居中 |
背景缩写
background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
说明:
- 各值之间用空格分割,不分先后顺序
列表样式
list-style-type:设置列表项标志的类型
list-style-image:将图像设置为列表项标志
list-style-position:设置列表中列表项标志的位置
list-style:简写属性。用于把所有列表的属性设置于一个声明
列表项标记
设置列表项的标记样式类型
list-style-type:关键字 | none
无序列表
值 | 说明 |
---|---|
none | 无标记 |
disc | 实心的圆点 |
circle | 空心的圆点 |
square | 实心的方块 |
有序列表
值 | 说明 |
---|---|
none | 无标记 |
decimal | 从1开始的整数 |
lower-roman | 小写罗马数字 |
upper-roman | 大写罗马数字 |
lower-alpha | 小写英文字母 |
upper-alpha | 大写英文字母 |
使用图片设置列表项的标记
list-style-image:URL | none
列表项标记位置
设置列表项标记的位置
list-style-position:inside | outside
说明:
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐
outside:默认值,列表项目标记放置在文本以外,且环绕文本不根据标记对齐
列表样式缩写
list-style:list-style-type list-style-position list-style-image
说明:
值之间用空格分隔
顺序不固定
list-style-image会覆盖list-style-type的设置