详解CSS 文本属性「Text」

1. CSS 文本属性概述

CSS 的文本属性可以为文字添加颜色、字号、字体、字重、字形等效果。同时,也可以控制文字的排版,包括行高、对齐、缩进、间距等。

CSS 的文本属性可以使用在单个元素上,也可以使用在整个页面的全局样式中。下面是一些常见的 CSS 文本属性:

color:控制文本颜色

font-size:控制字号

font-family:控制字体

font-weight:控制字重

font-style:控制字形,如倾斜、下划线、删除线等

line-height:控制行高

text-align:控制对齐方式

text-indent:控制首行缩进

letter-spacing:控制字间距

word-spacing:控制单词间距

text-decoration:控制文本修饰,如下划线、删除线等

2. CSS 文本颜色

CSS 中可以使用 color 属性来控制文本的颜色,该属性可以接受颜色值、预定义颜色名或 RGB 值。

例如:

p {

color: red;

}

上面的代码将会使所有段落中的字体颜色变为红色。

除了常规的文本颜色,还有一些辅助的文本颜色,例如:

background-color:控制背景颜色

outline-color:控制轮廓线颜色

border-color:控制边框颜色

使用这些属性,可以更为细致化地控制页面元素的颜色表现。

3. CSS 字体

CSS 中可以使用字体属性(font-family)来控制文本字体。具体可参考 CSS3 规范中的字体模块。

在 font-family 属性中,可以指定一个或多个字体族名称,浏览器将按照列表顺序逐个查找本地系统内是否安装了指定字体。如果没有找到,浏览器将使用默认字体族。

例如:

p {

font-family: Arial, sans-serif;

}

上述代码将段落中的文本字体指定为 Arial,如果系统中没有 Arial 字体,则将使用浏览器默认的 sans-serif 字体族。

除了字体族,还可以使用 font-weight 控制文本的字重。可以使用数字值(100 至 900)或关键词(normal、bold、bolder、lighter 等)指定字重。

4. CSS 字体大小

CSS 中可以使用 font-size 属性来控制文本大小。可以使用像素值、em 值、百分比值等来指定字号大小。

例如:

p {

font-size: 14px;

}

上述代码将段落中的文本字体大小指定为 14 像素。

还可以使用 rem 单位来控制字体大小。rem 的值是相对于根元素(<html>)的大小而言的,这样做的好处是可以让整个页面的字体大小基准值保持一致。

例如:

html {

font-size: 16px;

}

p {

font-size: 1rem; /* 16px */

}

上述代码将整个页面的基准字体大小指定为 16 像素,然后将段落中的文本字体大小指定为 16 像素(1rem)。

5. CSS 文本对齐

使用 text-align 属性可以控制文本的水平对齐方式。可以使用 left、right、center 或 justify 值指定对齐方式。

例如:

p {

text-align: center;

}

上述代码将段落中的文本水平居中对齐。

除了水平对齐,还有垂直对齐的属性(vertical-align),可以控制行内元素的垂直位置。该属性只对行内元素生效。

6. CSS 文本缩进

使用 text-indent 属性可以控制文本的首行缩进。可以使用像素值或 em 值指定缩进值。

例如:

p {

text-indent: 2em;

}

上述代码将段落中的文本首行缩进 2 个字宽(即两个 em 值)。

7. CSS 行高

使用 line-height 属性可以控制文本行高。可以使用像素值、em 值、百分比值等来指定行高大小。

例如:

p {

line-height: 1.5; /* 相对于字体大小的倍数 */

}

上述代码将段落中的文本行高设置为字体大小的 1.5 倍。

有趣的是,行高也可以用负值来指定,这样可以让行之间有重叠的效果。例如:

p {

line-height: -1;

}

上述代码将段落中的文本行高设置为字体大小的负值,行与行之间会有重叠的效果。

8. CSS 文本修饰

CSS 中可以使用 text-decoration 属性来控制文本的修饰,例如加下划线、删除线等。

例如:

a {

text-decoration: none; /* 取消下划线 */

}

a:hover {

text-decoration: underline; /* 鼠标悬浮时添加下划线 */

}

p {

text-decoration: line-through; /* 删除线 */

}

上述代码将超链接的下划线去除,并在鼠标悬浮时添加下划线;将段落中的文本添加删除线。

除了 text-decoration,还有一些其他的文本修饰属性:

text-transform:控制字母大小写

text-shadow:控制文本阴影

9. CSS 字间距与单词间距

使用 letter-spacing 和 word-spacing 属性可以控制文本的字间距和单词间距。

例如:

p {

letter-spacing: 1px; /* 字间距 */

word-spacing: 2px; /* 单词间距 */

}

上述代码将段落中的文本字间距设置为 1 像素,单词间距设置为 2 像素。

需要注意的是,letter-spacing 和 word-spacing 对于中文文本只会对英文单词产生作用,因为中文没有空格分隔单词的习惯。

10. 总结

CSS 的文本属性非常丰富,几乎可以控制文本的任何表现。在使用这些属性时,需要考虑到页面的整体效果,尽量保持一致性。同时,也需要注意浏览器的兼容性,不同浏览器对于某些属性的解释可能会有所不同。

因此,在编写 CSS 样式时,需要谨慎选择和使用不同的文本属性。