CSS 文本属性
CSS 提供了多种属性来控制文本的样式、布局和外观。以下是一些常用的 CSS 文本属性及其用法。
1. 文本颜色 (color)
设置文本的颜色。
.zz123_heading {
color: #333; /* 深灰色 */
}2. 文本对齐 (text-align)
设置文本的水平对齐方式。
.zz123_paragraph {
text-align: center; /* 居中对齐 */
}可选值：
left（默认）：左对齐right：右对齐center：居中对齐justify：两端对齐
3. 文本装饰 (text-decoration)
添加或移除文本的装饰线（如下划线、删除线等）。
.zz123_link {
text-decoration: underline; /* 下划线 */
}可选值：
none：无装饰underline：下划线overline：上划线line-through：删除线
4. 文本大小写 (text-transform)
控制文本的大小写形式。
.zz123_title {
text-transform: uppercase; /* 全部大写 */
}可选值：
none：默认uppercase：全部大写lowercase：全部小写capitalize：首字母大写
5. 文本缩进 (text-indent)
设置文本首行的缩进。
.zz123_paragraph {
text-indent: 2em; /* 首行缩进 2em */
}6. 行高 (line-height)
设置文本行与行之间的间距。
.zz123_text {
line-height: 1.6; /* 行高为字体大小的 1.6 倍 */
}7. 字间距 (letter-spacing)
设置字符之间的间距。
.zz123_heading {
letter-spacing: 2px; /* 字符间距 2px */
}8. 单词间距 (word-spacing)
设置单词之间的间距。
.zz123_paragraph {
word-spacing: 5px; /* 单词间距 5px */
}9. 文本溢出 (text-overflow)
控制文本溢出容器时的显示方式。
.zz123_truncate {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
}10. 文本阴影 (text-shadow)
为文本添加阴影效果。
.zz123_heading {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 水平偏移 2px，垂直偏移 2px，模糊半径 4px，阴影颜色 */
}11. 字体 (font)
设置字体相关的属性，包括字体大小、字重、字体族等。
.zz123_text {
font-family: Arial, sans-serif; /* 字体族 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 字重 */
font-style: italic; /* 斜体 */
}12. 空白处理 (white-space)
控制文本中的空白符（如空格、换行符）的处理方式。
.zz123_code {
white-space: pre; /* 保留空白符和换行 */
}可选值：
normal：默认，合并空白符nowrap：禁止换行pre：保留空白符和换行pre-wrap：保留空白符，允许换行pre-line：合并空白符，保留换行
13. 文本方向 (direction)
设置文本的书写方向。
.zz123_rtl {
direction: rtl; /* 从右到左 */
}可选值：
ltr：从左到右（默认）rtl：从右到左
14. 垂直对齐 (vertical-align)
设置文本的垂直对齐方式（通常用于表格单元格或行内元素）。
.zz123_superscript {
vertical-align: super; /* 上标 */
}可选值：
baseline：默认top：顶部对齐middle：居中对齐bottom：底部对齐sub：下标super：上标
15. 文本换行 (word-wrap 和 overflow-wrap)
控制长单词或 URL 的换行行为。
.zz123_long-text {
word-wrap: break-word; /* 允许长单词换行 */
overflow-wrap: break-word; /* 同上，推荐使用 */
}示例代码
.zz123_article {
color: #444;
font-family: 'Georgia', serif;
font-size: 18px;
line-height: 1.8;
text-align: justify;
text-indent: 2em;
word-spacing: 2px;
letter-spacing: 1px;
}
.zz123_article h2 {
color: #222;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}总结
CSS 文本属性提供了丰富的选项来控制文本的外观和布局。通过合理使用这些属性，可以创建出美观且易读的网页内容。