（6）CSS 给文本加样式——②文本属性

本知识学习用时：3小时，总第35/10000小时

前言：作为上一篇

《Oli的前端一万小时》之：（5）CSS 给文本加样式——① 字体属性

的兄弟文章，我们继续逐一学习“文本属性”怎样给文本加样式的。

对于“文本属性”的学习，我们可以简单分为：

① 对文本本身进行“小整形”；

-- 转换一下文本的大小写

-- 给这个文本加一些诸如“下划线”、“上划线”和“穿过文本的线”的装饰

-- 给文本加些“阴影”

② 大整形：把文本放在最和谐、最养眼的位置——文本布局。

这个就类似于我们用的 office 的 word 里：首行缩进、左对齐、右对齐、居中、行高、行间距等等。

-- 首行缩进

-- 文本水平对齐（左对齐、右对齐、居中等）

-- 行高

-- 字母和字间距

-- 处理空白符

-- 其他

一、对文本本身进行“小整形”

1. 转换一下文本的大小写

text-transform 属性用于设置要转换的字体。

2. 给这个文本加一些诸如“下划线”、“上划线”和“穿过文本的线”的装饰

text-decoration 属性用于加一些诸如“下划线”、“上划线”和“穿过文本的线”的装饰。

text-decoration 是一个缩写形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 构成。所以，我们在实际工作中可以使用这些属性值的组合来实现一些效果。

3. 给文本加些“阴影”

text-shadow 属性用于给文本加些“阴影”。

这里的“值”比较特别，它需要 4 个独立的值来定义：

-- 值1，指定阴影的基础“颜色”；

-- 值2，指定阴影与原始文本的水平偏移“距离”，这个值必须指定。距离的长度可以使用大多数的 CSS 单位，但实际工作中用 px 最为合适。正长度值向右偏移，负长度值向左偏移。

-- 值3，指定阴影与原始文本的垂直偏移“距离”，这个值也必须指定。正长度值向下偏移，负长度值向上偏移。

-- 值4，指定阴影的“模糊半径” 。更高的值意味着阴影分散得更广泛。这个值非必须指定，如果不指定此值，则默认为0，即没有模糊。

例如：

二、大整形：把文本放在最和谐、最养眼的位置——文本布局。

1. 首行缩进

text-indent 属性用于指定文本内容的第一行前面应该留出多少的水平空间。

2. 文本水平对齐（左对齐、右对齐、居中等）

text-align 属性用于控制文本如何和它所在的内容盒子水平对齐。

text-align-last 属性用于定义一段文本内容的最后一行在被强制换行之前的对齐规则。

3. 行高

line-height 属性用于设置文本每行之间的高。

当行与行之间拉开空间，正文文本的阅读体验会更好。

“高”可以接受大多数单位，但实际工作中我们常常设置一个无单位的值，作为乘数。用无单位的值乘以 font-size 来获得 line-height 。推荐的行高大约是 1.5–2 ，即字体高度的 1.5-2 倍。

4. 字母和字间距

word-spacing 属性用于修改“字”与“字”之间的间隔长度；

letter-spacing 属性用于修改“字母、字符”与“字母、字符”之间间隔的长度。

“字”是指：任何非空白符字符组成的串，并由某种空白符包围。例如：How are you 是 3 个字，9个字母。

5. 处理空白符

white-space 属性用于处理“字之间”和“文本之间”的空白符显示方式。

在之前的关于 HTML 的文章中我们了解到，由于 HTML 对空白符有默认的处理方式——它会把所有空白符合并为一个空格，并且忽略元素中的换行。所以当时如果想对文本换行，我们需要用到标签

。而在 CSS 中我们有以下方法：

6. 其他

对于文本属性，我们可以学习、探索的还有很多。例如接下来的两篇文章，我们在介绍“盒模型”时，还会接触到 text-overflow 、white-space 与 overflow 的综合运用（为了使文本在有限的盒子里更优雅的展现——比如当文本过长时，我们可以使其显示为 … ）。

三、上一篇的遗留问题—— font

上一篇很多的“字体属性”和这一篇学习的 line-height ，都可以通过 font 把它们设置在一个声明里。

顺序为：

font-style → font-variant → font-weight → font-stretch → font-size → line-height → font-family

⚠️ 如果我们想用 font 来简写，那么 font-size 和 font-family 是一定要指定的，其他的可有可没有。

⚠️ font-size 和 line-height 属性之间必须放一个正斜杠。

后记：通过两篇兄弟文章，我们大致掌握了 CSS 怎样给文本加样式。但需要注意的是，与文本相关的属性还有很多很多，实际工作中要实现一个效果，也可以有很多不同的方法。那怎样以不变应万变呢？我们在下一篇将会得到一些灵感。

欢迎继续关注下文 ：

（7）CSS 基本视觉格式化

（本文版权归 “公号 | Oli的前端一万小时” 所有，转载需说明来源）