CSS - Text

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

CSS Text - Text Color

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

p {
color: blue;
}

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

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

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

CSS Text - Text Alignment

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

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

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

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

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

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

CSS Text - Vertical Alignment

垂直对齐有点棘手，但别担心！这通常与内联或表格单元格元素一起使用。

img {
vertical-align: middle;
}

td {
vertical-align: top;
}

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

CSS Text - Direction

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

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

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

CSS Text - Text Decoration

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

.underline {
text-decoration: underline;
}

.overline {
text-decoration: overline;
}

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

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

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

CSS Text - Text Decoration Skip

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

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

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

CSS Text - Text Decoration Skip Ink

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

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

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

CSS Text - Text Transform

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

.uppercase {
text-transform: uppercase;
}

.lowercase {
text-transform: lowercase;
}

.capitalize {
text-transform: capitalize;
}

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

CSS Text - Text Emphasis

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

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

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

CSS Text - Text Indentation

记得当你的老师让你缩进每个段落的第一行吗？CSS可以自动做到这一点！

p {
text-indent: 50px;
}

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

CSS Text - Letter Spacing

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

h1 {
letter-spacing: 5px;
}

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

CSS Text - Word Spacing

类似于字母间距，但是针对整个单词：

p {
word-spacing: 10px;
}

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

CSS Text - White Space

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

.nowrap {
white-space: nowrap;
}

.pre {
white-space: pre;
}

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

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

CSS Text - White Space Collapse

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

CSS Text - Text Shadow

想要给文本添加一些深度吗？文本阴影来帮忙了！

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

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

CSS Text - Line Break

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

p {
line-break: strict;
}

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

CSS Text - Word Break

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

p {
word-break: break-all;
}

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

CSS Text - Related Properties

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

属性	描述
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