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 样式时,需要谨慎选择和使用不同的文本属性。