您的位置: 首页  >  文章  >  二.4 页面化妆师CSS之CSS背景和列表

二.4 页面化妆师CSS之CSS背景和列表

分类: 文章 • 2023-11-04 14:42:34

1.CSS背景样式

1.1背景样式

  • background-color                                   设置元素的背景颜色。
  • background-image                                 把图像设置为背景。
  • background-position                              设置背景图像的起始位置。
  • background-attachment                         背景图像是否固定或者随着页面的其余部分滚动。
  • background-repeat                                设置背景图像是否重复及如何重复。
  • background                                            简写属性，作用是将背景属性设置在一个声明中。

1.2设置元素的背景颜色：background-color

  • 设置元素的背景颜色：background-color：颜色 | transparent
  • 说明
    • transparent是全透明黑色（black）的速记法，类似rgba(0,0,0,0)这样的值。
    • 颜色值（颜色名 | RGB | 十六进制|）
    • 背景区包括内容、内边距（padding）和边框、不包含外边距（margin）
  • 属性值：
    1. color_name：规定颜色值为颜色名称的背景颜色（比如red）。
    2. hex_number：规定颜色值为十六进制的背景颜色（比如#ff0000）。
    3. rgb_number：规定颜色值为rgb代码的背景颜色（比如rgb(255,0,0)）。
    4. transparent（默认值）：背景颜色为透明。
    5. inherit：规定应该从父元素继承 background-color 属性的设置。

1.3 设置元素的背景图片：background-image

  • 设置元素的背景图片：background-image：URL| none
  • 属性值：
    1. url('URL')：指向图像的路径。
    2. none（默认值）：不显示背景图像。
    3. inherit：规定应该从父元素继承 background-image属性的设置。
  • 说明
    • url地址可是相对地址也可以是绝对地址
    • 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包含外边距。
    • 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复

1.4背景和背景图片二.4 页面化妆师CSS之CSS背景和列表

1.4背景图片重复：background-repeat

  • 设置元素的背景图片的重复方式：background-repeat：repeat| no-repeat | repeat-x| repeat-y
    • background-repeat
      1. repeat：默认值，背景图片水平方向和垂直方向重复
      2. repeat-x：背景图片水平方向重复
      3. repeat-y：背景图片垂直方向重复
      4. no-repeat：背景图片不重复
      5. inherit：规定应该从父元素继承 background-repeat属性的设置。

1.5属性设置背景图像是否固定或者随着页面的其余部分滚动：background-attachment

  • 属性值：
    1. ​​​​​​​​​​​​​​scroll（默认值）：背景图像会随着页面其余部分的滚动而移动
    2. fixed：当页面的其余部分滚动时，背景图像不会移动。
    3. inherit：规定应该从父元素继承 background-attachment属性的设置。

1.6背景图片定位：background-position

  • 设置元素的背景图片的起始位置：background-position：百分比 | 值 | top | right | bottom | left | center
    • background-position：
      二.4 页面化妆师CSS之CSS背景和列表二.4 页面化妆师CSS之CSS背景和列表
  • 背景缩写：background：
    [background-color] [background-image] 
    [background-repeat] [background-attachment] [background-position] []
    • 说明：各值之间用空格分隔，不分先后顺序

2.CSS列表样式

2.1列表样式

  • list-style-type                                          设置列表项标志的类型
  • list-style-image                                       将图像设置为列表项标志。
  • list-style-position                                    设置列表中列表项标志的位置。
  • list-style                                                  简写属性，用于把所有列表的属性设置于一个声明中

2.2列表项标记

  • 设置列表项的标记样式类型   list-style-type：关键字 | none
    1. none：无标记。
    2. disc（默认值）：标记是实心圆。
    3. cirle：标记是空心圆
    4. square：标记的是实心方块
    5. decimal：表示数字。
    6. lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
    7. upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
    8. lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
    9. upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
  • 使用图片设置列表项的标记   list-style-image：URL | none
    1. URL：图像的路径。
    2. none（默认值）：无图形被显示
    3. inherit：规定应该从父元素继承 list-style-image属性的设置。
  • 设置列表项标记的位置          list-style-position：inside | outside
    1. inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
    2. outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐
    3. inherit：规定应该从父元素继承 list-style-position属性的设置。
  • 列表样式缩写
    • list-style：list-style-type
                       list-style-image
                       list-style-position
    • 说明：
      • 值之间用空格分隔
      • 顺序不固定
      • list-style-image 会覆盖 list-style-type的设置

3.代码示例

相关推荐