CSS教程 - 第3课：background-color、font-style、font-weight、text-align、text-decoration、text-transform 属性。

10/10/2025, by Ivan

在 HTML 的发展过程中，出现了许多不同的标签。而随着 CSS 的广泛应用，其中一些标签（如 、、、<center>）已经不再推荐使用。我们将在后续课程中继续了解其他“过时”的标签。这些 CSS 属性能帮助你避免在 HTML 中编写冗余代码，将样式逻辑转移到 CSS 文件中。

在上一课中，我们学习了如何添加 CSS 属性以及如何为这些属性选择颜色。本课我们将学习一组常见的样式属性，这些属性你可能在学习 HTML 时已经见过，但那时可能是通过标签实现的。现在我们将使用 CSS 来完成同样的任务，这是更规范、更现代的做法。

Background-color

该属性不仅可以为块级元素设置背景颜色，还可以用于文本或链接。例如：

span {
  background-color: yellow;
}

或者为链接设置背景：

a {
  background-color: blue;
}

Background color

颜色也可以使用十六进制代码定义，例如 #ff0000（红色）。

Font-style

你可能使用过 或 （加粗）、（斜体）或 （过时的标签，用于设置文字样式）。为了避免使用这些 HTML 标签，我们可以通过 CSS 属性 font-style 实现相同的效果。例如：

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

这样我们用 font-style: italic; 替代了 标签。

font-style

Font-weight

在旧的 HTML 中，我们会使用 标签让文字加粗。现在，只需使用 font-weight 属性即可：

body {
  font-weight: normal; /* 普通字体 */
}
p {
  font-weight: 400; /* 普通字体 */
}
span {
  font-weight: 700; /* 加粗字体 */
}
a {
  font-weight: bold; /* 加粗字体 */
}

font-weight 属性常用的值有：400 或 normal 表示正常字体；700 或 bold 表示加粗字体。

CSS font-weight

Text-align

text-align 属性取代了 HTML 的 <center> 标签和 align 属性。用法如下：

body {
  text-align: left; /* 左对齐 */
}
p {
  text-align: justify; /* 两端对齐 */
}
span {
  text-align: right; /* 右对齐 */
}
div {
  text-align: center; /* 居中对齐 */
}

下面的图片清楚地展示了不同取值的效果：

CSS text-align

Text-decoration

以前我们使用 <strike>（删除线）或 （下划线）标签，现在可以使用 CSS 属性 text-decoration 来实现相同效果：

.underline {
  text-decoration: underline; /* 下划线 */
}
.line-through {
  text-decoration: line-through; /* 删除线 */
}

CSS text-decoration

Text-transform

另一个常用属性是 text-transform，它可以控制文本的大小写形式。例如，可以将所有字母变为大写或小写。

CSS text-transform

不必强迫自己一次性记住所有 CSS 属性。只要在实践中不断使用、反复查阅，你自然会掌握最常见和最重要的属性。其余的，可以在需要时随时查找。

额外区块类型 (EBT) - 全新的布局构建器体验❗

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验