CSS 文本样式

文本样式管什么

上一篇我们把字体的形状定好了，这一篇负责文字的外观，包括颜色、对齐、装饰线、大小写、行高这些。它们决定一段文字读起来舒不舒服。整体学习路线顺着系列往下走就行。

color 文字颜色

color 属性设置文字颜色。写法有几种，颜色关键字、十六进制、rgb 和 rgba。

p {
  color: red;                    /* 颜色关键字 */
  color: #ff0000;                /* 十六进制 */
  color: rgb(255, 0, 0);         /* rgb 三通道 */
  color: rgba(255, 0, 0, 0.5);   /* 带透明度的写法 */
}

日常开发里，颜色值大多由设计稿直接给出，多数是十六进制。完整的颜色体系后面有专门一篇讲，这里先会用就行。

text-align 对齐

text-align 控制块内文字的水平对齐，left 左对齐、right 右对齐、center 居中、justify 两端对齐。

.title {
  text-align: center;
}
p {
  text-align: justify;
}

justify 会把每行文字拉伸到两端对齐，适合英文排版，但对中文要小心，中文文字本来就整齐，两端对齐偶尔会造成字间距忽大忽小。中文正文一般用默认的左对齐就好。

text-decoration 装饰线

text-decoration 给文字加下划线、删除线等，取值有 underline、overline、line-through、none。

a {
  text-decoration: none;              /* 去掉链接默认的下划线 */
}
.del {
  text-decoration: line-through;      /* 删除线，常见于划线价 */
}

最常用的场景是去掉链接下划线，其次是删除线做促销划线价。overline 上划线用得很少。

text-transform 大小写

text-transform 处理英文大小写，uppercase 全大写、lowercase 全小写、capitalize 每个单词首字母大写。

.brand {
  text-transform: uppercase;
}

注意这个属性只对英文有效，中文没有大小写概念，设置了也不会有变化。它只改显示效果，不改变文本本身的内容。

line-height 行高

line-height 是行与行之间的距离，直接影响阅读体验。最佳实践是写无单位数值，比如 1.5，表示行高是字号的 1.5 倍。它不依赖字号具体数值，改字号行高自动跟着调整。

p {
  font-size: 16px;
  line-height: 1.5;   /* 实际行高 24px，改了字号也保持比例 */
}

给单行文字设置 line-height 等于容器高度，还能实现经典的垂直居中。

.nav-item {
  height: 48px;
  line-height: 48px;   /* 行高等于高度，文字垂直居中 */
}

这个技巧对单行文字有效，多行文字会溢出，用的时候注意。

letter-spacing 和 word-spacing

letter-spacing 调整字符间距，word-spacing 调整单词间距。中文没有空格分词，所以 word-spacing 主要对英文有效。letter-spacing 常用于标题加宽字距，营造大气的排版感。

h2 {
  letter-spacing: 2px;
}

小结

文本样式属性都不难，重点是知道每个属性什么时候用。对齐用 text-align，去下划线用 text-decoration，行高用无单位数值，垂直居中用行高等于高度的小技巧。加上上一篇的字体属性，一段文字的外观基本就齐了。下一篇我们玩点高级的，文字阴影、省略号和换行控制。