（06）CSS 给文本加样式：② 文本属性

原创：itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有，未经授权，请勿转载！

本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」

❗️❗️❗️
以下链接为本文最新勘误篇章——《CSS 给文本加样式：② 文本属性》

前言： 作为上一篇《（05）CSS 给文本加样式：① 字体属性 | CSS》的兄弟文章，我们继续逐一学习“文本属性”怎样给文本加样式的。

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

对文本本身进行“小整形”：
- 转换一下文本的大小写
- 给这个文本加一些诸如“下划线”、“上划线”和“穿过文本的线”的装饰
- 给文本加些“阴影”
大整形：把文本放在最和谐、最养眼的位置——文本布局。
这个就类似于我们用的 Office 的 Word 里：首行缩进、左对齐、右对齐、居中、行高、行间距等等。
- 首行缩进
- 文本水平对齐（左对齐、右对齐、居中等）
- 行高
- 字母和字间距
- 处理空白符
- 其他

1 对文本本身进行“小整形”

1.1 转换一下文本的大小写

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

p {
  text-transform: 值;
}

none        防止任何转型；
uppercase   将所有文本转为大写；
lowercase   将所有文本转为小写；
capitalize  转换所有单词让其首字母大写；
full-width  将所有字形转换成固定宽度的正方形，类似于等宽字体，允许对齐。主要用于：拉丁字符以及
            亚洲语言字形（如中文，日文，韩文）。

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

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

p {
  text-decoration: 值;
}



none          取消已经存在的任何文本装饰；
underline     文本下划线；
overline      文本上划线；
line-through  穿过文本的线。 

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

1.3 给文本加些“阴影”

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

p {
  text-shadow: 值 ① 值 ② 值 ③ 值 ④;
}

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

值 ①，指定阴影的基础“颜色”；
值 ②，指定阴影与原始文本的水平偏移“距离”，这个值必须指定。距离的长度可以使用大多数的 CSS 单位，但实际工作中用 px 最为合适。正长度值向右偏移，负长度值向左偏移。
值 ③，指定阴影与原始文本的垂直偏移“距离”，这个值也必须指定。正长度值向下偏移，负长度值向上偏移。
值 ④，指定阴影的“模糊半径”。更高的值意味着阴影分散得更广泛。这个值非必须指定，如果不指定此值，则默认为 0，即没有模糊。

💡例如：

p {
  text-shadow: green 5px 5px 4px;
}

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

2.1 首行缩进

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

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

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

p {
  text-align: 值;
}

left       左对齐文本；
right      右对齐文本；
center     居中文字；

justify    使文本展开，改变单词之间的距离，使所有文本行的宽度相同。
实际工作中使用时需要注意，特别是当应用于其中有很多长单词的段落时。
如果我们要使用这个，我们应该考虑一起使用别的东西，比如 hyphens 来打破一些更长的词语。

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

2.3 行高

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

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

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

p {
  line-height: 1.5;
}

下两篇文章我们还会着重介绍属性 line-height 和 vertical-align 之于“‘行内盒子’格式化”的重点、难点问题。

2.4 字母和字间距

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

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

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

p {
  word-spacing: 2em;
}

p {
  letter-spacing: 2em;
}

2.5 处理空白符

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

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

p {
  white-space: 值;
}

normal     和默认的一样，合并所有的空白符，并忽略换行符；
pre        浏览器不会合并空白符，也不会忽略换行符；
nowrap     不换行；
pre-wrap   浏览器不仅会保留空白符并保留换行符，还允许自动换行；
pre-line   浏览器会保留换行符，并允许自动换行，但是会合并空白符，这是与 pre-wrap 值的不同之处。

2.6 其他

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

3 上一篇的遗留问题—— font

复习上一篇：《（05）CSS 给文本加样式：① 字体属性 | CSS》

上一篇很多的“字体属性”和这一篇学习的 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 属性之间必须放一个正斜杠。

p {
  font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
}

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

祝好，qdywxs ♥ you！

（06）CSS 给文本加样式：② 文本属性 | CSS