文本属性

文本属性是 CSS 中最重要的属性类别之一，它们控制着网页中文字的显示方式。掌握文本属性对于创建可读性强、视觉吸引力高的网页内容至关重要。

字体属性

字体属性用于控制文本的字体样式。

font-family 属性

font-family 属性指定文本的字体系列。

/* 基本用法 */
body {
  font-family: Arial, sans-serif;
}

/* 使用引号包含多词字体名称 */
h1 {
  font-family: 'Times New Roman', serif;
}

/* 中文字体 */
body {
  font-family: 'Microsoft YaHei', 'SimHei', 'SimSun', sans-serif;
}

/* 多个备选字体 */
p {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

font-size 属性

font-size 属性指定文本的大小。

/* 使用像素 */
p {
  font-size: 16px;
}

/* 使用 em（相对于父元素的字体大小） */
h1 {
  font-size: 2em;
}

/* 使用 rem（相对于根元素的字体大小） */
p {
  font-size: 1rem;
}

/* 使用百分比 */
small {
  font-size: 80%;
}

/* 使用关键字 */
h1 {
  font-size: xx-large;
}
h2 {
  font-size: x-large;
}
p {
  font-size: medium;
}
small {
  font-size: small;
}

font-weight 属性

font-weight 属性指定文本的粗细。

/* 使用关键字 */
p {
  font-weight: normal;
}

h1 {
  font-weight: bold;
}

/* 使用数值（100-900） */
.light {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

.heavy {
  font-weight: 900;
}

font-style 属性

font-style 属性指定文本的样式。

/* 正常样式 */
p {
  font-style: normal;
}

/* 斜体 */
em {
  font-style: italic;
}

/* 倾斜 */
span {
  font-style: oblique;
}

font-variant 属性

font-variant 属性指定文本的变体。

/* 正常 */
p {
  font-variant: normal;
}

/* 小型大写字母 */
h1 {
  font-variant: small-caps;
}

font 简写属性

font 简写属性可以同时设置多个字体属性。

/* 完整语法 */
p {
  font: font-style font-variant font-weight font-size/line-height font-family;
}

/* 示例 */
p {
  font: italic normal bold 16px/1.5 Arial, sans-serif;
}

h1 {
  font: 32px/1.2 'Microsoft YaHei', sans-serif;
}

/* 只设置字体大小和字体系列 */
body {
  font: 16px Arial, sans-serif;
}

文本颜色

color 属性用于设置文本的颜色。

/* 使用颜色名称 */
p {
  color: red;
}

/* 使用十六进制 */
h1 {
  color: #333333;
}

/* 使用 RGB */
p {
  color: rgb(51, 51, 51);
}

/* 使用 RGBA（带透明度） */
span {
  color: rgba(51, 51, 51, 0.8);
}

/* 使用 HSL */
p {
  color: hsl(0, 0%, 20%);
}

/* 使用 HSLA（带透明度） */
span {
  color: hsla(0, 0%, 20%, 0.8);
}

文本对齐

text-align 属性用于设置文本的水平对齐方式。

/* 左对齐（默认） */
p {
  text-align: left;
}

/* 右对齐 */
.quote {
  text-align: right;
}

/* 居中对齐 */
h1 {
  text-align: center;
}

/* 两端对齐 */
.justify {
  text-align: justify;
}

text-align-last 属性

text-align-last 属性设置文本最后一行的对齐方式。

/* 最后一行左对齐 */
p {
  text-align: justify;
  text-align-last: left;
}

/* 最后一行居中对齐 */
h2 {
  text-align-last: center;
}

文本装饰

text-decoration 属性用于设置文本的装饰线。

/* 无装饰线 */
a {
  text-decoration: none;
}

/* 下划线 */
u {
  text-decoration: underline;
}

/* 上划线 */
span {
  text-decoration: overline;
}

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

/* 组合装饰线 */
.highlight {
  text-decoration: underline overline;
}

text-decoration-style 属性

text-decoration-style 属性设置装饰线的样式。

/* 实线 */
a {
  text-decoration-style: solid;
}

/* 双线 */
span {
  text-decoration-style: double;
}

/* 点线 */
p {
  text-decoration-style: dotted;
}

/* 虚线 */
h1 {
  text-decoration-style: dashed;
}

text-decoration-color 属性

text-decoration-color 属性设置装饰线的颜色。

a {
  text-decoration: underline;
  text-decoration-color: red;
}

text-decoration 简写属性

text-decoration 简写属性可以同时设置多个装饰属性。

/* 完整语法 */
a {
  text-decoration: line style color;
}

/* 示例 */
a {
  text-decoration: underline solid red;
}

a:hover {
  text-decoration: underline dotted blue;
}

文本转换

text-transform 属性用于设置文本的大小写。

/* 不转换（默认） */
p {
  text-transform: none;
}

/* 转换为大写 */
h1 {
  text-transform: uppercase;
}

/* 转换为小写 */
p {
  text-transform: lowercase;
}

/* 首字母大写 */
h2 {
  text-transform: capitalize;
}

行高

line-height 属性用于设置文本的行高。

/* 使用数值（推荐） */
p {
  line-height: 1.5;
}

/* 使用像素 */
p {
  line-height: 24px;
}

/* 使用 em */
p {
  line-height: 1.5em;
}

/* 使用百分比 */
p {
  line-height: 150%;
}

/* normal 关键字 */
p {
  line-height: normal;
}

字间距

letter-spacing 属性用于设置字符之间的间距。

/* 正常间距 */
p {
  letter-spacing: normal;
}

/* 增加间距 */
h1 {
  letter-spacing: 2px;
}

/* 减少间距 */
p {
  letter-spacing: -0.5px;
}

/* 使用 em */
span {
  letter-spacing: 0.1em;
}

词间距

word-spacing 属性用于设置单词之间的间距。

/* 正常间距 */
p {
  word-spacing: normal;
}

/* 增加间距 */
p {
  word-spacing: 5px;
}

/* 减少间距 */
p {
  word-spacing: -2px;
}

/* 使用 em */
p {
  word-spacing: 0.2em;
}

文本缩进

text-indent 属性用于设置首行文本的缩进。

/* 使用像素 */
p {
  text-indent: 30px;
}

/* 使用 em */
p {
  text-indent: 2em;
}

/* 使用百分比 */
p {
  text-indent: 10%;
}

/* 负值（悬挂缩进） */
hanging-indent {
  text-indent: -30px;
  padding-left: 30px;
}

文本阴影

text-shadow 属性用于设置文本的阴影效果。

/* 基本语法 */
h1 {
  text-shadow: h-shadow v-shadow blur-radius color;
}

/* 示例 */
h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* 多个阴影 */
h1 {
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000;
}

/* 无阴影 */
p {
  text-shadow: none;
}

文本溢出

text-overflow 属性用于设置文本溢出时的显示方式。

/* 裁剪文本 */
.clip {
  text-overflow: clip;
}

/* 显示省略号 */
.ellipsis {
  text-overflow: ellipsis;
}

/* 自定义字符串 */
.custom {
  text-overflow: string("...");
}

/* 配合使用 */
.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

文本换行

word-wrap 属性

word-wrap 属性设置长单词是否允许换行。

/* 正常换行 */
p {
  word-wrap: normal;
}

/* 允许单词内换行 */
p {
  word-wrap: break-word;
}

word-break 属性

word-break 属性设置单词的换行规则。

/* 正常换行 */
p {
  word-break: normal;
}

/* 允许在单词内换行 */
p {
  word-break: break-all;
}

/* 不允许在单词内换行 */
p {
  word-break: keep-all;
}

white-space 属性

white-space 属性设置空白符的处理方式。

/* 正常处理 */
p {
  white-space: normal;
}

/* 不换行 */
.no-wrap {
  white-space: nowrap;
}

/* 保留空白 */
.pre {
  white-space: pre;
}

/* 保留空白并允许换行 */
.pre-wrap {
  white-space: pre-wrap;
}

/* 合并空白但允许换行 */
.pre-line {
  white-space: pre-line;
}

垂直对齐

vertical-align 属性用于设置元素的垂直对齐方式。

/* 基线对齐（默认） */
span {
  vertical-align: baseline;
}

/* 顶部对齐 */
img {
  vertical-align: top;
}

/* 中部对齐 */
img {
  vertical-align: middle;
}

/* 底部对齐 */
img {
  vertical-align: bottom;
}

/* 文本顶部对齐 */
span {
  vertical-align: text-top;
}

/* 文本底部对齐 */
span {
  vertical-align: text-bottom;
}

/* 上标 */
sup {
  vertical-align: super;
}

/* 下标 */
sub {
  vertical-align: sub;
}

实际应用示例

文章排版

.article {
  font-family: 'Georgia', serif;
  line-height: 1.8;
  color: #333;
}

.article h1 {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.article h2 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 15px;
}

.article p {
  font-size: 16px;
  text-align: justify;
  text-indent: 2em;
  margin-bottom: 15px;
}

.article a {
  color: #3498db;
  text-decoration: underline;
}

.article a:hover {
  color: #2980b9;
}

标题样式

h1 {
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #2c3e50;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}

h2 {
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 28px;
  font-weight: bold;
  color: #34495e;
  margin-top: 40px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
}

h3 {
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 22px;
  font-weight: bold;
  color: #7f8c8d;
  margin-top: 30px;
  margin-bottom: 15px;
}

引用样式

blockquote {
  font-family: 'Georgia', serif;
  font-size: 18px;
  font-style: italic;
  color: #555;
  text-align: center;
  line-height: 1.6;
  padding: 20px;
  margin: 30px 0;
  border-left: 4px solid #3498db;
  background: #f8f9fa;
}

代码样式

code {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  color: #e74c3c;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
}

pre {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
}

总结

文本属性是 CSS 中最重要的属性类别之一，它们控制着网页中文字的显示方式：

1. 字体属性：控制字体、大小、粗细等
2. 文本颜色：设置文本的颜色
3. 文本对齐：控制文本的水平对齐
4. 文本装饰：添加下划线、删除线等装饰
5. 文本转换：控制文本的大小写
6. 行高：设置文本的行高
7. 字间距和词间距：调整字符和单词的间距
8. 文本缩进：设置首行缩进
9. 文本阴影：添加文本阴影效果
10. 文本溢出和换行：控制文本的溢出和换行方式

记住以下几点：

• 使用合适的字体和字号提高可读性
• 合理设置行高改善文本阅读体验
• 使用文本装饰增强视觉效果
• 注意文本对齐和缩进的规范使用
• 合理使用文本阴影增加层次感
• 理解文本溢出和换行机制