CSS 提供了丰富的文本样式属性，用于控制文本的颜色、对齐方式、修饰、转换、缩进等。以下是关于 CSS 文本样式的详细学习笔记。
一、文本颜色
CSS 的 color 属性用于设置文本的颜色。颜色可以通过以下几种方式指定：
-
十六进制值 ：如
#FF0000（红色）。 -
RGB 值 ：如
rgb(255, 0, 0)（红色）。 -
颜色名称 ：如
red。
示例
css
复制
body {
color: red; /* 设置页面文本为红色 */
}
h1 {
color: #00ff00; /* 设置标题为绿色 */
}
h2 {
color: rgb(255, 0, 0); /* 设置副标题为红色 */
}注意：根据 W3C 标准，如果定义了颜色属性，还必须定义背景色属性。
二、文本对齐方式
text-align 属性用于设置文本的水平对齐方式，可选值包括：
-
left：左对齐（默认值）。 -
right：右对齐。 -
center：居中对齐。 -
justify：两端对齐（类似杂志和报纸的排版）。
示例
css
复制
h1 {
text-align: center; /* 标题居中对齐 */
}
p.date {
text-align: right; /* 日期右对齐 */
}
p.main {
text-align: justify; /* 段落两端对齐 */
}三、文本修饰
text-decoration 属性用于设置或删除文本的装饰，常见的值包括：
-
none：无装饰（常用于去除链接的下划线）。 -
underline：下划线。 -
overline：上划线。 -
line-through：删除线。
示例
css
复制
a {
text-decoration: none; /* 去除链接的下划线 */
}
h1 {
text-decoration: overline; /* 添加上划线 */
}
h2 {
text-decoration: line-through; /* 添加删除线 */
}
h3 {
text-decoration: underline; /* 添加下划线 */
}注意：不建议对非链接文本添加下划线，以免混淆用户。
四、文本转换
text-transform 属性用于控制文本的大小写转换，可选值包括：
-
none：默认值，不进行转换。 -
capitalize：每个单词的首字母大写。 -
uppercase：所有字母大写。 -
lowercase：所有字母小写。
示例
css
复制
p.uppercase {
text-transform: uppercase; /* 将文本转换为大写 */
}
p.lowercase {
text-transform: lowercase; /* 将文本转换为小写 */
}
p.capitalize {
text-transform: capitalize; /* 将每个单词的首字母大写 */
}五、文本缩进
text-indent 属性用于设置文本的第一行缩进。通常用于段落的首行缩进。
示例
css
复制
p {
text-indent: 2em; /* 段落首行缩进两个字符宽度 */
}六、其他文本样式属性
1. 字符间距（letter-spacing）
用于设置字符之间的间距。
css
复制
p {
letter-spacing: 2px; /* 字符间距为 2 像素 */
}2. 行高（line-height）
用于设置行与行之间的间距。
css
复制
p {
line-height: 1.5; /* 行高为字体大小的 1.5 倍 */
}3. 文本阴影（text-shadow）
用于为文本添加阴影效果。
css
复制
h1 {
text-shadow: 2px 2px 4px #000000; /* 水平偏移、垂直偏移、模糊半径、颜色 */
}4. 单词间距（word-spacing）
用于设置单词之间的间距。
css
复制
p {
word-spacing: 5px; /* 单词间距为 5 像素 */
}5. 文本方向（direction）
用于设置文本的方向。
css
复制
p {
direction: rtl; /* 从右到左 */
}6. 空白处理（white-space）
用于设置元素中空白的处理方式。
css
复制
p {
white-space: nowrap; /* 防止文本换行 */
}7. 垂直对齐（vertical-align）
用于设置元素的垂直对齐方式。
css
复制
img {
vertical-align: middle; /* 图像垂直居中对齐 */
}