background-color | 设置元素的背景颜色 |
background-image | 把图像设置为背景 |
background-position | 设置背景图像的其实位置 |
background-attachment | 背景图像是否固定或者随着页面其余部分滚动 |
background-repeat | 设置背景图像是否重复以及如何重复 |
background |
列表样式:
list-style-type |
设置列表项标志的类型 |
list-style-image |
将图像设置为列表项标志 |
list-style-position |
设置列表中列表项标志的位置 |
list-style |
背景颜色:
background-color:颜色|transparent
- transparent是全透明黑色(black)的速记法,类似rgba(0,0,0,0)这样的值
- 颜色值(颜色名|rgb|十六进制)
- 背景区包括内容、内边距和边框、不包含外边距
border默认的颜色为文本的颜色
背景图片:
background-image:url | none
- url可以是相对地址也可以是绝对地址
- 元素的背景占据了元素的全部尺寸,包括内边距和边框,不包括外边距
- 默认的,背景图像位于元素的左上角,并在水平和垂直方向上重复。
元素背景图片的显示方式:
background-attachment:scroll |fixed
- scroll:默认值,背景图片随滚动条滚动
- fixed:当页面的其余部分滚动时,背景图片不会移动。
背景图片的起始位置:
background-position:百分比|值
top | right | bottom | left | center
background-position:50px 50px; background-position:10% 10%;
list-style-type |
设置列表项标志的类型 |
list-style-image |
将图像设置为列表项标志 |
list-style-position |
设置列表中列表项标志的位置 |
list-style |
列表样式:
背景颜色:
background-color:颜色|transparent
- transparent是全透明黑色(black)的速记法,类似rgba(0,0,0,0)这样的值
- 颜色值(颜色名|rgb|十六进制)
- 背景区包括内容、内边距和边框、不包含外边距
border默认的颜色为文本的颜色
背景图片:
background-image:url | none
- url可以是相对地址也可以是绝对地址
- 元素的背景占据了元素的全部尺寸,包括内边距和边框,不包括外边距
- 默认的,背景图像位于元素的左上角,并在水平和垂直方向上重复。
元素背景图片的显示方式:
background-attachment:scroll |fixed
- scroll:默认值,背景图片随滚动条滚动
- fixed:当页面的其余部分滚动时,背景图片不会移动。
背景图片的起始位置:
background-position:百分比|值
top | right | bottom | left | center
background-position:50px 50px; background-position:10% 10%;
background[
background-color |
列表样式:
list-style-type |
设置列表项标志的类型 |
list-style-image |
将图像设置为列表项标志 |
list-style-position |
设置列表中列表项标志的位置 |
list-style |
背景颜色:
background-color:颜色|transparent
- transparent是全透明黑色(black)的速记法,类似rgba(0,0,0,0)这样的值
- 颜色值(颜色名|rgb|十六进制)
- 背景区包括内容、内边距和边框、不包含外边距
border默认的颜色为文本的颜色
背景图片:
background-image:url | none
- url可以是相对地址也可以是绝对地址
- 元素的背景占据了元素的全部尺寸,包括内边距和边框,不包括外边距
- 默认的,背景图像位于元素的左上角,并在水平和垂直方向上重复。
元素背景图片的显示方式:
background-attachment:scroll |fixed
- scroll:默认值,背景图片随滚动条滚动
- fixed:当页面的其余部分滚动时,背景图片不会移动。
背景图片的起始位置:
background-position:百分比|值
top | right | bottom | left | center
background-position:50px 50px; background-position:10% 10%;
background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position] []
各值之间用空格分割,部分先后顺序
background: #000 url() no-repeat top fixed;
列表样式:
list-style-type:关键字 | none
无序列表:
none | 无标记 |
disc | 实心的圆点 |
circle | 空心的圆点 |
square | 实心的方块 |
有序列表:
none | 无标记 |
decimal | 从1开始的整数 |
lower-roman | 小写罗马数字 |
upper-roman | 大写罗马数字 |
lower-alpha | 小写英文字母 |
upper-alpha | 大写英文字母 |
//无序列表
<style>
ul li{
list-style-type: circle;
}
</style>
</head>
<body>
<ul>
<li>家用电器</li>
<li>电脑</li>
<li>手机</li>
</ul>
</body>
//有序列表
<style>
ul li{
list-style-type: decimal;
}
</style>
</head>
<body>
<ul>
<li>家用电器</li>
<li>电脑</li>
<li>手机</li>
</ul>
使用图片设置列表项的标记:
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的设置