css背景和列表

主要内容

1.背景样式

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

 

2.列表样式

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

 

一、背景样式

• 设置元素的背景颜色
• 设置元素的背景图片

 

1.背景颜色

设置元素的背景颜色

background-color:颜色| transparent      transparent，为默认值

说明

transparent是全透明黑色(black)的速记法，类似rgba(0,0,0,0)这样的值。

颜色值(颜色名|RGB|十六进制|)

背景区包括内容、内边距(padding) 和边框、不包含外边距(margin)

 

2.背景图片

①设置元素的背景图片

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

 

值	说明	注意
长度值(xy)	第一个值水平位置，第二个值垂直位置 左上角00	只写一个参数的话，第二个默认为居中
百分比(x% y%)	第一个值水平位的百分比，第二个值垂直位置的百分比 左上角0% 0%，有下角100% 100%， 如果仅规定了一个值，另一个值将是50%。	只写一个参数的话，第二个认为居中
top	顶部显示，相当于垂直方向0	只写一个参数的话，第二个默认为居中
right	右边显示，相当于水平方向100%	只写一个参数的话，第二个默认为居中
Left	左边显示，相当于水平方向0	只写一个参数的话，第二个默认为居中
bottom	底部显示，相当于垂直方向100%	只写一个参数的话，第二个默认为居中
center	居中显示，相当于水平方向50% 居中显示，相当于垂直方向50%	水平、垂直方向都居中

 

 

3.背景缩写

background: [background-color] [background-image][background-repeat]

[background-attachment][background-position] []

说明

各值之间用空格分割，不分先后顺序

 

二、列表项标记

设置列表项的标记样式类型

list-style-type :关键字| none

 

1.无序列表

值	说明
none	无标记
disc	实心的圆点
circle	空心的圆点
square	实心的方块

 

2.有序列表

值	说明
none	无标记
decimal	从1开始的整数
lower-roman	小写罗马数字
upper-roman	大写罗马数字
lower-alpha	小写英文字母
upper-alpha	大写英文字母

 

3.列表项标记

使用图片设置列表项的标记

list-style-image : URL| none

 

4.设置列表项标记的位置

list-style-position : inside| outside

inside :列表项目标记放置在文本以内，且环绕文本根据标记对齐

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

 

5.列表样式缩写

list-style : list-style-type           list-style-position    list-style-image

说明

• 值之间用空格分隔割
• 顺序不固定
• list-style-image会覆盖list-style-type的设置