CSS 文本

CSS 文本属性允许你非常轻松地定义多种文本样式，如颜色、对齐、间距、装饰、变换等。

使用 CSS 格式化文本

CSS 有几个用于定义文本样式的属性。这些属性使你可以精确控制字符 、空格 、单词 、段落等的视觉外观。

你可以设置元素的以下文本属性：

文字颜色

文本颜色由 CSS color 属性定义。

h1 {
    color: #ff0000;
}
p {
    color: green;
}

注意： 虽然，文本的颜色看起来像是 CSS 文本的一部分，但它实际上是 CSS 中的独立属性。

文字对齐

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

此属性可能的值有： left ， right ， center ， justify 和 inherit。

h1 {
    text-align: center;
}
p {
    text-align: justify;
}

注意： 当 text-align 设置为 justify 时，每条线都被拉伸，以使每条线具有相等的宽度，左右边距是直的。

文字装饰

text-decoration 属性用于设置或删除文本中的装饰。

此属性的可能值有： none 、 underline 、 overline 、 line-through 、 blink 和 inherit。你应该避免使用非链接的下划线文本，因为它可能会使访问者感到困惑。

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

警告： 大多数浏览器不支持 CSS text-decoration 属性的 blink 值。你应该避免这个值。

删除链接默认下划线

text-decoration 属性通常用于从超链接中删除默认下划线。完全删除下划线可能会使访问者感到困惑。除非你提供一些其他的视觉提示，以使其脱颖而出，同时造型链接。

例如，你可以使用点来为你的链接加下划线而不是实线。

a {
    text-decoration: none;
    border-bottom: 1px dotted;
}

注意： 创建 HTML 链接时 ，样式表中内置的浏览器会自动为其添加下划线，以便读者可以看到哪些文本是可点击的。

文字转换

text-transform 属性用于设置文本的大小写。

它可用于将元素的文本内容设置为大写或小写字母，或大写每个单词的第一个字母。text-transform 属性可能的值有： none 、 capitalize 、 uppercase 、 lowercase 和 inherit。

p.up {
    text-transform: uppercase;
}
p.cap {
    text-transform: capitalize;
}
p.low {
    text-transform: lowercase;
}

文字缩进

text-indent 属性用于设置元素第一行文本的缩进。 text-indent 属性的可能值包括： percentage （%），length （指定缩进空间）或 inherit。

以下示例演示如何缩进段落的第一行。

p {
    text-indent: 100px;
}

注意： 文本是从左侧还是从右侧缩进取决于元素内部的文本方向，由 CSS direction 属性定义。

单词间距

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

• 字间距可能受文本对齐的影响。查看 text-align 属性。
• 保留空格时，所有空格字符都受字间距的影响。请参阅 CSS white-space 属性。

word-spacing 属性的可能值包括： length （指定要在单词之间插入的空间） normal 和 inherit。

p.one {
    word-spacing: 20px;
}
p.two {
    word-spacing: 20px;
    text-align: justify;
}
p.three {
    word-spacing: 20px;
    white-space: pre;
}

字母间距

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

此属性的可能值包括： length （指定除了默认的字符间空间之外在字符之间插入的额外空间）， normal 以及 inherit。

h1 {
    letter-spacing: -3px;
}
p {
    letter-spacing: 10px;
}

线高

line-height 属性定义一行文本的高度（也称为行距）。

此属性可能的值是： 百分比 （%）、 长度 、 数量 、 normal 和 inherit。

p {
    line-height: 1.2;
}

当值为数字时，通过将元素的字体大小乘以数字来计算行高。而百分比值则相对于元素的字体大小。

注意： 不允许使用此属性的负值。此属性也是字体速记属性的组成部分。

如果 line-height 属性的值大于 font-size 元素的值，则该差异（称为 “前导”）被减半（称为 “半前导”）并均匀分布在 in-line 框的顶部和底部。

p {
    font-size: 14px;
    line-height: 20px;
    background-color: #f0e68c;
}

要了解有关文本样式的更多信息，请参阅与字体和文本对齐相关的属性。