freeCodeCamp 基础 CSS 实战用 RGB 值表示并混合元素颜色【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇指南基于 freeCodeCamp 响应式网页设计Responsive Web Design课程中 Basic CSS 模块的Use RGB values to Color Elements挑战文档完整讲解 CSS 中 RGB 颜色值的语法、取值范围及其与十六进制颜色码的数学等价关系。读完本篇你将能熟练使用rgb()函数为元素着色、完成 hex 到 RGB 的换算并理解 freeCodeCamp 课程如何用浏览器运行时断言和正则匹配来验证这类 CSS 练习。什么是 RGB 颜色值CSS 除了使用颜色关键字如black和十六进制代码hex code外还可以使用RGB值来表示颜色。RGB分别代表红色Red、绿色Green、蓝色Blue三个颜色分量每个分量用一个0 到 255之间的整数表示亮度黑色的 RGB 值rgb(0, 0, 0)—— 三个分量全部为 0即没有任何光线白色的 RGB 值rgb(255, 255, 255)—— 三个分量全部拉满即三种色光完全叠加。以把body背景设为橙色为例RGB 写法如下body { background-color: rgb(255, 165, 0); }这与rgb()函数的含义一致括号内按红, 绿, 蓝的顺序给出三个 0–255 的数值。橙色rgb(255, 165, 0)表示红色分量拉满、绿色分量取约三分之二、蓝色分量不发光。RGB 与十六进制的数值等价性原文档中给出了一个值得展开的数学说明十六进制中一个颜色分量用两位十六进制数字表示。两位十六进制数的组合数是 16 × 16 256 种取值而 RGB 从 0 开始计数到 255正好也是 256 个取值。因此 RGB 与 hex code 能表示的颜色数量完全相同。换句话说两者只是同一组 256 级灰度分量的两种记数法hex 用十六进制书写每位 0–FRGB 用十进制书写0–255。在 freeCodeCamp 的课程脉络里这一挑战正安排在三个十六进制挑战之后构成先学 hex、再学 RGB的递进关系Use Hex Code for Specific Colorscurriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aedf08726.md介绍十六进制是 16 进制数0–9对应十进制 0–9A–F对应 10–156 位十六进制数字按两位一组分别表示 R、G、B 分量如#000000即黑色Use Hex Code to Mix Colors与Use Abbreviated Hex Code练习用 hex 混合颜色及使用三位缩写本篇挑战Use RGB values to Color Elementscurriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aede08718.mdUse RGB to Mix Colorscurriculum/challenges/english/blocks/basic-css/bad82fee1348bd9aedf08721.md把一组 hex 值转换为对应的 RGB 值。这一挑战顺序在 curriculum/structure/blocks/basic-css.json 的challengeOrder数组中有明确记载而basic-css本身是响应式网页设计超级块中的第二个模块见 curriculum/structure/superblocks/responsive-web-design.json位于basic-html-and-html5之后。实战练习把 hex 换成 rgb该挑战的原始任务instructions是把body元素背景色中的十六进制代码替换为黑色的 RGB 值rgb(0, 0, 0)。挑战提供的初始代码seed如下style body { background-color: #F00; } /style#F00是三位缩写 hex展开即#FF0000——红色分量拉满、绿蓝为零。题目要求用十进制的 RGB 记法表达纯黑最终答案solutions为style body { background-color: rgb(0, 0, 0); } /style这个练习看似简单实际覆盖了两类能力一是rgb()函数的基本语法二是 hex 与 RGB 之间的换算——#F00中红色分量FF十六进制恰好等于十进制 255而纯黑则要求三个分量全部归零。课程如何验证你的答案从文档中的测试代码可以看到 freeCodeCamp 验证这道题的两层机制这对理解答案必须写成什么形式很有参考价值。第一层是运行时样式断言const body document.querySelector(body); const backgroundColor window.getComputedStyle(body)[background-color]; assert.strictEqual(backgroundColor, rgb(0, 0, 0));浏览器通过window.getComputedStyle()读取body的计算样式并要求background-color精确等于字符串rgb(0, 0, 0)。值得注意的是无论你在 CSS 中写#000、#000000还是rgb(0, 0, 0)浏览器计算样式序列化出的结果都是rgb(0, 0, 0)这一形式——这也从侧面说明了 hex 与 RGB 在浏览器内部是同一种颜色。第二层是源码正则匹配用于确认你确实使用了rgb记法而非仅靠结果相同蒙混过关assert.match(__helpers.removeCssComments(code), /rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi);这条正则要求代码在剥离 CSS 注释后中必须出现形如rgb(0, 0, 0)的写法且\s*允许数字和逗号周围存在任意空白——也就是说rgb(0,0,0)与rgb( 0 , 0 , 0 )都能通过。进阶用 RGB 混合颜色完成本篇挑战后课程的下一题Use RGB to Mix Colors会把 hex 转 RGB 的换算变成批量练习。其题目要求把一段style中的四个 hex 颜色替换为正确的 RGB 值并给出对照表颜色RGB 值Bluergb(0, 0, 255)Redrgb(255, 0, 0)Orchidrgb(218, 112, 214)Siennargb(160, 82, 45)其中三个单分量颜色纯红、纯蓝正好印证了单通道拉满的规律而 Orchid兰色与 Sienna赭色则是混合色每个通道各取 0–255 之间的中间值。该挑战的四个测试用例对.red-text、.orchid-text、.sienna-text、.blue-text分别断言color的计算值与源码正则完整地保留在 curriculum/challenges/english/blocks/basic-css/bad82fee1348bd9aedf08721.md 中可以对照阅读。小结CSS 颜色记法速查结合本挑战文档及其前后的课程材料可以整理出如下要点关键字background-color: black;等命名颜色适合常见颜色十六进制#RRGGBB六位或#RGB三位缩写每一位展开为两个相同数字如#F00→#FF0000每位是 16 进制RGB 函数rgb(r, g, b)三个参数为 0–255 的十进制整数顺序固定为红、绿、蓝等价关系一个 hex 分量的两位十六进制数16² 256 种与一个 RGB 分量0–255 共 256 个值取值空间完全一致如#FF 255、#00 0验证方式freeCodeCamp 的测试既用getComputedStyle校验浏览器实际渲染出的颜色又用正则强制要求源码中出现指定记法两者缺一不可。理解这套两种记数法、同一种颜色的机制后你在实际开发中选择 hex 还是 RGB 就纯粹是书写习惯与可读性问题而不是表达能力问题——这正是本篇挑战文档希望传达的核心结论。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 freeCodeCamp 基础 CSS 实战：用 RGB 值表示并混合元素颜色
freeCodeCamp 基础 CSS 实战用 RGB 值表示并混合元素颜色【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇指南基于 freeCodeCamp 响应式网页设计Responsive Web Design课程中 Basic CSS 模块的Use RGB values to Color Elements挑战文档完整讲解 CSS 中 RGB 颜色值的语法、取值范围及其与十六进制颜色码的数学等价关系。读完本篇你将能熟练使用rgb()函数为元素着色、完成 hex 到 RGB 的换算并理解 freeCodeCamp 课程如何用浏览器运行时断言和正则匹配来验证这类 CSS 练习。什么是 RGB 颜色值CSS 除了使用颜色关键字如black和十六进制代码hex code外还可以使用RGB值来表示颜色。RGB分别代表红色Red、绿色Green、蓝色Blue三个颜色分量每个分量用一个0 到 255之间的整数表示亮度黑色的 RGB 值rgb(0, 0, 0)—— 三个分量全部为 0即没有任何光线白色的 RGB 值rgb(255, 255, 255)—— 三个分量全部拉满即三种色光完全叠加。以把body背景设为橙色为例RGB 写法如下body { background-color: rgb(255, 165, 0); }这与rgb()函数的含义一致括号内按红, 绿, 蓝的顺序给出三个 0–255 的数值。橙色rgb(255, 165, 0)表示红色分量拉满、绿色分量取约三分之二、蓝色分量不发光。RGB 与十六进制的数值等价性原文档中给出了一个值得展开的数学说明十六进制中一个颜色分量用两位十六进制数字表示。两位十六进制数的组合数是 16 × 16 256 种取值而 RGB 从 0 开始计数到 255正好也是 256 个取值。因此 RGB 与 hex code 能表示的颜色数量完全相同。换句话说两者只是同一组 256 级灰度分量的两种记数法hex 用十六进制书写每位 0–FRGB 用十进制书写0–255。在 freeCodeCamp 的课程脉络里这一挑战正安排在三个十六进制挑战之后构成先学 hex、再学 RGB的递进关系Use Hex Code for Specific Colorscurriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aedf08726.md介绍十六进制是 16 进制数0–9对应十进制 0–9A–F对应 10–156 位十六进制数字按两位一组分别表示 R、G、B 分量如#000000即黑色Use Hex Code to Mix Colors与Use Abbreviated Hex Code练习用 hex 混合颜色及使用三位缩写本篇挑战Use RGB values to Color Elementscurriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aede08718.mdUse RGB to Mix Colorscurriculum/challenges/english/blocks/basic-css/bad82fee1348bd9aedf08721.md把一组 hex 值转换为对应的 RGB 值。这一挑战顺序在 curriculum/structure/blocks/basic-css.json 的challengeOrder数组中有明确记载而basic-css本身是响应式网页设计超级块中的第二个模块见 curriculum/structure/superblocks/responsive-web-design.json位于basic-html-and-html5之后。实战练习把 hex 换成 rgb该挑战的原始任务instructions是把body元素背景色中的十六进制代码替换为黑色的 RGB 值rgb(0, 0, 0)。挑战提供的初始代码seed如下style body { background-color: #F00; } /style#F00是三位缩写 hex展开即#FF0000——红色分量拉满、绿蓝为零。题目要求用十进制的 RGB 记法表达纯黑最终答案solutions为style body { background-color: rgb(0, 0, 0); } /style这个练习看似简单实际覆盖了两类能力一是rgb()函数的基本语法二是 hex 与 RGB 之间的换算——#F00中红色分量FF十六进制恰好等于十进制 255而纯黑则要求三个分量全部归零。课程如何验证你的答案从文档中的测试代码可以看到 freeCodeCamp 验证这道题的两层机制这对理解答案必须写成什么形式很有参考价值。第一层是运行时样式断言const body document.querySelector(body); const backgroundColor window.getComputedStyle(body)[background-color]; assert.strictEqual(backgroundColor, rgb(0, 0, 0));浏览器通过window.getComputedStyle()读取body的计算样式并要求background-color精确等于字符串rgb(0, 0, 0)。值得注意的是无论你在 CSS 中写#000、#000000还是rgb(0, 0, 0)浏览器计算样式序列化出的结果都是rgb(0, 0, 0)这一形式——这也从侧面说明了 hex 与 RGB 在浏览器内部是同一种颜色。第二层是源码正则匹配用于确认你确实使用了rgb记法而非仅靠结果相同蒙混过关assert.match(__helpers.removeCssComments(code), /rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi);这条正则要求代码在剥离 CSS 注释后中必须出现形如rgb(0, 0, 0)的写法且\s*允许数字和逗号周围存在任意空白——也就是说rgb(0,0,0)与rgb( 0 , 0 , 0 )都能通过。进阶用 RGB 混合颜色完成本篇挑战后课程的下一题Use RGB to Mix Colors会把 hex 转 RGB 的换算变成批量练习。其题目要求把一段style中的四个 hex 颜色替换为正确的 RGB 值并给出对照表颜色RGB 值Bluergb(0, 0, 255)Redrgb(255, 0, 0)Orchidrgb(218, 112, 214)Siennargb(160, 82, 45)其中三个单分量颜色纯红、纯蓝正好印证了单通道拉满的规律而 Orchid兰色与 Sienna赭色则是混合色每个通道各取 0–255 之间的中间值。该挑战的四个测试用例对.red-text、.orchid-text、.sienna-text、.blue-text分别断言color的计算值与源码正则完整地保留在 curriculum/challenges/english/blocks/basic-css/bad82fee1348bd9aedf08721.md 中可以对照阅读。小结CSS 颜色记法速查结合本挑战文档及其前后的课程材料可以整理出如下要点关键字background-color: black;等命名颜色适合常见颜色十六进制#RRGGBB六位或#RGB三位缩写每一位展开为两个相同数字如#F00→#FF0000每位是 16 进制RGB 函数rgb(r, g, b)三个参数为 0–255 的十进制整数顺序固定为红、绿、蓝等价关系一个 hex 分量的两位十六进制数16² 256 种与一个 RGB 分量0–255 共 256 个值取值空间完全一致如#FF 255、#00 0验证方式freeCodeCamp 的测试既用getComputedStyle校验浏览器实际渲染出的颜色又用正则强制要求源码中出现指定记法两者缺一不可。理解这套两种记数法、同一种颜色的机制后你在实际开发中选择 hex 还是 RGB 就纯粹是书写习惯与可读性问题而不是表达能力问题——这正是本篇挑战文档希望传达的核心结论。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考