3.CSS背景和列表

本文详细介绍了CSS中背景属性的使用方法,包括背景颜色、背景图片的设置及其重复、定位、显示方式等;同时讲解了列表样式的调整技巧,如列表项标记类型、位置及如何使用图片作为列表项标记。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、背景样式:

1.背景颜色:

设置元素的背景颜色:

background-color:颜色 | transparent

说明:

  • transparent:全透明黑色的速记法,相当于没有设置
  • 颜色值:颜色名,RGB,十六进制
  • 包括内容、内边距padding、边框、不包括外边距margin
  • 边框默认为文本颜色

2.背景图片:

background-image:URL | none
background- image:url(xxx/xxx.jpg)

说明:

  • url地址可以是相对也可以说是绝对的
  • 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
  • 背景图片默认为元素的左上角,并在水平和垂直方向上重复
  • 在设置边框时,也要设置样式:dashed 虚线 solid 直线
  • 同时设置背景图片和背景颜色时,背景图片覆盖背景颜色
    在这里插入图片描述

2.背景图片重复:

background-repeat:repeat | no-repeat | repeat-x | repeat-y

3.背景图片显示方式:

background-attachment:scroll | fixed

说明:
scroll:默认值,背景图片随滚动条滚动
fixed:当页面其余部分滚动时,背景图片不会滚动,固定显示在屏幕左上角(?)

4.背景图片定位:

background-position:百分比 |

top | right| bottom|left|center
在这里插入图片描述

5.列表样式:

在这里插入图片描述

6.背景缩写:

background:background-color ;background-image;background-position;background-repeat;background-attachment
各值之间用空格分隔,不分先后顺序。

background:#000000 url(xxx/xxx.jpg) no-repeat top left scroll;

二、列表样式:

1.列表项标记:

1.有序列表、无序列表:
list-style-type:关键字 | none

在这里插入图片描述

2.使用图片进行列表项标记:
3.列表标记位置:
list-style-position:inside | outside

inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside:默认值,列表项目标记放置在文本以外,且环绕文本不根据标记对齐。

4.列表样式缩写:

list-style:list-style-position;list-style-image ;list-style-type
说明

  • 值之间用空格分隔
  • 顺序不固定
  • image会覆盖掉type的样式
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值