Menu
CoddyTech

背景颜色

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 25 课,共 76 课。

在 CSS 中,background-color 属性用于设置 HTML 元素的背景颜色。此属性允许你指定颜色值。

以下是使用 background-color 属性的基本语法:

selector {
    background-color: color-value;
}

以下是在 CSS 中指定颜色值的几种常见方式:

  • 命名颜色:预定义的颜色名称,例如 red、blue、green、black、white 等。
  • 十六进制值: 以井号(#)开头的六位颜色代码,例如表示红色的 #FF0000。
  • RGB 值: 使用 rgb() 函数指定颜色的红色、绿色和蓝色分量,取值范围为 0 到 255,例如 rgb(255, 0, 0) 表示红色。

例如:

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

在这个示例中,<body> 元素的背景颜色被设置为 lightblue,所有 <h1> 标题都有红色背景(#FF0000),所有 <p>(段落)元素都有蓝色背景(rgb(0, 0, 255))。

challenge icon

挑战

简单

给你一个 HTML 文档,其中包含一个标题(<h1>)、一个段落(<p>)和一个区块(<div>)。你的任务是使用 background-color 属性为这些元素设置样式。按照以下步骤操作:

  1. 编写一条针对 <h1> 元素的 CSS 规则。将 background-color 设置为 yellow。
  2. 编写一条针对 <p> 元素的 CSS 规则。将 background-color 设置为 #00FF00(绿色)。
  3. 编写一条针对 <div> 元素的 CSS 规则。将 background-color 设置为 rgb(255, 0, 255)(洋红色)。

亲手试试

<html>
<head>
    <title>Background Color</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>
quiz icon自我测试

这节课包含一个小测验。开始学习即可作答,并记录你的进度。

使用 CSS 添加样式中的所有课

自己练习: Web 在线编辑器