2.字体属性及文本属性

Pupper大约 4 分钟学习笔记前端基础CSS

一、字体属性

属性	含义	说明
font-size	大小	常用单位 px，默认为 16px，
font-family	字体	多个字体时要用“，”隔开，两个单词以上字体名要用引号
font-weight	粗细	正常字体 400，加粗 700，没有单位
font-style	样式	italic 为斜体，normal 为正常字体
font	简写	顺序不能更改，大小和字体不能省略

1. 字体 `font-family`

font-familyCSS 属性允许您设置文本内容的字体系列名称，字体使用的优先级列表。
font-family属性可以包含多个字体名称作为后备字体，字体之间用 “，”隔开
如果字体系列的名称超过一个单词，它必须用引号引起来，像"Times New Roman"

p {
	font-family: "Microsoft YoHi", Arial， Helvetica；;
}

2. 字体大小 `font-size`

font-size属性设置元素文本内容的字体大小，在浏览器中默认的文字大小是 16px。
标题标签的文字大小需要单独指定

单位：

px（像素）：最常用的大小单位
em：父元素的字体大小单位
- 如果父元素设置字体为 20px，则 1em = 20px， 2em = 40px
- 如果父元素没有设置字体大小，则 1em = 16px， 2em = 32px

h1 {
	font-size: 24px;
}
p {
	font-size: 14px;
}

推荐使用百分比设置字体大小

font-size将 body 的设置为62.5%（即默认 16px 的 62.5％），等于 10px 或 0.625em

body {
	font-size: 62.5%; /* font-size 1em = 10px */
}
p {
	font-size: 1.6em; /* 1.6em = 16px */
}

3. 字体粗细 `font-weight`

font-weight属性指定字体的粗细或粗体。

参数：

参数	说明
normal（默认）	正常字体，相当于 number 为 400
bold	粗体，相当于 number 为 700，也相当于 `<b>`标签的作用
bolder	特粗体
lighter	细体
number	100\|200\|300\|400\|500\|600\|700\|800\|900

p {
	font-weight: 700;
}

4. 字体样式 `font-style`

通过font-style属性设置元素的文本内容的字体样式。

参数	说明
normal	正常字体
italic	斜体（斜体版本的字体）
oblique	斜体（正常版本的倾斜字体）

p.one {
	font-style: normal;
}
p.two {
	font-style: italic;
}
p.three {
	font-style: oblique;
}

5. 字体复合属性

语法：

选择器 {
	font: font-style font-weight font-size/line-height font-family;
}

语法格式为固定顺序，不能更改
不需要设置的属性可以不写，但是 font-size 和 font-family 属性必须保留，否则 font 失效

常规写法：

div {
	font-size: 16px;
	font-family: "microsoft yahei";
	font-style: italic;
	font-weight: 700;
}

复合写法：

div {
	font: italic 700 16px "microsoft yahei";
}

二、文本属性

属性	表示	说明
color	文本颜色	常用 16 进制值
text-align	文本对齐	设置水平对齐方式
text-indent	文本缩进	缩进 2 个字的距离：2em、32px（默认字体大小时）
text-decoration	文本修饰	underline 添加下划线，取消下划线 none
line-height	行高	控制两行之间的距离

1. 字体颜色 `color`

color 三种属性值：

预定义的颜色值：red、green、blue 等
十六进制： #ff0000、#29D794 等
RGB 代码： rgb(255,255,255) 或 rgb（100%， 100%， 0%）

h1 {
	color: #ff0000;
}
p {
	color: green;
}
div {
	color: rgb(0, 255, 0);
}

2. 文本对齐 `text-align`

text-align 属性用于设置元素内文本的水平对齐方式。

属性值：

属性值	说明
left	左对齐
right	右对齐
center	居中

h1 {
	text-align: center;
}

3. 装饰文本 `text-decoration`

text-decoration ：属性规定添加到文本的装饰，如下划线、删除线等等。

属性值：

属性值	描述
none（默认）	没有装饰线
underline	下划线，标签 `<a>` 自带下划线
overline	上划线
line-through	删除线

h2 {
	text-decoration: line-through;
}
h3 {
	text-decoration: underline;
}

4. 字体缩进 `text-indent`

text-indent ：属性用于设置元素的首行文本的缩进
em 是一个相对单位，就是当前元素 1 个文字大小，如果当前元素没有设置，则会按照父元素的 1 个文字大小。

div {
	text-indent: 32px;
}
div {
	text-indent: 6.25%;
}
div {
	text-indent: 2em;
}

5. 行间距 `line-height`

line-height ：属性用于设置行间的距离（行高）。
行高 = 上间距 + 下间距 + 文本高度

p {
	line-height: 20px;
}

6. 文字垂直居中

要想文字垂直居中，只需要 <mark> 文字的行高（line-height）等于盒子的行高 </mark> 即可

详情

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			a {
				display: block;
				width: 230px;
				height: 40px;
				background-color: #bbb;
				text-decoration: none;
				line-height: 40px;
			}
		</style>
	</head>

	<body>
		<div>
			<a href="#">文职垂直居中</a>
		</div>
	</body>
</html>