css3 背景和列表

307 阅读2分钟

背景和列表

背景样式

背景颜色

语法: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的设置