HEX 颜色
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 26 课,共 76 课。
十六进制颜色是一种使用十六进制值指定颜色的方式。十六进制颜色代码是一个六位代码,前面带有井号(#),用于表示组成颜色的红、绿、蓝光的量。
代码中的每对数字都表示其中一种原色的强度,范围从 00(无强度)到 FF(强度最高)。十六进制颜色提供了丰富的颜色选项,在网页设计中应用广泛。
以下是在 CSS 中使用十六进制颜色的基本语法:
selector {
color: #RRGGBB;
background-color: #RRGGBB;
}例如:
p {
color: #FF0000; /* 红色 */
background-color: #00FF00; /* 绿色 */
}当每对数字中的两个数字相同时,你也可以使用十六进制颜色的简写形式。例如:
p {
color: #F00; /* 红色(相当于 #FF0000) */
background-color: #0F0; /* 绿色(相当于 #00FF00) */
}挑战
简单给你一个 HTML 文档,其中包含两个标题(<h1> 和 <h2>)和一个段落(<p>)。你的任务是使用十六进制颜色代码设置背景颜色。请按以下步骤操作:
- 为
<h1>元素编写 CSS 规则。使用十六进制颜色#BF00FF,将背景颜色设置为电光紫。 - 为
<h2>元素编写 CSS 规则。使用#39FF14,将背景颜色设置为霓虹绿。 - 为所有
<p>元素编写 CSS 规则。使用#D3D3D3,将背景颜色设置为浅灰色。
亲手试试
<html>
<head>
<title>HEX Colors</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This heading has an electric purple background!</h1>
<h2>This heading has a neon green background.</h2>
<p>This paragraph has a light gray background.</p>
</body>
</html>这节课包含一个小测验。开始学习即可作答,并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习: Web 在线编辑器