HTML字体颜色：3种实用写法+避坑技巧-敬慕百科

修改HTML字体颜色，根本不用死记复杂代码，掌握三种主流写法就能搞定网页99%的文字配色需求，新手最容易踩的坑其实不是代码写错，而是颜色格式不统一导致页面配色错乱。你有没有遇过本地调试文字颜色正常，上线后却莫名变色的情况？

网页里的文字颜色，核心都是通过CSS样式控制，HTML本身只是承载文字内容，所有变色效果都依赖样式规则实现。很多新手会混淆原生标签和CSS样式，习惯性用老旧的font标签改色，这也是网页代码冗余、样式冲突的主要根源。

别再用过时的改色方式

早期HTML有个font标签，专门用来设置字体颜色、大小，写法简单但早已被淘汰。我刚学前端的时候，整页代码全是，当时觉得省事，直到一次项目迭代，导师让优化代码，我统计出页面里有47处零散的font颜色标签，统一修改主题色时足足改了半小时。

很浪费时间。

这也是现在所有开发规范都禁止使用font标签的原因，它属于废弃语法，兼容性差、无法统一管理样式，现代网页开发完全可以直接舍弃。

目前靠谱、通用、适配所有浏览器的字体改色方式，都是CSS写法，分为关键词、十六进制、RGB三种，适配不同的使用场景。

颜色关键词写法：最简单的入门写法，直接用英文颜色单词赋值，比如red、black、blue。代码格式为style="color: 颜色词;"，适合临时调试、简单页面配色。缺点是自带颜色只有一百多种，色调单一，满足不了精致的网页设计需求。
十六进制写法：开发最常用的主流写法，由#加6位数字字母组合而成，比如#FFFFFF代表白色、#000000代表黑色。这种写法色值精准、全网通用，设计师给到的配色方案基本都是十六进制色值，适配所有正式项目，几乎没有兼容性问题。
RGB写法：灵活度最高的写法，通过红、绿、蓝三原色数值配比调色，格式为rgb(红,绿,蓝)，数值区间0-255。还能延伸出RGBA格式，多一个透明度参数，想要文字透明、渐变叠加效果，只能靠RGB实现。

三种写法效果互通，只是精准度和灵活性不同，日常开发优先用十六进制，需要特殊效果再换RGB。

很多人改色没效果，问题根本不在代码，在细节疏漏。最常见的错误是拼写失误，color千万不要写成colour，HTML样式只认美式拼写，哪怕只差一个字母，配色代码会直接失效。

还有一个隐形坑：样式优先级冲突。如果同一个文字，既在标签内写了行内颜色，又在头部写了全局样式，页面会优先执行行内样式，全局样式直接失效。我之前帮人改bug，折腾十几分钟没找到问题，最后才发现页面嵌套了三层样式，外层配色被内层高优先级样式直接覆盖。

优先级很关键。

另外要注意，字体颜色代码只对文字内容生效，无法修改图片、背景、按钮底色，不要混淆color和background-color两个属性。

不管是段落、标题、按钮文字，所有文本标签都能套用统一格式，直接复制就能用。行内样式直接给标签添加style属性，比如

文字内容

，一行代码搞定改色。

如果是整页统一配色，不用逐个标签修改，直接在页面头部style标签里写全局样式，选中对应标签统一设置color色值，一次修改、全站生效，大幅精简代码。

日常写代码，优先用全局样式统一配色，局部特殊文字再用行内样式微调，既能保证页面风格统一，又能灵活处理个性化配色。