欢迎关注路条编程的公众号，通过学习 CSS 层叠样式表基础知识这一系列文章，你将会逐步掌握 CSS 进行样式设置的基础知识。
今天我们要学习的内容是使用 RGB 值设置元素颜色样式。在前面文章中，我们介绍了十六进制颜色的使用。今天我们介绍 RGB 值设置元素颜色的方法。RGB 的 3 个参数分别对应 red，green，blue。它是红绿蓝三色在数值上的直观体现，取值范围为 0~255，也可以是 0%~100%，但要注意的是，数值和百分比不能混合使用，rgb(255, 0, 0 ) 换成百分比，需要写作 rgb(100%, 0%, 0%)，否则属于无效属性。使用 RGB 数字表示颜色时，不要像使用十六进制颜色那样使用六位十六进制数字。使用 RGB 时，可以用 0 到 255 之间的数字指定每种颜色的亮度。你可以算一下十六进制每种颜色的两个数字等于 16 乘以 16，我们得到 256 个总数值。RGB 从零开始计数，0 至 255 总数也是 256 个， 它与十六进制具有相同数量颜色值。下面是一个如何使用 RGB 值将 body 背景更改为橙色的示例。body {
background-color: rgb(255, 165, 0);
}
让我们将 body 元素背景色中的十六进制值替换为浅褐色的 RGB 值：rgb(255,248,220）。保存后，预览页面背景颜色，与设置的十六进制颜色没有变化。说明 RGB 值与十六进制颜色值相同。就像使用十六进制颜色一样，你可以通过使用不同值的组合在 RGB 中混合颜色。将页面样式元素中的十六进制颜色替换为对应的 RGB 值。使用下面示例中 RGB 值替换页面 style 部分元素中的十六进制颜色。
<style type="text/css">
#text-orange {
color: rgb(255,165,0);
}
.text-gold {
color: rgb(255,215,0);
}
.text-lime {
color: rgb(0,255,0) !important;
}
body {
background-color: rgb(255,248,220);
color: rgb(255,255,255);
}
</style>
代码调整后保存代码预览页面，与 “ CSS 层叠样式表基础知识：「17」通过十六进制颜色设置元素样式 ” 文章预览效果进行比较，页面效果没有变化。说明 RGB 值与十六进制颜色效果一致。
重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码加入学习社群，我们会尽力为你解答。
作者：路条编程（转载请获本公众号授权，并注明作者与出处）
