前端必知必会-CSS 文本Text

---

CSS 文本Text

CSS 具有许多用于格式化文本的属性。

文本颜色

color 属性用于设置文本的颜色。颜色由以下方式指定：

• 颜色名称 - 如“red”
• HEX 值 - 如“#ff0000”
• RGB 值 - 如“rgb(255,0,0)”

页面的默认文本颜色在正文选择器中定义。
示例

body {
color: blue;
}

h1 {
color: green;
}

文本颜色和背景颜色

在此示例中，我们定义了 background-color 属性和 color 属性：

示例

body {
background-color: lightgrey;
color: blue;
}

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

div {
background-color: blue;
color: white;
}

重要提示：高对比度对于视力有问题的人来说非常重要。因此，始终确保文本颜色和背景颜色（或背景图像）之间的对比度良好！

CSS 文本对齐

文本对齐和文本方向

• text-align
• text-align-last
• direction
• unicode-bidi
• vertical-align

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

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

以下示例显示居中对齐和左对齐和右对齐文本（如果文本方向是从左到右，则默认左对齐，如果文本方向是从右到左，则默认右对齐）：

示例

h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}

当 text-align 属性设置为“justify”时，每行都会被拉伸，以便每行都有相等的宽度，并且左右边距是直的（就像杂志和报纸一样）：

示例

div {
text-align: justify;
}

文本对齐最后
text-align-last 属性指定如何对齐文本的最后一行。

示例
对齐三个 <p> 元素中的文本最后一行：

p.a {
text-align-last: right;
}

p.b {
text-align-last: center;
}

p.c {
text-align-last: justify;
}

文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向：

示例

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

垂直对齐
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;
}

CSS 文本装饰text-decoration

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration
  为文本添加装饰线
  text-decoration-line 属性用于为文本添加装饰线。

提示：您可以组合多个值，例如 overline 和 underline，以在文本上方和下方显示线条。

示例

h1 {
text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p {
text-decoration-line: overline underline;
}

注意：不建议为非链接文本添加下划线，因为这通常会让读者感到困惑。

指定装饰线的颜色
text-decoration-color 属性用于设置装饰线的颜色。

示例

h1 {
text-decoration-line: overline;
text-decoration-color: red;
}

h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}

h3 {
text-decoration-line: underline;
text-decoration-color: green;
}

p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}

指定装饰线的样式
text-decoration-style 属性用于设置装饰线的样式。

示例

h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}

h2 {
text-decoration-line: underline;
text-decoration-style: double;
}

h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}

p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}

p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}

p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}

指定装饰线的粗细
text-decoration-thickness 属性用于设置装饰线的粗细。

示例

h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}

h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}

h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}

p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}

简写属性
text-decoration 属性是以下属性的简写属性：

• text-decoration-line（必需）
• text-decoration-color（可选）
• text-decoration-style（可选）
• text-decoration-thickness（可选）
  示例

h1 {
text-decoration: underline;
}

h2 {
text-decoration: underline red;
}

h3 {
text-decoration: underline red double;
}

p {
text-decoration: underline red double 5px;
}

小提示 HTML 中的所有链接默认都带有下划线。有时您会看到链接的样式没有下划线。text-decoration: none; 用于从链接中删除下划线，如下所示：

示例

a {
text-decoration: none;
}

CSS 文本转换Text Transformation

文本转换
text-transform 属性用于指定文本中的大写和小写字母。

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

示例

p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

CSS 文本间距Text Spacing

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

文本缩进
text-indent 属性用于指定文本第一行的缩进：

示例

p {
text-indent: 50px;
}

字母间距
letter-spacing 属性用于指定文本中字符之间的间距。

以下示例演示了如何增加或减少字符之间的间距：

示例

h1 {
letter-spacing: 5px;
}

h2 {
letter-spacing: -2px;
}

行高
line-height 属性用于指定行之间的间距：

示例

p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}

字间距
word-spacing 属性用于指定文本中单词之间的间距。

以下示例演示如何增加或减少单词之间的间距：

示例

p.one {
word-spacing: 10px;
}

p.two {
word-spacing: -2px;
}

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

此示例演示如何禁用元素内的文本换行：

示例

p {
white-space: nowrap;
}

CSS 文本阴影

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

最简单的用法是，您仅指定水平阴影 (2px) 和垂直阴影 (2px)：

示例

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

接下来，为阴影添加颜色 (红色)：

示例

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

然后，为阴影添加模糊效果 (5px)：

示例

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

---

总结

本文介绍了的CSS 文本的使用，如有问题欢迎私信和评论