刚学HTML的时候几乎每个人都干过一件事兴致勃勃写了个标题然后想把它变成红色结果发现不管怎么折腾网页上的字都像没听见一样。后来翻旧教程有人告诉你用font colorred也有人告诉你直接写stylecolor:red还有人扔过来一堆看不懂的CSS文件。到底哪个对这篇文章就围绕一个最简单的需求——在HTML中更改文本颜色把这几条路全部捋清楚顺带把颜色值、优先级、调试技巧这些容易卡壳的点一起讲了。不管你是刚打开记事本写第一行HTML的新手还是已经能套模板但总是调不明白颜色的小白看完应该都能直接上手。1. 先搞清楚一个问题改文本颜色到底归谁管很多人一开始都会走弯路是因为没弄明白HTML和CSS的分工。改颜色这个需求听起来是“在HTML里改”但实际上它属于CSS的职责范围。这个观念如果没建立起来后面学得越深越容易被各种历史遗留写法绕晕。1.1 从font colorred说起早期的HTML里确实有一个专门的font标签可以给文字指定颜色、字体和大小比如font colorred这段文字是红色的/font这种写法在HTML 3.2时代很常见你看那些十多年前的老网页经常能看到满屏的font标签。但到了HTML5font就被正式废弃了。原因说穿了很简单HTML的本职工作是描述“这是什么”——标题、段落、链接、图片而不是“它长什么样”。颜色、大小、间距这些视觉样式理应由CSS来负责。如果每个HTML标签都堆一堆外观属性页面会变得又臭又乱想改个全局颜色得满文件翻。这个“结构”和“表现”分离的思路是整个现代前端开发的基石。明白了这一点你就能理解为什么下面所有改颜色的方案都跟CSS有关而不是再往HTML标签里塞color属性。所以你如果看到某些老教程还在教你用font标签可以直接关掉那套东西拿到今天不仅不标准还可能没法通过代码审查。1.2 一个完整HTML文件的基本骨架在动手之前先准备一个最基本、规范的HTML文件。无论后面用哪种方式改颜色都离不开这个骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML中更改文本颜色示例/title /head body h1这是一个主标题/h1 p这是一个段落里面包含一段普通文字。/p p这里有span一行特殊文字/span需要单独上色。/p a href#这是一个链接/a /body /html这里要专门说明一下!DOCTYPE html告诉浏览器用现代标准模式解析页面charsetUTF-8保证中文不乱码langzh-CN声明页面语言。很多人可能在网上见过这类被搜索引擎收录的代码片段!doctype htmlhtml langzh-cnheadmeta charsetutf-8...就是页面开头的这一串。它们跟改颜色没有直接关系但写规范了能避免后面一堆莫名其妙的编码和渲染问题。在这个骨架里有两个p段落我特意在其中一段里面放了一个span标签因为“把一行文字里的某几个字换个颜色”是实际开发中非常常见的需求后面会演示怎么处理。准备好了骨架就可以正式进入改颜色的环节了。2. 三种改文本颜色的写法分别用在什么场景改文本颜色本质上就是给目标元素设置CSS的color属性。CSS代码放在哪里决定了你用的是哪一种写法。常见的就三种内联样式、内部样式表、外部样式表。我挨个写同时说清楚每种方法适合什么场景免得你以后只会抄不会选。2.1 内联样式写在标签的style属性里最简单粗暴的办法就是直接在标签上加style属性里面写colorh1 stylecolor: darkred;这是一个深红色的主标题/h1style属性里面写的是CSS声明格式是属性名: 属性值;。如果还想改字号、加粗就继续往后写用分号隔开p stylecolor: #2a7ae2; font-size: 18px;蓝色加大的段落/p内联样式的优点是肉眼可见、即时生效而且不会影响页面上其他元素。但缺点同样明显样式和结构混在一起改一个地方就得翻一次HTML如果多个页面都要用同样的颜色得复制粘贴好多遍后期维护起来非常痛苦。所以我的经验是内联样式只适合三种场景一是临时调试快速看某个颜色的效果二是写HTML邮件模板因为很多邮件客户端尤其是老牌的Outlook不认外部样式表只认内联样式三是后端动态渲染某些特殊场景里的个别元素时实在没空抽CSS。正常做网页不建议用它。2.2 内部样式表把CSS写在style标签里把整个页面的CSS集中放到head里的style标签中这是第二种写法也是我建议新手重点掌握的方式!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTML中更改文本颜色-内部样式/title style h1 { color: darkred; } p { color: #333333; } .highlight { color: green; } a { color: #1a0dab; } /style /head body h1深红色主标题/h1 p深灰色正文/p p这里是普通文字里面夹着span classhighlight一段绿色文字/span。/p a href#蓝色链接/a /body /html这里出现了几个不同的选择器h1、p是标签选择器直接选中页面里所有对应标签.highlight是类选择器选中所有带classhighlight的元素。用类选择器给span单独上色就是前面说的“一行文字里夹着几个字要换个颜色”的标准解法。这样写的好处是页面里所有h1、p、a的样式都集中在style块里想改一个颜色打开这个块改一次就全页生效不用挨个标签去改。这也是它比内联样式强的地方——第一次让你体会到“结构和样式分离”的甜头。内部样式表的适用场景一般是单页应用、后台管理系统的某个独立页面或者写Demo做演示时。它的特点是“这个CSS只属于这个页面”不需要被其他页面复用。如果是一个多页面网站内部样式表的短板就暴露出来了每个页面都要复制一份同样的CSS代码改一个全局颜色得把所有页面的style都改一遍这时候就该上外部样式表了。2.3 外部样式表项目里最推荐的做法第三种也是真正工程上天天在用的做法把CSS单独保存成一个.css文件再用link标签引入到HTML里。假设你在项目目录下建了一个style.css文件内容如下h1 { color: darkred; } p { color: #333333; } .highlight { color: green; } a { color: #1a0dab; }然后在HTML的head部分引入它!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTML中更改文本颜色-外部样式/title link relstylesheet hrefstyle.css /head body h1深红色主标题/h1 p深灰色正文/p p这里是普通文字里面夹着span classhighlight一段绿色文字/span。/p a href#蓝色链接/a /body /html效果跟内部样式表完全一样但样式逻辑已经独立出去了。一个网站几十个页面全都可以共用一个style.css哪天品牌色要从绿换成蓝只改一个文件全站瞬间更新。多人协作时做页面结构的写HTML管样式的写CSS互不打架。这就是外部样式表成为中大型项目标配的原因。另外多说一句现在主流的前端构建工具比如Vite、Webpack内部也是把CSS模块化打包后最终以类似link的方式加载本质上还是这条路只是自动化了。所以你在那些热门搜索词里看到的“html css网页制作成品”“html css js网页设计”如果是一个正经的多页面站点样式基本都是外部引用的方式组织的。2.4 优先级排序和我的选型建议新手最懵的往往是内联样式、内部样式、外部样式表都写了同一个颜色页面到底听谁的规则其实很简单内联样式style属性优先级最高内部样式表和外部样式表优先级相同谁更靠后出现谁的规则生效如果某个规则后面加了!important它优先于上面的所有普通声明。举例说明。如果我在head里同时写了style和link两个里面都有h1 { color: red; }和h1 { color: blue; }那么浏览器会按它们在文档里的先后顺序取最后一个。如果你在HTML的style属性里写了color: green那无论CSS文件里写什么都赢不过内联样式除非CSS文件里带了!important。这里我要特别提醒!important属于很霸道的工具滥用会让样式变得极难维护我一般只在覆盖第三方组件库样式、且实在没有别的选择时才碰它。新手遇到“改不动”的情况第一时间不应该想“加个!important强行覆盖”而是应该去查优先级和选择器命中问题这才能从根上解决问题。选型建议很简单做页面Demo或者刚学习用内部样式表最直观做正式项目从第一天起就用外部样式表内联样式能不用就不用它只配活在调试工具和邮件模板里。3. 颜色值你写对了吗从red到rgba(255, 0, 0, 0.5)放CSS的地方搞定了接下来就要填颜色值。颜色值的写法有好几种长得完全不一样但能表达出同一个颜色。很多新手会在这里卡住一是不明白这些写法之间的关系二是不知道该选哪种。这一节我把它们全部拆开讲透。3.1 颜色关键字最简单但不一定够用CSS里有一组预定义的颜色关键字直接写名字就行基础色red、blue、green、black、white、yellow、gray扩展色名darkred、steelblue、tomato、gold、mediumspringgreen等等现代浏览器支持148个标准颜色关键字从HTML4时代的16个基础色到后来CSS Color Module Level 4加入的rebeccapurple都有对应的十六进制值。大家可以去MDN查完整列表。颜色关键字的优点就是写起来快、好读非常适合初学者和临时调试。比如你要快速验证某个文字是不是变红了写color: red无疑是最快的。但它的缺点也很明显一是表达不精确你想要那种“介于蓝和紫之间的高级灰蓝”靠名字很难描述二是不方便做明暗和透明度的变化比如red就是纯红你想来一个“淡一点的红”关键字就帮不上忙了。所以我建议正式项目里颜色关键字只用来写white、black这类极端值中间色调尽量用数值写法这样可以精确地还原设计稿上的每一个颜色。3.2 十六进制HEX工程里最常见的格式十六进制写法用一个#开头后面跟6位十六进制数字每两位分别表示红、绿、蓝三个通道的亮度范围从00最暗到FF最亮。#ff0000就是红色ff对应红通道拉满另外两个通道为0#00ff00是绿色#0000ff是蓝色#000000是黑色#ffffff是白色。如果想写一个“柔和一点的正红”可以把亮度往下调比如#e60023、#dc3545看起来比纯红稳重得多。怎么推算把十六进制转成十进制看e6是230dc是220比255暗一点饱和度就低了视觉上就会柔和一些。如果每两位成对出现比如#336699还可以缩写成三位#369浏览器会自动展开成#336699。这个缩写功能在写Demo时很方便少打三个字符。现在还有一个很实用的写法叫8位HEX在六位后面再加两位十六进制表示透明度。比如#dc354580最后的80代表大约50%的透明度00是完全透明FF是完全不透明。这个语法在CSS Color Module Level 4里已经标准化现代浏览器都支持用来做半透明文字非常方便不需要额外写opacity属性影响整个元素。3.3 RGB和RGBA更符合“三原色”直觉如果觉得十六进制不够直观可以用rgb()函数。它的三个参数分别对应红、绿、蓝通道取值0到255color: rgb(255, 0, 0); /* 红色 */ color: rgb(0, 0, 0); /* 黑色 */ color: rgb(255, 255, 255); /* 白色 */ color: rgb(220, 53, 69); /* 对应 #dc3545 的红色 */其实HEX和RGB就是一回事只是进制不一样。#dc3545拆开看dc22035534569写成rgb(220, 53, 69)完全等价。你可以把HEX当成是RGB的“压缩写法”。需要透明度时用rgba()第四个参数取值0到10是完全透明1是完全不透明color: rgba(220, 53, 69, 0.5); /* 半透明红文字 */ color: rgba(0, 0, 0, 0.85); /* 接近黑色的深色文字常用于遮罩层 */现在新版CSS规范里rgb()和rgba()已经合并你写rgb(220 53 69 / 50%)这种空格加斜杠的现代语法也行。但为了兼容旧代码和大多数教程习惯我一直按传统写法讲。等你在团队里跟别人协作时再根据规范统一采用新语法也不迟。3.4 HSL和HSLA靠手感就能调色HSL是另一套色彩模型对“我想让这个颜色再亮一点、再灰一点”这种需求非常友好。三个字母分别表示HHue色相0到360度的色环角度0度和360度是红色120度是绿色240度是蓝色SSaturation饱和度百分比0%是灰色100%是颜色最鲜艳的状态LLightness明度百分比0%是黑色100%是白色50%是正常亮度。举个例子color: hsl(0, 100%, 50%); /* 纯红 */ color: hsl(0, 0%, 0%); /* 黑色 */ color: hsl(0, 0%, 100%); /* 白色 */ color: hsl(0, 80%, 50%); /* 饱和度稍低一点的红更柔和 */ color: hsl(210, 50%, 60%); /* 一种舒服的天蓝 */hsla()就是再加一个透明度参数0到1color: hsla(210, 50%, 60%, 0.6);对我这种不是专业设计师的开发者来说HSL有个巨大的好处当设计稿给出的红色太刺眼我只需要把S从100%改成80%或者把L从50%改成55%纯靠直觉就能调出想要的颜色不用在脑子里做十六进制换算。而如果用的是HEX那就只能来回试色效率低得多。3.5 那么多写法到底用哪个我的建议很实际初学阶段颜色关键字加HEX足够完成所有练习对接设计稿用HEX因为设计师给的规范几乎都是#RRGGBB格式复制粘贴最不容易出错需要透明度优先用rgba()或8位HEX自己从零调色、做主题换肤用HSL体验非常顺滑。团队项目里最后一定要在样式表中统一一种写法不要今天HEX明天RGB不然维护起来容易乱。更进一步的做法是建一个CSS变量文件把系统里所有颜色集中管理这也是后面第4节要展开讲的内容。4. 实战中我踩过的坑颜色改了不生效的完整排查链路色值写对了代码也放进去了结果打开浏览器一看颜色没变。这种事我当年被坑过无数次而且每次原因都不一样。这里我把完整的排查链路整理出来按照这个顺序查95%的问题都能解决。4.1 第一步确认是不是HTML/CSS基础结构写错了最常见的低级错误是把style标签写到了body里面或者link的href路径写错了。浏览器解析这些有一定宽容度有些错误不会直接报错但样式就是不出效果。修正方法很简单在浏览器里按F12打开开发者工具切到Elements面板选中那个没变色的元素右侧Styles区域如果能看到你写的规则但被划掉或者没作用上说明文件结构没问题如果整个Styles区域是空的那就要去检查HTML里style或link的位置和路径。路径这块特别容易踩坑。写link relstylesheet hrefstyle.css时style.css跟你当前的HTML文件必须在同一个目录下如果CSS放在子目录比如css/style.css那href也得相应写成css/style.css。很多新手直接在编辑器里复制了代码目录结构没对上颜色自然出不来。另外确认一下文件保存编码。中文页面如果charsetUTF-8没写对文字会乱码颜色自然也别提能按照预期显示。VS Code右下角可以查看当前文件编码统一改成UTF-8就好。4.2 第二步查CSS优先级和覆盖关系样式写了但没生效十有八九是优先级问题。前面说过内联样式优先级高于内部/外部样式表!important又高于一切。还有一种典型情况你在全局样式里写了p { color: #333; }后来又写了个.highlight { color: green; }但.highlight出现在p后面那么这两条规则哪个赢答案是看具体的选择器。.highlight是类选择器p是标签选择器类选择器的优先级更高所以green会赢。CSS的优先级计算规则是!important 内联样式 ID选择器 类选择器/属性选择器/伪类 元素选择器/伪元素 通配符。相同优先级时看谁在样式表里更靠后。判断方法还是用开发者工具。选中元素后看Styles面板被覆盖的声明一般会显示带删除线。点开被划掉的规则还能看到它被哪个文件的第几行覆盖了。顺着这个线索去改就好不要靠猜。这里有个新手特别容易踩的坑想给链接改颜色写了a { color: red; }但打开页面发现链接还是默认的蓝色。原因就在于浏览器自带的用户代理样式表对a有默认颜色设置而你写的a选择器如果优先级不够就会被默认样式压住。真正保险的写法是把状态都覆盖一遍a { color: red; text-decoration: none; } a:visited { color: red; } a:hover { color: darkred; }a:visited这个伪类很容易被忽略。如果你只写了a { color: red; }访问过的链接在浏览器里可能还是默认的紫色就是因为:visited伪类的默认样式优先级更高。把链接相关的几个状态都统一控制才能避免“颜色改了好像又没改”的迷惑现象。4.3 第三步确认颜色值真的合法颜色值写错也是高频问题。常见几类少了#写成ff0000浏览器不认识应该写#ff0000十六进制位数不对写了#ff0还算合法相当于#ffff00但写成#ff00就直接不合法了RGB超出范围rgb(300, 0, 0)会被浏览器裁剪到255看起来“写了”但得不到预期色颜色关键字拼错比如把rebeccapurple拼成rebeccapurpel浏览器不认。遇到这种情况开发者工具里元素颜色会显示一个空的方块或提示无效值。逐个改回合法格式即可。工具方面我习惯在VS Code里安装CSS颜色预览插件鼠标移到色值上就能看到色块预览和设计稿的颜色一比马上就知道对不对。4.4 第四步别忘了继承和默认行为CSS的color属性是可继承的父元素设置了颜色子元素默认会跟着用同一个颜色。但有几个例外需要注意a链接有自己的默认样式不会自动继承父级颜色必须单独设置button、input等表单控件在很多浏览器里也有自己的默认颜色和字体最好显式重置::placeholder这类伪元素比如input::placeholder { color: #999; }得单独写改了input本身的color不一定能影响提示文字。排查继承问题可以用开发者工具的Computed面板选中元素后往下拉能看到color属性是从哪一层选择器继承来的来源一清二楚。这个面板对初学者来说特别有用因为它把“最终生效的样式”直接列出来了不用自己一层层去推断。4.5 第五步暗色模式与CSS变量颜色管理的进阶玩法当你开始做主题换肤或暗色模式时会发现“改文本颜色”这件事不再只是简单的赋值。现在推荐用CSS变量把颜色集中管理再通过媒体查询根据系统偏好整体切换。这样一套写法能让整个页面的文字颜色自动跟随系统暗色模式:root { --text-primary: #222222; --text-secondary: #666666; } body { color: var(--text-primary); } media (prefers-color-scheme: dark) { :root { --text-primary: #f5f5f5; --text-secondary: #aaaaaa; } }用变量以后日常开发里几乎不会再手写具体的颜色值而是写var(--text-primary)这种语义化名称。后续换肤只需要改:root里的变量定义页面所有用到这个变量的文字颜色会一起变省心很多。这个方案的坑在于CSS变量是运行时特性如果用户的浏览器比较旧不支持var()那么color: var(--text-primary)会被当成无效声明丢弃文字会回退到浏览器默认的黑色。解决办法是写兜底值body { color: #222222; color: var(--text-primary); }先写一个所有浏览器都能识别的具体颜色兜底再写变量。老浏览器不认var()时自动使用前面的具体值页面不至于完全失控。还有一个经验是暗色模式下的文字不要用纯黑色#000000也别用纯白色#ffffff。纯黑配纯白的对比度太生硬长时间看很刺眼。我一般会用#f5f5f5、#e9ecef这类偏灰白的颜色做暗色模式文字观感柔和得多。到这里从“哪种写法放CSS”到“颜色值怎么选”再到“不生效怎么排查”整条链路就通了。说实话改文本颜色是HTML/CSS入门路上最简单也最典型的一个需求但把这么一件小事做规范后面学盒模型、布局、响应式时基础会比别人扎实很多。最后再分享一个小习惯我每次写页面只要是正式项目都会先建一个variables.css把颜色、间距、字体统一收好再开始写业务样式。前期多花十分钟后期改起色来真的是能省出半小时起步。希望这篇对你有用调色顺利。 
长河君 · 2026/10/2 5:27:50 · 阅读 1.2k HTML中更改文本颜色的方法：CSS样式与优先级全解析
刚学HTML的时候几乎每个人都干过一件事兴致勃勃写了个标题然后想把它变成红色结果发现不管怎么折腾网页上的字都像没听见一样。后来翻旧教程有人告诉你用font colorred也有人告诉你直接写stylecolor:red还有人扔过来一堆看不懂的CSS文件。到底哪个对这篇文章就围绕一个最简单的需求——在HTML中更改文本颜色把这几条路全部捋清楚顺带把颜色值、优先级、调试技巧这些容易卡壳的点一起讲了。不管你是刚打开记事本写第一行HTML的新手还是已经能套模板但总是调不明白颜色的小白看完应该都能直接上手。1. 先搞清楚一个问题改文本颜色到底归谁管很多人一开始都会走弯路是因为没弄明白HTML和CSS的分工。改颜色这个需求听起来是“在HTML里改”但实际上它属于CSS的职责范围。这个观念如果没建立起来后面学得越深越容易被各种历史遗留写法绕晕。1.1 从font colorred说起早期的HTML里确实有一个专门的font标签可以给文字指定颜色、字体和大小比如font colorred这段文字是红色的/font这种写法在HTML 3.2时代很常见你看那些十多年前的老网页经常能看到满屏的font标签。但到了HTML5font就被正式废弃了。原因说穿了很简单HTML的本职工作是描述“这是什么”——标题、段落、链接、图片而不是“它长什么样”。颜色、大小、间距这些视觉样式理应由CSS来负责。如果每个HTML标签都堆一堆外观属性页面会变得又臭又乱想改个全局颜色得满文件翻。这个“结构”和“表现”分离的思路是整个现代前端开发的基石。明白了这一点你就能理解为什么下面所有改颜色的方案都跟CSS有关而不是再往HTML标签里塞color属性。所以你如果看到某些老教程还在教你用font标签可以直接关掉那套东西拿到今天不仅不标准还可能没法通过代码审查。1.2 一个完整HTML文件的基本骨架在动手之前先准备一个最基本、规范的HTML文件。无论后面用哪种方式改颜色都离不开这个骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML中更改文本颜色示例/title /head body h1这是一个主标题/h1 p这是一个段落里面包含一段普通文字。/p p这里有span一行特殊文字/span需要单独上色。/p a href#这是一个链接/a /body /html这里要专门说明一下!DOCTYPE html告诉浏览器用现代标准模式解析页面charsetUTF-8保证中文不乱码langzh-CN声明页面语言。很多人可能在网上见过这类被搜索引擎收录的代码片段!doctype htmlhtml langzh-cnheadmeta charsetutf-8...就是页面开头的这一串。它们跟改颜色没有直接关系但写规范了能避免后面一堆莫名其妙的编码和渲染问题。在这个骨架里有两个p段落我特意在其中一段里面放了一个span标签因为“把一行文字里的某几个字换个颜色”是实际开发中非常常见的需求后面会演示怎么处理。准备好了骨架就可以正式进入改颜色的环节了。2. 三种改文本颜色的写法分别用在什么场景改文本颜色本质上就是给目标元素设置CSS的color属性。CSS代码放在哪里决定了你用的是哪一种写法。常见的就三种内联样式、内部样式表、外部样式表。我挨个写同时说清楚每种方法适合什么场景免得你以后只会抄不会选。2.1 内联样式写在标签的style属性里最简单粗暴的办法就是直接在标签上加style属性里面写colorh1 stylecolor: darkred;这是一个深红色的主标题/h1style属性里面写的是CSS声明格式是属性名: 属性值;。如果还想改字号、加粗就继续往后写用分号隔开p stylecolor: #2a7ae2; font-size: 18px;蓝色加大的段落/p内联样式的优点是肉眼可见、即时生效而且不会影响页面上其他元素。但缺点同样明显样式和结构混在一起改一个地方就得翻一次HTML如果多个页面都要用同样的颜色得复制粘贴好多遍后期维护起来非常痛苦。所以我的经验是内联样式只适合三种场景一是临时调试快速看某个颜色的效果二是写HTML邮件模板因为很多邮件客户端尤其是老牌的Outlook不认外部样式表只认内联样式三是后端动态渲染某些特殊场景里的个别元素时实在没空抽CSS。正常做网页不建议用它。2.2 内部样式表把CSS写在style标签里把整个页面的CSS集中放到head里的style标签中这是第二种写法也是我建议新手重点掌握的方式!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTML中更改文本颜色-内部样式/title style h1 { color: darkred; } p { color: #333333; } .highlight { color: green; } a { color: #1a0dab; } /style /head body h1深红色主标题/h1 p深灰色正文/p p这里是普通文字里面夹着span classhighlight一段绿色文字/span。/p a href#蓝色链接/a /body /html这里出现了几个不同的选择器h1、p是标签选择器直接选中页面里所有对应标签.highlight是类选择器选中所有带classhighlight的元素。用类选择器给span单独上色就是前面说的“一行文字里夹着几个字要换个颜色”的标准解法。这样写的好处是页面里所有h1、p、a的样式都集中在style块里想改一个颜色打开这个块改一次就全页生效不用挨个标签去改。这也是它比内联样式强的地方——第一次让你体会到“结构和样式分离”的甜头。内部样式表的适用场景一般是单页应用、后台管理系统的某个独立页面或者写Demo做演示时。它的特点是“这个CSS只属于这个页面”不需要被其他页面复用。如果是一个多页面网站内部样式表的短板就暴露出来了每个页面都要复制一份同样的CSS代码改一个全局颜色得把所有页面的style都改一遍这时候就该上外部样式表了。2.3 外部样式表项目里最推荐的做法第三种也是真正工程上天天在用的做法把CSS单独保存成一个.css文件再用link标签引入到HTML里。假设你在项目目录下建了一个style.css文件内容如下h1 { color: darkred; } p { color: #333333; } .highlight { color: green; } a { color: #1a0dab; }然后在HTML的head部分引入它!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTML中更改文本颜色-外部样式/title link relstylesheet hrefstyle.css /head body h1深红色主标题/h1 p深灰色正文/p p这里是普通文字里面夹着span classhighlight一段绿色文字/span。/p a href#蓝色链接/a /body /html效果跟内部样式表完全一样但样式逻辑已经独立出去了。一个网站几十个页面全都可以共用一个style.css哪天品牌色要从绿换成蓝只改一个文件全站瞬间更新。多人协作时做页面结构的写HTML管样式的写CSS互不打架。这就是外部样式表成为中大型项目标配的原因。另外多说一句现在主流的前端构建工具比如Vite、Webpack内部也是把CSS模块化打包后最终以类似link的方式加载本质上还是这条路只是自动化了。所以你在那些热门搜索词里看到的“html css网页制作成品”“html css js网页设计”如果是一个正经的多页面站点样式基本都是外部引用的方式组织的。2.4 优先级排序和我的选型建议新手最懵的往往是内联样式、内部样式、外部样式表都写了同一个颜色页面到底听谁的规则其实很简单内联样式style属性优先级最高内部样式表和外部样式表优先级相同谁更靠后出现谁的规则生效如果某个规则后面加了!important它优先于上面的所有普通声明。举例说明。如果我在head里同时写了style和link两个里面都有h1 { color: red; }和h1 { color: blue; }那么浏览器会按它们在文档里的先后顺序取最后一个。如果你在HTML的style属性里写了color: green那无论CSS文件里写什么都赢不过内联样式除非CSS文件里带了!important。这里我要特别提醒!important属于很霸道的工具滥用会让样式变得极难维护我一般只在覆盖第三方组件库样式、且实在没有别的选择时才碰它。新手遇到“改不动”的情况第一时间不应该想“加个!important强行覆盖”而是应该去查优先级和选择器命中问题这才能从根上解决问题。选型建议很简单做页面Demo或者刚学习用内部样式表最直观做正式项目从第一天起就用外部样式表内联样式能不用就不用它只配活在调试工具和邮件模板里。3. 颜色值你写对了吗从red到rgba(255, 0, 0, 0.5)放CSS的地方搞定了接下来就要填颜色值。颜色值的写法有好几种长得完全不一样但能表达出同一个颜色。很多新手会在这里卡住一是不明白这些写法之间的关系二是不知道该选哪种。这一节我把它们全部拆开讲透。3.1 颜色关键字最简单但不一定够用CSS里有一组预定义的颜色关键字直接写名字就行基础色red、blue、green、black、white、yellow、gray扩展色名darkred、steelblue、tomato、gold、mediumspringgreen等等现代浏览器支持148个标准颜色关键字从HTML4时代的16个基础色到后来CSS Color Module Level 4加入的rebeccapurple都有对应的十六进制值。大家可以去MDN查完整列表。颜色关键字的优点就是写起来快、好读非常适合初学者和临时调试。比如你要快速验证某个文字是不是变红了写color: red无疑是最快的。但它的缺点也很明显一是表达不精确你想要那种“介于蓝和紫之间的高级灰蓝”靠名字很难描述二是不方便做明暗和透明度的变化比如red就是纯红你想来一个“淡一点的红”关键字就帮不上忙了。所以我建议正式项目里颜色关键字只用来写white、black这类极端值中间色调尽量用数值写法这样可以精确地还原设计稿上的每一个颜色。3.2 十六进制HEX工程里最常见的格式十六进制写法用一个#开头后面跟6位十六进制数字每两位分别表示红、绿、蓝三个通道的亮度范围从00最暗到FF最亮。#ff0000就是红色ff对应红通道拉满另外两个通道为0#00ff00是绿色#0000ff是蓝色#000000是黑色#ffffff是白色。如果想写一个“柔和一点的正红”可以把亮度往下调比如#e60023、#dc3545看起来比纯红稳重得多。怎么推算把十六进制转成十进制看e6是230dc是220比255暗一点饱和度就低了视觉上就会柔和一些。如果每两位成对出现比如#336699还可以缩写成三位#369浏览器会自动展开成#336699。这个缩写功能在写Demo时很方便少打三个字符。现在还有一个很实用的写法叫8位HEX在六位后面再加两位十六进制表示透明度。比如#dc354580最后的80代表大约50%的透明度00是完全透明FF是完全不透明。这个语法在CSS Color Module Level 4里已经标准化现代浏览器都支持用来做半透明文字非常方便不需要额外写opacity属性影响整个元素。3.3 RGB和RGBA更符合“三原色”直觉如果觉得十六进制不够直观可以用rgb()函数。它的三个参数分别对应红、绿、蓝通道取值0到255color: rgb(255, 0, 0); /* 红色 */ color: rgb(0, 0, 0); /* 黑色 */ color: rgb(255, 255, 255); /* 白色 */ color: rgb(220, 53, 69); /* 对应 #dc3545 的红色 */其实HEX和RGB就是一回事只是进制不一样。#dc3545拆开看dc22035534569写成rgb(220, 53, 69)完全等价。你可以把HEX当成是RGB的“压缩写法”。需要透明度时用rgba()第四个参数取值0到10是完全透明1是完全不透明color: rgba(220, 53, 69, 0.5); /* 半透明红文字 */ color: rgba(0, 0, 0, 0.85); /* 接近黑色的深色文字常用于遮罩层 */现在新版CSS规范里rgb()和rgba()已经合并你写rgb(220 53 69 / 50%)这种空格加斜杠的现代语法也行。但为了兼容旧代码和大多数教程习惯我一直按传统写法讲。等你在团队里跟别人协作时再根据规范统一采用新语法也不迟。3.4 HSL和HSLA靠手感就能调色HSL是另一套色彩模型对“我想让这个颜色再亮一点、再灰一点”这种需求非常友好。三个字母分别表示HHue色相0到360度的色环角度0度和360度是红色120度是绿色240度是蓝色SSaturation饱和度百分比0%是灰色100%是颜色最鲜艳的状态LLightness明度百分比0%是黑色100%是白色50%是正常亮度。举个例子color: hsl(0, 100%, 50%); /* 纯红 */ color: hsl(0, 0%, 0%); /* 黑色 */ color: hsl(0, 0%, 100%); /* 白色 */ color: hsl(0, 80%, 50%); /* 饱和度稍低一点的红更柔和 */ color: hsl(210, 50%, 60%); /* 一种舒服的天蓝 */hsla()就是再加一个透明度参数0到1color: hsla(210, 50%, 60%, 0.6);对我这种不是专业设计师的开发者来说HSL有个巨大的好处当设计稿给出的红色太刺眼我只需要把S从100%改成80%或者把L从50%改成55%纯靠直觉就能调出想要的颜色不用在脑子里做十六进制换算。而如果用的是HEX那就只能来回试色效率低得多。3.5 那么多写法到底用哪个我的建议很实际初学阶段颜色关键字加HEX足够完成所有练习对接设计稿用HEX因为设计师给的规范几乎都是#RRGGBB格式复制粘贴最不容易出错需要透明度优先用rgba()或8位HEX自己从零调色、做主题换肤用HSL体验非常顺滑。团队项目里最后一定要在样式表中统一一种写法不要今天HEX明天RGB不然维护起来容易乱。更进一步的做法是建一个CSS变量文件把系统里所有颜色集中管理这也是后面第4节要展开讲的内容。4. 实战中我踩过的坑颜色改了不生效的完整排查链路色值写对了代码也放进去了结果打开浏览器一看颜色没变。这种事我当年被坑过无数次而且每次原因都不一样。这里我把完整的排查链路整理出来按照这个顺序查95%的问题都能解决。4.1 第一步确认是不是HTML/CSS基础结构写错了最常见的低级错误是把style标签写到了body里面或者link的href路径写错了。浏览器解析这些有一定宽容度有些错误不会直接报错但样式就是不出效果。修正方法很简单在浏览器里按F12打开开发者工具切到Elements面板选中那个没变色的元素右侧Styles区域如果能看到你写的规则但被划掉或者没作用上说明文件结构没问题如果整个Styles区域是空的那就要去检查HTML里style或link的位置和路径。路径这块特别容易踩坑。写link relstylesheet hrefstyle.css时style.css跟你当前的HTML文件必须在同一个目录下如果CSS放在子目录比如css/style.css那href也得相应写成css/style.css。很多新手直接在编辑器里复制了代码目录结构没对上颜色自然出不来。另外确认一下文件保存编码。中文页面如果charsetUTF-8没写对文字会乱码颜色自然也别提能按照预期显示。VS Code右下角可以查看当前文件编码统一改成UTF-8就好。4.2 第二步查CSS优先级和覆盖关系样式写了但没生效十有八九是优先级问题。前面说过内联样式优先级高于内部/外部样式表!important又高于一切。还有一种典型情况你在全局样式里写了p { color: #333; }后来又写了个.highlight { color: green; }但.highlight出现在p后面那么这两条规则哪个赢答案是看具体的选择器。.highlight是类选择器p是标签选择器类选择器的优先级更高所以green会赢。CSS的优先级计算规则是!important 内联样式 ID选择器 类选择器/属性选择器/伪类 元素选择器/伪元素 通配符。相同优先级时看谁在样式表里更靠后。判断方法还是用开发者工具。选中元素后看Styles面板被覆盖的声明一般会显示带删除线。点开被划掉的规则还能看到它被哪个文件的第几行覆盖了。顺着这个线索去改就好不要靠猜。这里有个新手特别容易踩的坑想给链接改颜色写了a { color: red; }但打开页面发现链接还是默认的蓝色。原因就在于浏览器自带的用户代理样式表对a有默认颜色设置而你写的a选择器如果优先级不够就会被默认样式压住。真正保险的写法是把状态都覆盖一遍a { color: red; text-decoration: none; } a:visited { color: red; } a:hover { color: darkred; }a:visited这个伪类很容易被忽略。如果你只写了a { color: red; }访问过的链接在浏览器里可能还是默认的紫色就是因为:visited伪类的默认样式优先级更高。把链接相关的几个状态都统一控制才能避免“颜色改了好像又没改”的迷惑现象。4.3 第三步确认颜色值真的合法颜色值写错也是高频问题。常见几类少了#写成ff0000浏览器不认识应该写#ff0000十六进制位数不对写了#ff0还算合法相当于#ffff00但写成#ff00就直接不合法了RGB超出范围rgb(300, 0, 0)会被浏览器裁剪到255看起来“写了”但得不到预期色颜色关键字拼错比如把rebeccapurple拼成rebeccapurpel浏览器不认。遇到这种情况开发者工具里元素颜色会显示一个空的方块或提示无效值。逐个改回合法格式即可。工具方面我习惯在VS Code里安装CSS颜色预览插件鼠标移到色值上就能看到色块预览和设计稿的颜色一比马上就知道对不对。4.4 第四步别忘了继承和默认行为CSS的color属性是可继承的父元素设置了颜色子元素默认会跟着用同一个颜色。但有几个例外需要注意a链接有自己的默认样式不会自动继承父级颜色必须单独设置button、input等表单控件在很多浏览器里也有自己的默认颜色和字体最好显式重置::placeholder这类伪元素比如input::placeholder { color: #999; }得单独写改了input本身的color不一定能影响提示文字。排查继承问题可以用开发者工具的Computed面板选中元素后往下拉能看到color属性是从哪一层选择器继承来的来源一清二楚。这个面板对初学者来说特别有用因为它把“最终生效的样式”直接列出来了不用自己一层层去推断。4.5 第五步暗色模式与CSS变量颜色管理的进阶玩法当你开始做主题换肤或暗色模式时会发现“改文本颜色”这件事不再只是简单的赋值。现在推荐用CSS变量把颜色集中管理再通过媒体查询根据系统偏好整体切换。这样一套写法能让整个页面的文字颜色自动跟随系统暗色模式:root { --text-primary: #222222; --text-secondary: #666666; } body { color: var(--text-primary); } media (prefers-color-scheme: dark) { :root { --text-primary: #f5f5f5; --text-secondary: #aaaaaa; } }用变量以后日常开发里几乎不会再手写具体的颜色值而是写var(--text-primary)这种语义化名称。后续换肤只需要改:root里的变量定义页面所有用到这个变量的文字颜色会一起变省心很多。这个方案的坑在于CSS变量是运行时特性如果用户的浏览器比较旧不支持var()那么color: var(--text-primary)会被当成无效声明丢弃文字会回退到浏览器默认的黑色。解决办法是写兜底值body { color: #222222; color: var(--text-primary); }先写一个所有浏览器都能识别的具体颜色兜底再写变量。老浏览器不认var()时自动使用前面的具体值页面不至于完全失控。还有一个经验是暗色模式下的文字不要用纯黑色#000000也别用纯白色#ffffff。纯黑配纯白的对比度太生硬长时间看很刺眼。我一般会用#f5f5f5、#e9ecef这类偏灰白的颜色做暗色模式文字观感柔和得多。到这里从“哪种写法放CSS”到“颜色值怎么选”再到“不生效怎么排查”整条链路就通了。说实话改文本颜色是HTML/CSS入门路上最简单也最典型的一个需求但把这么一件小事做规范后面学盒模型、布局、响应式时基础会比别人扎实很多。最后再分享一个小习惯我每次写页面只要是正式项目都会先建一个variables.css把颜色、间距、字体统一收好再开始写业务样式。前期多花十分钟后期改起色来真的是能省出半小时起步。希望这篇对你有用调色顺利。