Menu
CoddyTech

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) */
}
challenge icon

挑战

简单

给你一个 HTML 文档,其中包含两个标题(<h1> 和 <h2>)和一个段落(<p>)。你的任务是使用十六进制颜色代码设置背景颜色。请按以下步骤操作:

  1. 为 <h1> 元素编写 CSS 规则。使用十六进制颜色 #BF00FF,将背景颜色设置为电光紫。
  2. 为<h2>元素编写 CSS 规则。使用 #39FF14,将背景颜色设置为霓虹绿。
  3. 为所有 <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>
quiz icon自我测试

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

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

自己练习: Web 在线编辑器