css_06 | CSS——CSS 给文本加样式：② 文本属性

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码

---

前言： 做为上一篇《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: 值1 值2 值3 值4;
}
复制代码

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

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

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

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

• 值4，指定阴影的“模糊半径” 。更高的值意味着阴影分散得更普遍。这个值非必须指定，若是不指定此值，则默认为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

复习上一篇：《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！