CSS 文本

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

使用 CSS 格式化文本

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

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

文字颜色

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

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

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

文字对齐

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

此属性可能的值有: leftrightcenterjustifyinherit

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

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

文字装饰

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

此属性的可能值有: noneunderlineoverlineline-throughblinkinherit。你应该避免使用非链接的下划线文本,因为它可能会使访问者感到困惑。

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 属性可能的值有: nonecapitalizeuppercaselowercaseinherit

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 (指定要在单词之间插入的空间) normalinherit

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 属性定义一行文本的高度(也称为行距)。

此属性可能的值是: 百分比%)、 长度数量normalinherit

p {
    line-height: 1.2;
}

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

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

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

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

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