一、文本格式化
CSS 提供了多种文本格式化属性，用于控制文本的外观和布局。这些属性可以改变文本的颜色、对齐方式、修饰、大小写转换、缩进等。
1. 文本颜色
CSS 的 color 属性用于设置文本的颜色。颜色可以通过以下方式指定：
-
十六进制值 ：如
#FF0000表示红色。 -
RGB 值 ：如
rgb(255, 0, 0)表示红色。 -
颜色名称 ：如
red。
示例代码：
HTML复制
<!DOCTYPE html>
<html>
<head>
<style>
body { color: red; }
h1 { color: #00ff00; }
h2 { color: rgb(255, 0, 0); }
</style>
</head>
<body>
<h1>这是一个绿色的标题</h1>
<h2>这是一个红色的副标题</h2>
<p>这是一个红色的段落。</p>
</body>
</html>预览
注意：根据 W3C 标准，如果定义了颜色属性，还必须定义背景色属性。
二、文本对齐方式
text-align 属性用于设置文本的水平对齐方式。它有以下几种值：
-
left：左对齐（默认值）。 -
right：右对齐。 -
center：居中对齐。 -
justify：两端对齐，使每行的左右两端都对齐。
示例代码：
HTML复制
<!DOCTYPE html>
<html>
<head>
<style>
h1 { text-align: center; }
p.date { text-align: right; }
p.main { text-align: justify; }
</style>
</head>
<body>
<h1>这是一个居中的标题</h1>
<p class="date">日期：2025-04-05</p>
<p class="main">这是一个两端对齐的段落，每一行的左右两端都对齐。</p>
</body>
</html>预览
三、文本修饰
text-decoration 属性用于设置或删除文本的装饰。常见的值包括：
-
none：无装饰。 -
underline：下划线。 -
overline：上划线。 -
line-through：删除线。
示例代码：
HTML复制
<!DOCTYPE html>
<html>
<head>
<style>
a { text-decoration: none; }
h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }
</style>
</head>
<body>
<a href="#">这是一个无下划线的链接</a>
<h1>这是一个有上划线的标题</h1>
<h2>这是一个有删除线的标题</h2>
<h3>这是一个有下划线的标题</h3>
</body>
</html>预览
注意：不建议对非链接的文本使用下划线，因为这可能会让用户混淆。
四、文本转换
text-transform 属性用于控制文本的大小写。它有以下几种值：
-
none：默认值，不进行转换。 -
uppercase：将文本转换为大写。 -
lowercase：将文本转换为小写。 -
capitalize：将每个单词的首字母大写。
示例代码：
HTML复制
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase { text-transform: uppercase; }
p.lowercase { text-transform: lowercase; }
p.capitalize { text-transform: capitalize; }
</style>
</head>
<body>
<p class="uppercase">这是一个大写的段落。</p>
<p class="lowercase">这是一个小写的段落。</p>
<p class="capitalize">这是一个首字母大写的段落。</p>
</body>
</html>预览
五、文本缩进
text-indent 属性用于设置文本的第一行缩进。它通常用于段落的首行缩进，以增强文本的可读性。
示例代码：
HTML复制
<!DOCTYPE html>
<html>
<head>
<style>
p { text-indent: 50px; }
</style>
</head>
<body>
<p>这是一个有首行缩进的段落。通过设置 text-indent 属性，可以让段落的第一行缩进一定的距离，从而增强文本的可读性。</p>
</body>
</html>预览
六、其他文本属性
CSS 还提供了其他一些文本属性，用于进一步控制文本的格式和布局：
-
letter-spacing：设置字符之间的间距。 -
line-height：设置行高。 -
text-shadow：设置文本阴影。 -
vertical-align：设置元素的垂直对齐方式。 -
white-space：设置元素中空白的处理方式。 -
word-spacing：设置单词之间的间距。
示例代码：
HTML复制
<!DOCTYPE html>
<html>
<head>
<style>
p.letterspacing { letter-spacing: 2px; }
p.lineheight { line-height: 1.5; }
p.textshadow { text-shadow: 2px 2px 4px #000000; }
p.verticalalign { vertical-align: middle; }
p.whitespace { white-space: nowrap; }
p.wordspacing { word-spacing: 10px; }
</style>
</head>
<body>
<p class="letterspacing">这是一个字符间距为 2px 的段落。</p>
<p class="lineheight">这是一个行高为 1.5 的段落。</p>
<p class="textshadow">这是一个有文本阴影的段落。</p>
<p class="verticalalign">这是一个垂直对齐的段落。</p>
<p class="whitespace">这是一个禁止换行的段落。</p>
<p class="wordspacing">这是一个单词间距为 10px 的段落。</p>
</body>
</html>