HTML5 中可通过 color 和 background-color 属性设置文字与背景颜色，支持内联样式、内部样式表、外部 CSS 文件、CSS 变量及渐变色五种方法。

如果您希望在 HTML5 中为网页元素添加颜色，可以通过 CSS 的 color 属性设置文字颜色，或通过 background-color 属性设置背景颜色。以下是具体的操作方法：

一、使用内联样式设置颜色

内联样式直接在 HTML 元素的 style 属性中定义 CSS 规则，适用于单个元素的快速着色。

1、在 HTML5 标签中添加 style 属性，例如：

这是一段文字

。

2、将 color 值替换为颜色名称（如 blue、green）、十六进制值（如 #FF5733）、RGB 值（如 rgb(255, 87, 51)）或 RGBA 值（如 rgba(255, 87, 51, 0.8)）。

立即学习 “ 前端免费学习笔记（深入）”；

3、background-color 可同时设置，支持与 color 相同的颜色格式，且可设为 transparent 实现透明背景。

二、使用内部样式表设置颜色

内部样式表通过

1、在 HTML5 文档的

部分插入

。

2、为需要着色的元素添加对应的选择器，例如：

标题文字

或

。

3、确保 class 名或标签名与

三、使用外部 CSS 文件设置颜色

外部样式表将 CSS 代码保存为独立的。css文件，通过 引入，适合多页面共享统一配色方案。

1、新建一个文本文件，保存为 style.css，内容示例：p.text-green {color: #27ae60;} div.highlight {background-color: #f1c40f;}。

2、在 HTML5 文档的

中添加链接：，确保 href 路径正确指向该 CSS 文件。

3、在 HTML 中应用对应类名，例如：

绿色文字

和

。

四、使用 CSS 变量统一管理颜色

CSS 变量（自定义属性）允许在根元素中定义颜色值，后续通过 var()函数复用，便于全局颜色调整。

1、在

2、在其他 CSS 规则中调用变量：h2 {color: var(--primary-color); } body {background-color: var(--bg-light); }。

3、修改：root 中的变量值即可一次性更新所有引用该变量的样式，无需逐个查找替换。

五、使用渐变色作为背景

background-color 支持线性渐变（linear-gradient）和径向渐变（radial-gradient），可创建丰富的色彩过渡效果。

1、在 style 属性或 CSS 规则中使用渐变语法：background: linear-gradient(to right, #ff6b6b, #4ecdc4);。

2、to right 表示从左到右渐变，也可写为 90deg；颜色可指定两个或多个，用逗号分隔。

3、若需兼容旧版 浏览器，可在渐变前添加 -moz-、-webkit- 等前缀，但现代 HTML5 环境通常无需前缀。