CSS 文本

文本格式化

该文本使用某些文本格式属性来设置样式。标题使用 text-align、text-transform 和 color 属性。段落缩进、对齐，并指定了字符间距。可以试试如下代码：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid gray;
  padding: 8px;
}
h1 {
  text-align: center;
  text-transform: uppercase;
  color: #4CAF50;
}
p {
  text-indent: 50px;
  text-align: justify;
  letter-spacing: 3px;
}
a {
  text-decoration: none;
  color: #008CBA;
}
</style>
</head>
<body>
<div>
  <h1>文本格式化</h1>
  <p>该文本使用某些文本格式属性来设置样式。标题使用 text-align、text-transform 和 color 属性。段落缩进、对齐，并指定了字符间距。</p>
</div>
</body>
</html>

运行一下

文本颜色

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

颜色由以下值指定：

颜色名 - 比如 "red"
十六进制值 - 比如 "#ff0000"
RGB 值 - 比如 "rgb(255,0,0)"

查看更多 CSS 颜色值，以获取可能颜色值的完整列表。

页面的默认文本颜色是在 body 选择器中定义的。

实例

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}
h1 {
  color: green;
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<p>这是一段普通的段落。请注意文本为蓝色。页面的默认文本颜色在 body 选择器中定义。</p>
<p>另一段文本。</p>
</body>
</html>

运行一下

提示：如果您定义了 color 属性，则还必须定义 background-color 属性。

文本颜色和背景色

在本例中，我们定义了 background-color 属性和 color 属性：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightgrey;
  color: blue;
}
h1 {
  background-color: black;
  color: white;
}
</style>
</head>
<body>
<h1>此标题是带黑色背景的白色文本</h1>
<p>此页面有灰色背景和蓝色文本。</p>
<p>另一段文本。</p>
</body>
</html>

运行一下

深入学习 CSS 文本样式

通过这些链接，您可以继续学习有关 CSS 文本样式的对齐方式、文本装饰、文本转换、文本间距以及文本阴影的更多知识。

CSS 文本

文本格式化

文本颜色

实例

文本颜色和背景色

深入学习 CSS 文本样式

分类导航