CSS 教程 - 第 2 课 - 开始使用 CSS。CSS 属性 background、color。

10/10/2025, by Ivan

大家好。在上一课中，我创建了两个文件：html 和 css。以下是它们的代码：

index.html：

<html>
 <head>
  <title>CSS 教程</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <p>与 drupalbook.org 一起学习 CSS</p>
  <p>第 2 行：与 drupalbook.org 一起学习 CSS</p>
 </body>
</html>

style.css：

body{
  background: #eeeeee; /* 页面背景 */
  font-size: 14px;     /* 字体大小 */
}
p{
  color: #ff0000; /* 文本颜色 */
}

在本课中，我们将继续学习 CSS，为我们的模板添加色彩与风格。我们从已经为 body 设置过的 background 属性开始：

body{
  background: #eeeeee; /* 页面背景 */
  font-size: 14px;     /* 字体大小 */
}

如你所见，我们的页面现在有了灰色背景：

CSS

我们先来弄清楚 CSS 文件中的语法。所有 CSS 属性都从指示要应用属性的对象开始，例如 body、p、.class、#id。你可能注意到在选择器前面有时会出现点号或井号。点号用于指定一个或多个特定类的标签，而井号用于指定具有特定 id 的单个标签。下面举个例子说明：

<html>
 <head>
  <title>CSS 教程</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <div class="green">
    <p>与 drupalbook.org 一起学习 CSS</p>
  </div>
  <div id="blue">
    <p>第 2 行：与 drupalbook.org 一起学习 CSS</p>
  </div>
 </body>
</html>

我添加了两个块，一个带有类名 green，另一个带有 ID blue。现在为它们编写 CSS：

body{
  background: #eeeeee; /* 页面背景 */
  font-size: 14px;     /* 字体大小 */
}
 
.green{
  color: #00ff00; /* 文本颜色 */
} 
 
#blue{
  color: #0000ff; /* 文本颜色 */
}

CSS green color

如你所见，我在为 body 标签编写 CSS 时没有使用点号或井号。我们同样在为其他标签（如 p、span、ul、li 等）编写 CSS 时，也不使用这些符号。使用点号是为特定类编写 CSS，使用井号是为特定 id 编写 CSS。建议你记下这点，以免以后混淆：

点号（.） — 用于类

井号（#） — 用于 id

无符号 — 用于没有类或 id 的标签

在我们指定标签、类或 id 之后，就可以在花括号 {} 中编写 CSS 属性：

body{ /* 标签 */
   
}
 
.green{ /* 类 */
 
} 
 
#blue{ /* id */
 
}

正如你在我的 HTML 简短课程中所学，class 和 id 是 HTML 标签的通用属性，也就是说它们可以用于任何标签。通过这种方式，我们可以针对多个标签（如 p、span、li）设置不同的 CSS 样式。

现在，在花括号中我们就可以编写 CSS 属性。我们从最简单的属性 color 开始。color 定义文本颜色。我们先写属性名，然后用冒号加上属性值。对于 color 属性，我们既可以使用数字形式，也可以使用文字形式：

.green{
  color: #00ff00; /* 文本颜色 */
} 
 
#blue{
  color: #0000ff; /* 文本颜色 */
}
 
/* 类似地： */
 
.green{
  color: green; /* 文本颜色 */
} 
 
#blue{
  color: blue; /* 文本颜色 */ 
}

如果使用数字形式，即六位十六进制数，则在数值前加上井号。前两位表示红色的比例，中间两位表示绿色的比例，最后两位表示蓝色的比例。也就是使用了 RGB 模式（Red 红、Green 绿、Blue 蓝）。十六进制数不是从 0 到 9，而是从 0 到 F，其中在 9 之后是字母 A。我们可以使用 Photoshop 来选择十六进制颜色。点击取色器，然后在调色板中选择所需颜色：

colorpicker

现在你已经知道如何为 color 属性选择颜色，那么你同样可以为 background 属性选择颜色。让我们更改页面背景颜色，让文本更易读：

body{
  background: #fafafa; /* 页面背景 */
  color: #333; /* 页面上所有文本的颜色 */
}
 
.green{
   /* 文本颜色 */
} 
 
#blue{
   /* 文本颜色 */
}

当你编写多个 CSS 属性时，应使用分号来表示属性的结束。现在我们的页面变得更易阅读：

HTML CSS

我们再为某些地方添加绿色和蓝色：

index.html：

<html>
 <head>
  <title>CSS 教程</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <p><span id="blue">学习 CSS</span> 与 <span class="green">drupalbook.org</span> 一起</p>
  <p>第 2 行：学习 CSS 与 <span class="green">drupalbook.org</span> 一起</p>
 </body>
</html>

style.css：

body{
  background: #fafafa; /* 页面背景 */
  color: #333;
}
 
.green{
  color: #26e921; /* 文本颜色 */
} 
 
#blue{
  color: #0f15f3; /* 文本颜色 */
}

HTML CSS

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

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

CSS 教程 - 第 2 课 - 开始使用 CSS。CSS 属性 background、color。