CSS 文本

网页的大部分内容是文本，文本的样式对阅读网页至关重要，CSS 提供了很多用于文本格式的属性，帮助我们做一个漂亮易用的网页。

网页的大部分内容是文本，文本的样式对阅读网页至关重要，CSS 提供了很多用于文本格式的属性，帮助我们做一个漂亮易用的网页。

文字颜色 color

color 属性用于设置文本的颜色。

CSS 提供了很多颜色的表示方法，具体可查看CSS 颜色章节获得更多的信息。

定义网页的文本的默认颜色：

body {
  color: blue;
}

一个相称的背景色，能够是文字更容易阅读。

定义网页的背景色和文本的默认颜色：

body {
  background-color: black;
  color: white;
}

文本对齐 text-align

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐、右对齐、居中或两端对齐。

text-align: left; /* 左对齐 */
text-align: right; /* 右对齐 */
text-align: center; /* 居中对齐 */
text-align: justify; /* 两端对齐 */

文字方向 vertical-align

direction 和 unicode-bidi 属性特性可用于改变一个元素的文本方向：

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

垂直对齐 vertical-align

vertical-align 属性设置行内元素或者表格单元格的垂直对齐方式。

设置文本中图像的垂直对齐方式：

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

文字装饰 text-decoration

text-decoration 属性设置文本中的装饰线，比如 上划线、下划线、删除线。

text-decoration: none; /* 无效果，默认值 */
text-decoration: overline; /* 上划线 */
text-decoration: underline; /* 下划线 */
text-decoration: line-through; /* 删除线 */

文本转换 text-transform

text-transform 属性用于将文本中转换为大写或者小写字母，应用于英文等西方文字，不适用与中文。

它可用于将所有内容转换为大写或小写字母，或将每个单词的第一个字母大写：

text-transform: none; /* 不转换大小写 */
text-transform: uppercase; /* 转为大写字母 */
text-transform: lowercase; /* 转为小写字母 */
text-transform: capitalize; /* 每个单词的首字母转换为大写 */

文本缩进

text-indent 属性用于设置文本块中第一行文字的缩进。

将每段第一行缩进 32px

p {
  text-indent: 32px;
}

字母间距 letter-spacing

letter-spacing 属性用于设置文本中字符之间的间距。

增加或减少字符之间的间距：

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

行高 line-height

line-height 属性用于设置行之间的间距，这里的间距是两行文字基线之间的间距。

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

字间距

word-spacing 属性用于设置文本中单词之间的间距。

增加或减少单词之间的间距：

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

空白

white-space 属性设置如何处理元素内的空白。

禁止元素内的文本换行：

p {
  white-space: nowrap;
}

文字阴影

text-shadow 属性为文本添加阴影。

设置水平阴影 (2px) 和垂直阴影 (2px)：

h1 {
  text-shadow: 2px 2px;
}

接下来，为阴影添加颜色（红色）：

h1 {
  text-shadow: 2px 2px red;
}

然后，为阴影添加模糊效果（5px）：

h1 {
  text-shadow: 2px 2px 5px red;
}

! 提示： 转到 CSS 字体章节，了解如何更改字体、文本大小和文本样式。

所有 CSS 文本属性

Property Description
color 设置文字颜色
direction 设置文本的书写方向
letter-spacing 设置文字间距
line-height 设置行高
text-align 设置文字水平对齐方式
text-decoration 设置文本装饰线
text-indent 设置文本块的首行缩进
text-shadow 设置文本阴影
text-transform 控制文本的大小写
text-overflow 设置文本溢出的方式
unicode-bidi 和 direction 属性一起决定如何处理文档中的双书写方向文本
vertical-align 设置垂直对齐方式
white-space 设置文字间空白的处理方式
word-spacing 设置文本中词之间的间距
CSS 背景 CSS 字体