CSS - 文本

你好，未来的网页开发者们！今天，我们将深入探索CSS文本属性的奇妙世界。作为你友好的邻里电脑老师，我非常兴奋能引导你们开启这段旅程。记住，就像学习骑自行车一样，掌握CSS需要练习，但我保证这会很有趣！

CSS 文本 - 文本颜色

让我们从一些色彩开始吧！在CSS中，我们可以使用color属性轻松地更改文本的颜色。这就像给你的文字施加了一支魔法的画笔！

p {
color: blue;
}

这行简单的代码会将所有段落文本变成蓝色。但等等，还有更多！你可以使用颜色名称、十六进制代码或RGB值：

h1 {
color: #FF5733; /* 活泼的橙色的十六进制代码 */
}

span {
color: rgb(50, 205, 50); /* 酸橙绿的RGB值 */
}

CSS 文本 - 文本对齐

接下来，让我们来谈谈文本对齐。这就像在书架上排列书籍 - 你可以将它们放在左边、右边，或者漂亮地居中对齐。

.left-align {
text-align: left;
}

.right-align {
text-align: right;
}

.center-align {
text-align: center;
}

.justify-align {
text-align: justify;
}

justify值特别有趣。它会将文本均匀地分布在行上，就像报纸排列它们的列一样。

CSS 文本 - 垂直对齐

垂直对齐有点棘手，但别担心！它最常用于内联或表格单元格元素。

img {
vertical-align: middle;
}

td {
vertical-align: top;
}

这个属性可以接受top、middle、bottom、sub、super，甚至特定的长度值！

CSS 文本 - 方向

在我们的全球村，我们经常需要处理从右到左阅读的语言。这时，direction属性就派上用场了：

.arabic-text {
direction: rtl; /* 从右到左 */
}

.english-text {
direction: ltr; /* 从左到右 */
}

CSS 文本 - 文本装饰

想要给文本添加一些风格吗？文本装饰是你的好朋友！这就像给你的文字添加珠宝。

.underline {
text-decoration: underline;
}

.overline {
text-decoration: overline;
}

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

.no-decoration {
text-decoration: none;
}

小贴士：使用text-decoration: none;来移除链接的默认下划线！

CSS 文本 - 文本装饰跳过

这个属性决定在应用文本装饰时应该跳过文本的哪些部分。

p {
text-decoration: underline;
text-decoration-skip: spaces;
}

这将下划线文本，但跳过空格，创建一个更加精致的外观。

CSS 文本 - 文本装饰跳过墨迹

这是一个有趣的属性！它决定文本装饰是画在“墨迹”（即文本本身）之上还是之下。

p {
text-decoration: underline;
text-decoration-skip-ink: auto;
}

使用auto，浏览器会智能地跳过字母'g'或'y'的降部。

CSS 文本 - 文本转换

想要用大写字母大声喊叫，或者用小写字母低声细语吗？文本转换是你的首选属性！

.uppercase {
text-transform: uppercase;
}

.lowercase {
text-transform: lowercase;
}

.capitalize {
text-transform: capitalize;
}

capitalize值特别有用 - 它会将每个单词的第一个字母转换为大写。

CSS 文本 - 文本强调

文本强调允许你给你的文本添加强调标记。这就像在文本上方或下方添加小点或圆圈。

.emphasis {
text-emphasis: filled;
text-emphasis-position: over right;
}

这会在每个字符上方和右侧添加填充的圆圈。

CSS 文本 - 文本缩进

还记得你的老师让你缩进每个段落的第一行吗？CSS可以自动完成这个操作！

p {
text-indent: 50px;
}

这将每个段落的第一行缩进50像素。

CSS 文本 - 字符间距

字符间距允许你调整字符之间的空间。这就像给你的字母一些个人空间！

h1 {
letter-spacing: 5px;
}

这会在你的标题中的每个字母之间添加5像素的空间。

CSS 文本 - 单词间距

类似于字符间距，但是用于整个单词：

p {
word-spacing: 10px;
}

这会在每个单词之间添加10像素的额外空间。

CSS 文本 - 白色空间

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

.nowrap {
white-space: nowrap;
}

.pre {
white-space: pre;
}

.pre-wrap {
white-space: pre-wrap;
}

nowrap防止文本换到下一行，pre保留HTML中写入的空白空间，pre-wrap保留空白空间但允许换行。

CSS 文本 - 白色空间折叠

这个属性实际上是我们在讨论white-space属性时提到的。它决定如何折叠空白空间。

CSS 文本 - 文本阴影

想要给文本添加一些深度吗？文本阴影在这里帮助你！

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

这会给标题添加一个红色阴影，向右2像素，向下2像素，有5像素的模糊。

CSS 文本 - 行中断

line-break属性指定如何在单词内断行。

p {
line-break: strict;
}

这会执行更严格的断行规则。

CSS 文本 - 单词断行

类似于line-break，但是用于在行末断开单词：

p {
word-break: break-all;
}

这允许在任何字符处断开单词。

CSS 文本 - 相关属性

以下是我们讨论过的所有属性的快速参考表：

属性	描述
color	设置文本颜色
text-align	指定文本的水平对齐方式
vertical-align	设置内联或表格单元格框的垂直对齐
direction	指定文本方向/书写方向
text-decoration	指定添加到文本的装饰
text-decoration-skip	指定影响元素的文本装饰应该跳过的元素内容部分
text-decoration-skip-ink	指定如何绘制覆盖字母上升部和下降部的上划线和下划线
text-transform	控制文本的大小写
text-emphasis	将强调标记应用于文本
text-indent	指定文本块中第一行的缩进
letter-spacing	增加或减少字符间的空间
word-spacing	增加或减少单词间的空白空间
white-space	指定如何处理元素内的空白空间
text-shadow	给文本添加阴影
line-break	指定如何/是否断行
word-break	指定非CJK脚本的断行规则

现在，你已经掌握了以无数方式设置文本样式的知识。记住，掌握CSS的关键是练习。所以，继续前进，实验，并创建美丽的可读网页。快乐编码！

Credits: Image by storyset