CSS 文本

CSS 有很多我们可以操作页面的方法，但其中最基本的方法之一可能是调整页面上的文本和字体。有很多方法可以改变 CSS 中文本的外观，让我们来看看。

文字颜色#

要更改文本颜色，我们使用该color属性。

p {
    color: red;
}

以上将使所有段落都有红色文本。

对齐文本#

我们可以使用对齐元素内的文本text-align。此属性可以设置为left、right、center或justify。

p {
    text-align: center;
}

此文本已将文本对齐设置为居中！

文本转换#

文本转换是指改变文本的大小写。我们可以用text-transform. 该属性可以设置为：

• initial – 文本使用原始大小写，即不更改任何字符。
• uppercase – 将所有字符更改为大写
• lowercase – 将所有字符更改为小写。
• capitalize – 将每个单词的第一个字母大写。

p {
    text-transform: uppercase;
}

此文本已将文本转换设置为大写！

字母和单词间距#

word-spacing我们可以分别使用和设置单个单词和单个字母之间的空间letter-spacing：

p {
    word-spacing: 10px;
    letter-spacing: 1px;
}

此文本有单词和字母间距

文字装饰#

文本修饰是指在文本上方添加下划线或添加线条。可以通过text-decoration属性进行调整。有四个主要属性：

• text-decoration-line– 线的位置。它可以是下划线、上划线、无或直通。
• text-decoration-color– 线条的颜色。
• text-decoration-style– 线条的样式。这可以是实心的、双重的、虚线的、虚线的或波浪形的。
• text-decoration-thickness– 线的宽度，即 5px。

这些都可以浓缩为一个属性，即：

p {
    text-decoration: underline red wavy 3px;
}

文字阴影#

这允许我们为文本添加阴影。它使用稍微复杂的语法，如下所示：

text-shadow: x-distance y-distance blur color;

例如，下面添加了一个红色阴影，距离左侧 2px，距离顶部 2px，模糊度为 10px：

p {
    text-shadow: 2px 2px 10px red;
}