背景颜色
本课属于 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))。
挑战
简单给你一个 HTML 文档,其中包含一个标题(<h1>)、一个段落(<p>)和一个区块(<div>)。你的任务是使用 background-color 属性为这些元素设置样式。按照以下步骤操作:
- 编写一条针对
<h1>元素的 CSS 规则。将background-color设置为yellow。 - 编写一条针对
<p>元素的 CSS 规则。将background-color设置为#00FF00(绿色)。 - 编写一条针对
<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>这节课包含一个小测验。开始学习即可作答,并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习: Web 在线编辑器