CSS入门篇（第四篇，背景与列表）

前言

前面我们说过了CSS的盒子模型。本篇的内容主要讲述背景样式和列表样式。后续还会有JS 的篇章。

1. 背景样式

背景样式的数属性：

属性名	简述	值
background-color	背景颜色	RGB，颜色英文名称，十六进制，RGBA，默认值（transparent）
background-image	背景图片	URL，none
background-repeat	背景图片重复	repeat重复，no-repeat不重复，repeat-x水平重复，repeat-y纯值重复，inherit继承
background-attachment	背景图片显示方式	scoll（默认）背景图片随滚动条滚动，fixed当页面的其余部分滚动时，背景图片不会移动
background-position	背景图片的定位	百分比，值，top，right，bottom，left，center
background	背景缩写

1.1background-color|背景颜色

我们测试一下RGB和RGBA的效果：
为了更好的看出两个效果的不同，我们给

background-color:#f00; 

<div style="background-color:#00f; width:100px; height:100px;" >
	<div style="background-color:#f00;  width:10px; height:10px;">
	</div>
	<div style="background-color:#f005;  width:10px; height:10px;">
	</div>
</div>

效果：

高宽100px背景为蓝色的div
嵌套两个高宽10px背景为红色的div。
注：背景包括内容，内边距和边框，不包含外边距。
我们来看一下RGB和RGBA的不同

RGB值得写法：
#fff

1. #后边有三个值，它们的取值范围0-9加上a-t。
2. 三个值分别代表 #红绿蓝，三色。

RGBA值得写法：
#ffff
3. #后边有四个值，它们的取值范围0-9加上a-t。
4. 前三个值分别代表 #红绿蓝，三色。最后一个是透明底。

1.2 background-image|背景图片

注：背景包括内容，内边距和边框，不包含外边距。默认，背景图片位于元素的左上角，并在水平和垂直方向上重复。

background-image:url（https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554099573&di=ea4bf33ef492285c2acb5dbc1e5d35c1&imgtype=jpg&er=1&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg）; 

<div style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554099573&di=ea4bf33ef492285c2acb5dbc1e5d35c1&imgtype=jpg&er=1&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg); width:600px; height:600px;" >
</div>

高宽3000px背景为图片的的div
效果：

背景图片位于元素的左上角，并在水平和垂直方向上重复。意思就是水平垂直平铺效果。
== 同时设置了本经颜色和背景图片，会显示背景图片。==

1.3 background-repeat|背景图片重复

值	意
repeat	重复
no-repeat	不重复
repeat-x	水平重复
repeat-y	纯值重复
inherit	继承

<div style="background-repeat:repeat;  background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554099573&di=ea4bf33ef492285c2acb5dbc1e5d35c1&imgtype=jpg&er=1&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg); width:1200px; height:1200px; border:10px solid #f00;  display:inline-block;" >
</div>
<div style=" background-repeat:no-repeat;  background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554099573&di=ea4bf33ef492285c2acb5dbc1e5d35c1&imgtype=jpg&er=1&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg); width:1200px; height:1200px; border:10px solid #f00; display:inline-block; " >
</div>
<div style="background-repeat:repeat-x;  background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554099573&di=ea4bf33ef492285c2acb5dbc1e5d35c1&imgtype=jpg&er=1&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg); width:1200px; height:1200px; border:10px solid #f00; display:inline-block;" >
</div>
<div style=" background-repeat:repeat-y;  background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554099573&di=ea4bf33ef492285c2acb5dbc1e5d35c1&imgtype=jpg&er=1&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg); width:1200px; height:1200px; border:10px solid #f00; display:inline-block;" >
</div>

效果：

1.4 background-attachment|背景图片显示方式

值	意
scoll	（默认）背景图片随滚动条滚动
fixed	当页面的其余部分滚动时，背景图片不会移动

1.5 background-position|背景图片的定位

值	意	注意
百分比	%	只写一个参数的话，第二个默认居中
值	px	只写一个参数的话，第二个默认居中
top	顶部	只写一个参数的话，第二个默认居中
right	右	只写一个参数的话，第二个默认居中
bottom	底部	只写一个参数的话，第二个默认居中
left	左	只写一个参数的话，第二个默认居中
center	中间	水平纯值居中

background-position:值1 值2; 
background-position:值; 

1.5 background|背景缩写

注：各值之间用空格分隔，不分先后顺序。

2.列表样式

属性名	简述	值
list-style-type	列表项标记	后边说明
list-style-image	列表图片标记	none，url
list-style-position	列表项标记位置	inside，outside
list-style	列表样式缩写

2.1 list-style-type|列表项标记

无需列表

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

有序列表

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

更多

2.2 list-style-image|列表图片标记

list-style-image:url();

2.3 list-style-position|列表项标记位置

值	意
inside	列表项目标记放置在为本以内，且环绕文本根据标记对齐。
outside	默认值，列表项目标记放置文本以外，且环绕文本不根据标记对齐。
inherit	继承

2.3 list-style|列表样式缩写

1.值之间用空格分隔，不分先后顺序。
2.list-style-image覆盖list-style-type的设置。

---

4.总结

本篇我们讲述了背景样式和列表样式。
如本文章描述有误请尽快联系博主！感谢您的阅读与帮助！