CSS 回忆篇 | 文本 | 背景 | 列表

---

CSS的知识点语句有些遗忘了……赶紧复习一下

一、文本相关属性

1、设置字体属性font-family

font-family:name1,[name2],[name3]

name：字体的名称，name2、name3备用字体

2、设置字号属性font-size

font-size:length

length指字体的尺寸，由数字和长度单位组成，可以是相对单位，也可以是绝对单位，绝对单位不会随着显示器的变化而变化

下表是一些绝对单位

长度单位	说明
in	inch，英寸
cm	Centimeter，厘米
mm	Millimeter，毫米
pt	point，印刷的点数，1pt等价于1/72inch
pc	pica，1pc = 12pt

相对单位有：

• 相对长度单位px：是一个长度单位，表示在浏览器上1个像素的大小
• 绝对长度单位em和ex：1 em表示的长度是其夫标记中字母m的标准宽度，1 ex表示字母 x 的标准高度

3、设置文字颜色属性color

color:color

指具体的颜色值，颜色值的表示方法可以是颜色的英文单词、十六进制、RGB或者HSL

4、设置文字的水平对齐方式属性text-align

text-align:left|center|right|justify

• left：左对齐
• center：居中对齐
• right：右对齐
• justify：两端对齐

5、设置段首缩进属性text-indent

text-indent:length

length就是由百分比数值或浮点数和单位标识符组成的长度值，允许为负值。

---

二、背景相关属性

1、添加背景颜色属性background-color

background-color:color|transparent

color代表背景的颜色，transparent表示背景颜色透明

2、添加HTML5中标记的背景图片background-image

background-image:url()

背景图像放在网页的最底层，文字和图片等都位于其上

3、设置图像的平铺方式background-repeat

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

下表是各个属性值的含义：

属性	含义
inherit	从夫标记机成background-repeat属性的设置
no-repeat	背景图像只显示一次，不重复
repeat	在水平和垂直方向上重复显示背景图像
repeat-x	只沿x轴方向重复显示背景图像
repeat-y	只沿y轴方向重复显示背景图像

4、设置背景图像是否随页面内容滚动background-attachment

background-attachment:scroll|fixed

• scroll：当页面滚动时，背景图像跟着页面一起滚动
• fixed：将背景图像固定在页面的可见区域

5、设置背景图像在页面中的位置background-position

background-position:length|precentage|top|center|bottom|left|right

属性值解释如下表所示

属性值	含义
length	设置背景图像于页面边距水平或垂直方向的距离，单位为cm\mm\px等
percentage	根据页面标记框的宽度和高度的百分比放置背景图像
top	设置背景图像顶部居中显示
center	设置背景图像居中显示
bottom	设置背景图像底部居中显示
left	设置背景图像左部居中显示
right	设置背景图像右部居中显示

三、列表相关属性

• list-style：简写属性，把所有用于列表的属性设置一个声明中
• list-style-image：将图像设置为列表项标志
• list-style-position：设置列表项的标志在文本以内或以外
• list-style-type：设置列表项标志的类型