背景和列表
背景样式
背景颜色
语法:background-color:颜色|transparent
说明:
- transparent是全透明黑色(black)的速记法,类似rgba(0,0,0)这样的值
- 颜色值(颜色名|RGB|十六进制)(最常用,兼容性最好)
- 背景区包括内容、内边框(padding)和边框(border),不包含外边距(margin)
背景图片
语法:background: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
说明:所输入数值为距左边框和距上边框距离,先左右后上下


背景缩写
背景缩写
语法:
[background:[background-color]
[background-image]
[background-attachment]
[background-repeat]
[background-position]
说明:各值之间用空格分隔,不分先后顺序
列表样式
列表样式类型
语法:list-style-type:关键字 | none
无序列表
| 关键字 | 说明 |
|---|---|
| none | 无标记 |
| disc | 实心的圆点(默认) |
| circle | 空心的圆点 |
| square | 实心的方块 |
有序列表
| 关键字 | 说明 |
|---|---|
| none | 无标记 |
| decimal | 从1开始的整数 |
| lower-roman | 小写的罗马数字 |
| upper-roman | 大写的罗马数字 |
| lower-alpha | 小写的英文字母 |
| upper-alpha | 大写的英文字母 |
列表项标记
使用图片设置列表项的标记
语法:list-style-type: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的设置