可通过CSS的color和background-color属性设置文字与背景色,常用方法包括:预定义颜色名、十六进制值、RGB/HSL函数及currentColor关键字。

如果您需要在HTML5页面中调整元素的文字颜色或背景颜色,则可以通过CSS的color属性控制文本颜色,background-color属性控制背景颜色。以下是几种常用且有效的颜色设置方法:
一、使用预定义的颜色名称
CSS支持140多个标准颜色名称,如red、blue、green等,可直接赋值给color或background-color属性,语法简洁且易于记忆。
1、在
2、将background-color属性设为"lightblue",使容器背景呈现浅蓝色。
立即学习“前端免费学习笔记(深入)”;
3、保存HTML文件并在浏览器中刷新,观察文字或背景颜色是否按预期变化。
二、使用十六进制颜色值
十六进制颜色值以#开头,后接3位或6位0–9与a–f组成的字符,能精确表示1677万种颜色,是网页开发中最常用的格式。
1、为段落元素设置color: #ff6b35,使文字呈现橙红色。
2、对按钮元素应用background-color: #2ecc71,赋予其鲜绿色背景。
3、若使用简写形式(如#f63),确保每位数字重复一次以扩展为#ff6633等效值。
三、使用RGB函数表示法
RGB函数通过红(R)、绿(G)、蓝(B)三个通道的数值组合定义颜色,每个参数取值范围为0–255,支持透明度扩展为RGBA。
1、设置color: rgb(255, 91, 53),效果等同于#ff6b35。
2、为div元素指定background-color: rgb(46, 204, 113),生成与#2ecc71一致的绿色背景。
3、如需半透明效果,改用rgba(46, 204, 113, 0.7),其中第四个参数为alpha透明度(0为全透,1为不透)。
四、使用HSL函数表示法
HSL通过色相(Hue)、饱和度(Saturation)、亮度(Lightness)描述颜色,更符合人类对色彩的直观感知,便于系统性调整色调。
1、设定color: hsl(14, 100%, 60%),生成高饱和度的橘红色文字。
2、为导航栏设置background-color: hsl(144, 76%, 43%),获得饱满的青绿色背景。
3、仅修改H值可循环切换色相,例如hsl(0, 100%, 50%)为纯红,hsl(120, 100%, 50%)为纯绿,无需查表即可推导相邻色。
五、使用currentColor关键字
currentColor是一个动态关键字,其值等于元素当前color属性的计算值,可用于同步文字与边框、阴影等其他属性的颜色。
1、先为按钮设置color: #e74c3c,定义其文字颜色为深红色。
2、再为其添加border: 2px solid currentColor,使边框自动匹配文字颜色。
3、当通过JavaScript或媒体查询修改color时,所有引用currentColor的位置将同步更新。










