CSS基础知识点--背景和列表

背景样式

  • 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的设置

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。