文章目录

• 前言
• 一、font系列——字体属性
• • 1.font-family
  • 2.font-size
  • 3.font-weight
  • 4.font-style
  • 5.复合属性 font
• 二、text系列——文本属性
• • 1.color
  • 2.text-align
  • 3.text-decoration
  • 4.text-indent
  • 5.line-height

---

前言

记录了一些学习CSS（层叠样式表）过程当中的学习笔记

一、font系列——字体属性

在CSS中，常对文本的字体进行如下四种的编辑

字体属性	表示
字体系列	font-family
字体大小	font-size
字体粗细	font-weight
字体样式	font-style

1.font-family

p {
	font-family:"Apple Braille",serif;
}

通过font-family可以对字体进行编辑。需要注意的是，在font-family中，若浏览器无法显示第一个字体，会继续尝试下一个。因此，强烈推荐在最后加上一个通用字体（serif）作为最后选项，保证浏览器中可以显示。
在使用WebStorm调试时，若不在最后加入serif，会导致字体的更改在浏览器中不显示。

2.font-size

p {
	font-size:16px;
}

font-size可以用来调整字体大小

3.font-weight

p {
	font-weight:normal;
	font-weight:bold;
	font-weight:400;
}

font-weight可以用来调整字体粗细，其后可以加“normal”，“bold”或一个具体的数字，需要注意的是，normal对应的数字是400。

4.font-style

p {
	font-style:normal;
	font-style:italic;

font-style可以用来调整字体的是否使用斜体。

5.复合属性 font

在实际操作中，我们可以将文字的属性复合，例如：

p {
	font:normal 400 16px "Apple Braille",serif
}

需要特别注意的是：
1.font中，不能更改style height size family的顺序
2.font中，size和family两个属性不能删除。若不写style与height两个属性，将使用默认值

二、text系列——文本属性

在CSS中，常用对文本进行以下的编辑

文本属性	表示
文本颜色	color
文本对齐	text-align
文本装饰	text-decoration
文本缩进	text-indent
文本行间距	line-height

1.color

在CSS中，可以通过三种方式对文本颜色进行更改。
1.直接使用颜色名（red，pink，blue）
2.使用十六进制表示（#ff0000）
3.使用rgb表示rgb（255，0，0）

.p1{
	color:red;
}

.p2{
	color:#ff0000;
}

.p3{
	color:rgb(255,0,0);
}

2.text-align

p {
	text-align:center;
	text-align:left;
	text-align:right;
}

3.text-decoration

可以通过text-decoration，对文本进行下划线，删除线等修饰

p {
	text-decoration:none;
	text-decoration:underline;

4.text-indent

在文本编辑过程中，常需要将文本进行缩进，如段首空两格，这时使用text-indent进行编辑。

p {
	text-indent:20px;
}

实际上，使用单位"px"并不方便。例如，在需要“空两格时”我们并不知道“两格”对应的单位是多少。
因此，“em"是一个更经常使用的单位。1个em对应1个文本字符的长度。例如，对于“空两格”，我们需使用"2em”:

p {
	text-indent:2em;
}

5.line-height

line-height可以用来改变行间距

p {
	line-height:20px;
}