css_bg_list

[253867843]

CSS背景和列表

CSS背景样式

• background-color: 设置元素的背景颜色
• background-image: 把图像设置成背景
• background-position: 设置背景图像的起始位置
• background-attachment: 设置背景图像是否固定或随页面滚动
• background-repeat: 设置背景图像是否重复及如何重复
• background: 简写属性

CSS列表样式

• list-style-type: 设置列表项标志类型
• list-style-image: 将图像设置成列表项标志
• list-style-position: 设置列表项位置
• list-style: 简写属性

2-1.background-color

• 设置元素的背景颜色

background-color: 颜色 | transparent

(1)默认值: transparent
(2)颜色 === 颜色名/rgb/十六进制
(3)背景区包括padding, border, 但不包括margin

设置背景颜色为红色: 
background-color: red;
background-color: #ff0000;
background-color: rgb(255,0,0);

• border --- 如果不设置边框border的颜色, 边框border的颜色默认 === 字体的颜色

2-4.background-image

• 把图像设置成背景

background-image: url | none;

(1)默认值: none
(2)url可以是绝对地址, 也可以是相对地址
(3)元素的背景占据了元素的全部尺寸, 包括padding, border, 但不包括margin
(4)默认地, 背景图像位于元素的左上角, 并在水平和垂直方向上重复. 

• 如果同时设置了background-color和background-image, 那么background-image会覆盖background-color
• 两者都设置, 为了在background-image没有加载时, 此时可以显示背景颜色.

2-7.background-repeat

• 设置背景图像的是否重复及重复方式

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

(1)默认值: repeat
(2)no-repeat: 背景图像不重复
   repeat: 背景图像水平方向和垂直方向上重复
   repeat-x: 背景图像水平方向上重复
   repeat-y: 背景图像垂直方向上重复
(3)只有在设置了background-image时, 才会生效

2-8.background-attachment

• 设置背景图像是否固定或随页面滚动

background-attachment: scroll | fixed

(1)默认值: scroll
(2)scroll: 背景图片随滚动条滚动而滚动.
   fixed: 当页面其他部分滚动时, 背景图像不会移动

2-12.background-position

• 设置背景图像的起始位置

background-position: 百分比 | 值
              top | right | bottom | left | center

(1)默认值: 左上角
(2)只写一个参数的话, 第二个默认为居中(水平居中/垂直居中)
(3)top: 顶部显示, 垂直方向0%, 水平居中
(4)bottom: 底部显示, 垂直方向100%, 水平居中
(5)left: 左侧显示, 水平方向0%, 垂直居中
(6)right: 右侧显示, 水平方向100%, 垂直居中

• 如果不显示, 可能是由于background-position针对整个网页的

2-16.background简写属性

• 简写属性

background: [background-color] [background-image]
            [background-repeat] [background-attachment]
            [background-position]
 
(1)各值之间用空格隔开, 不分先后顺序

3-1.list-style-type

• 设置列表项标志类型

list-style-type: 关键字 | none;

(1)默认值:
    a.无序列表默认值: disc
    b.有序列表默认值: decimal
(2)无序列表:
    none: 无标记
    disc: 实心圆
    circle: 空心圆
    square: 实心方块
(3)有序列表:
    none: 无标记
    decimal: 从1开始整数
    lower-roman: 小写罗马字母
    upper-roman: 大写罗马字母
    lower-alpha: 小写英文字母
    upper-alpha: 大写英文字母

3-4.list-style-image

• 将图像设置成列表项标志

list-style-image: url | none;

(1)默认值: none;
(2)url: 图像的路径

3-6.list-style-position

• 设置列表项位置

list-style-position: inside | outside

(1)默认值: outside
(2)outside: 文本不环绕标志
   inside: 文本环绕标志

3-9.list-style简写属性

• 简写属性

list-style: [list-style-type] [list-style-image]
            [list-style-position]

(1)各值之间用逗号隔开, 不分先后顺序
(2)list-style-image会覆盖list-style-type

4-1.课程总结

• background-color和background-image不包含margin