本节主要介绍网页排版中主要格式化元素属性，帮助开发者把css技术与网页排版紧密联系到一起，来更好的实现网页设计效果。
1.字体属性
字体
在日常工作中，我们会用到word来编写内容，比如可以对我们需要设置的内容设置字体、字号、颜色等设置。如图所示。
那么我们在网页中使用css样式时，同样也能做相关的设置。
看个栗子，为网页中的文字设置字体为微软雅黑。
body{font-family:'微软雅黑'}
这里要注意不要设置不常用的字体，比如你给我来个'圆体-简',因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。也就是说，用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。
现在一般网页中喜欢设置"微软雅黑"，如下代码：
body{font-family:"Microsoft Yahei"}
因为这种字体既美观又可以在客户端完全的显示出来(用户本地一般都是默认安装的)
备选字体
备选字体是为了防止用户电脑上没有”微软雅黑“这个字体。
语法：
body{font-family:'Microsoft Yahei','宋体','黑体'}
备选字体可以有无数个，那么浏览器在去解析这个代码的时候，是从左往右解析的，如果没有微软雅黑，再去找宋体，最后黑体。
字体大小
可以为网页中的文本设置字体大小，那么一般浏览器的字体大小默认为为16px。
最常用的像素单位：px、em、rem，这里咱们先介绍一种单位，px。
px:像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。看下图。
比如之前我们小时候玩的超级玛丽，这些动图的尺寸就是用像素单位来表示的。
字体颜色
颜色分为三原色：红、绿、蓝，如图所示，三原色进行混合能呈现出不同的颜色
比如红色+绿色=黄色。
颜色表示方法在css中有三种方式：
- 英文单词表示法，比如red、green、blue
- rgb表示法
- 十六进制表示法
对于rgb表示法和十六进制表示法，我们可以通过编辑器中辅助工具（颜色取色器）来取到对应的颜色。这里就不一一赘述了。
字体样式
网站中的字体分为了普通字体和斜体字体，我们可以使用font-style属性来设置对应的字体样式。
| 属性值 | 描述 |
|---|---|
| normal | 默认的，文本设置为普通字体 |
| italic | 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。常用 |
| oblique | 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。 |
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style type="text/css">
p{
font-style: italic;
}
i{
font-style: normal;
}
</style>
</head>
<body>
<p>普通字体样式</p>
<i>斜体样式</i>
</body>
</html>
效果展示：
因为i标签本身具有倾斜的含义，所以可以对已有的倾斜的字体来按照需求进行相应的设置。
字体粗细
网站中我们可以通过font-weight来设置文字的粗体大小。这里有很多值可选，那么使用最多的就是normal和bold分别代表普通和加粗和字体粗细。
| 属性值 | 描述 |
|---|---|
| normal | 普通的字体粗细，默认 |
| bold | 加粗的字体粗细 |
| lighter | 比普通字体更细的字体 |
| bolder | 比bold更粗的字体 |
| 100~900 | 400表示normal |
2.文本属性
文本修饰
在网页中有些时候我们需要对文本设置下划线，或者删除线。如图所示：
如果想实现下划线或者删除线，使用text-decoration属性。
| 属性值 | 描述 |
|---|---|
| none | 无文本的修饰 |
| underline | 文本下划线 |
| overline | 文本上划线 |
| line-through | 穿过文本的线， |
文本缩进
比如我们通常写文章的时候，首字母要空两格。那么我们需要使用text-indent属性来实现。它的属性值是像素(px、em、rem)单位。
代码如下：
<p>在人类漫长的历史长河中，推动社会向前的从不会是那些甘于平凡的多数人，相反，他们往往都是一群特立独行桀骜不驯的疯子！这一群疯子中有位传奇的人物，他颠覆性地将人文与科技完美融合，极大地改变了人类计算机领域，改变了人们的生活方式，其一手创建的计算机公司到如今仍是手机行业的传奇，没错！他就是乔布斯！</p>
效果显示：
我们希望整段文章描述，首行空两格，那么首先要知道字体大小是多少。比如字体大小默认是16px，那么我需要给它设置text-indent:32px;才能实现效果。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本缩进</title>
<style type="text/css">
p{
text-indent: 32px;
}
</style>
</head>
<body>
<p>在人类漫长的历史长河中，推动社会向前的从不会是那些甘于平凡的多数人，相反，他们往往都是一群特立独行桀骜不驯的疯子！这一群疯子中有位传奇的人物，他颠覆性地将人文与科技完美融合，极大地改变了人类计算机领域，改变了人们的生活方式，其一手创建的计算机公司到如今仍是手机行业的传奇，没错！他就是乔布斯！</p>
</body>
</html>
那么问题来了，如果我更改了p标签的字体大小呢？比如，
p{
text-indent: 32px;
font-size:20px;
}
必须再重新的计算text-indent的值来合适。那么这样的话，使得让我们的开发效率降低，后期不宜维护。如何解决这一问题呢？
我们可以设置另一个单位em，它是一个相对单位，相对于p标签的字体大小来进行设置。
如果p标签的字体是16px,那么1em=16px。如果我后期设置了字体大小为20px,那么2em就自动变为40px。
正确设置方式：
p{
text-indent:2em;
font-size:30px;
}
行间距
行间距，也叫行高，表示行与行之间的距离。
上个案例的呈现效果会发现，行与行之间的距离有点近，那么为了使文本显示更加美观，我们可以使用line-height属性来进行设置行间距，它的单位为像素。举个例子，我们在word文档中对段落设置。如图所示
在css中设置代码如下：
p{
font-size: 20px;
text-indent: 2em;
line-height:2em;
}
line-height:2em;表示2倍行间距。
效果展示：
中文字间距、字母间距
我们在使用word文档时，通常会对文字之间的间隔进行设置，如图所示。
如果想在网页排版中设置中文字间隔或字母间隔可以使用letter-spacing或word-spacing来实现。
代码如下：
p{
/*文字之间的距离*/
letter-spacing:5px;
/*调整英文单词之间的距离*/
word-spacing: 10px;
}
效果显示：
文本对齐
在word文档中，我们通常都知道对文本甚至图片可以设置对齐方式，比如让文本或者图片居中显示。那么在网页排版中我们可以使用text-align属性来进行设置。
| 属性值 | 描述 |
|---|---|
| left | 文本左对齐，默认 |
| right | 文本右对齐 |
| center | 中心对齐 |
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本对齐</title>
<style type="text/css">
div{
/*给父级标签设置一个边框，表示这是一行，让p段落标签中的内容实现文本对齐的方式，这是文本中心对齐*/
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>这是了不起的乔布斯</p>
</div>
</body>
</html>
效果展示：
