HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
View in English Always switch to English
本文主要介绍 HTML 中使用 CSS 颜色的各种方法。
色彩的运用是人类表达的一种基本形式。小孩子在学会绘画前就开始尝试色彩的运用。也许这就是为什么颜色是人们在学习开发网站时最想尝试的东西之一。借助 CSS，有很多方法可以为 HTML
元素添加颜色，以创建所需的外观。
我们将会谈及添加颜色所需要的大部分内容，包括一系列可以着色的
元素与相关的 CSS 属性，如何描述颜色，以及在样式表与脚本中使用颜色的方法。同时我们还会了解如何让用户选择颜色。
然后我们会通过简短的讨论总结如何机智地运用颜色：如何选择合适的颜色，同时考虑不同视力水平的人的需求。
从 HTML
元素层面来看，所有的
元素都可设置颜色。但除了
元素本身之外，
元素中所绘制的事物也可设置颜色，如文本、边框等等。我们将会看到一系列用于设置颜色的 CSS 属性。
在这些设置颜色的 CSS 属性中，最基础的就是 color 属性和 background-color 属性了。分别用于设置 HTML
元素内容的前景色和背景色。这两个属性几乎可用于所有的 HTML
元素。
无论何时渲染
元素，这些属性都将用于确定文本的颜色、背景以及文本上的任何装饰。
绘制文本和任何文本装饰（如添加下划线或上划线、删除线等）时使用的颜色。
配置应用于文字的阴影效果。阴影选项包括阴影的基色（然后根据其他参数将基色模糊并与背景混合）。请参阅文字阴影以了解更多信息。
默认情况下，文本装饰（如下划线、删除线等）使用 color 属性作为其颜色。不过，你可以使用 text-decoration-color 属性覆盖该行为，并为它们使用不同的颜色。
绘制文本中每个字符旁边的强调符号时使用的颜色。主要用于绘制东亚语言的文本。
在
元素中绘制光标时使用的颜色（有时也称为文本输入光标）。这仅对可编辑的
元素有用，如 <input> 和 <textarea> 或设置了 HTML contenteditable 属性的
元素。
每个
元素都是一个包含某种内容的盒子，除了盒子中的内容外，还有背景和边框。
请参阅边框一节，了解可用于设置方框边框颜色的 CSS 属性列表。
在
元素中没有前景内容的区域使用的背景色。
在
元素外部绘制轮廓时使用的颜色。该轮廓与边框不同，它不会在文档中预留空间（因此可能会与其他内容重叠）。它通常用作焦点指示器，显示哪个
元素将接收输入事件。
任何
元素都可以在其周围绘制边框。基本的
元素边框是围绕
元素内容边缘绘制的一条线。请参阅盒模型了解
元素与其边框之间的关系，并参阅文章使用 CSS 为边框添加样式了解为边框应用样式的更多信息。
你可以使用 border 简写属性，这样就可以一次性配置边框的所有内容（包括边框的非颜色特性，如宽度、样式（实线、虚线等）等等）。
通过这些属性，你可以设置用于绘制边框的颜色，这些颜色最靠近边框所包围的区块的起始和结束位置。在从左到右的书写模式下（如英文的书写方式），块向的起始边框是上边缘，结束边框是下边缘。这与行向开始和结束不同，行向开始和结束是左右边缘（对应于方框中每行文本的开始和结束位置）。
通过这些选项，你可以为最靠近方框内文本行开头和结尾的边框边缘着色。至于是哪一边，取决于 writing-mode、direction 和 text-orientation 属性，它们通常（但不总是）用于根据显示语言调整文本方向。例如，如果盒子的文本是从右到左显示的，那么 border-inline-start-color 就会应用到边框的右侧。
CSS 并不是唯一支持颜色的 web 技术。同时还有其他支持颜色的图形技术。
可让你在 <canvas>
元素中绘制二维位图图形。请参阅我们的 Canvas 教程了解更多信息。
SVG 可让你使用绘制特定形状、图案和线条的命令来绘制图像。SVG 命令的格式为 XML，可以直接嵌入网页，也可以像其他类型的图像一样，使用 <img>
元素放置在网页中。
网络图形库是一种基于 OpenGL ES 的 API，用于在 Web 上绘制高性能的 2D 和 3D 图形。请参阅我们的 WebGL 教程了解更多信息。
现在，你已经知道有哪些 CSS 属性可以让你为
元素着色，也知道了可以用来描述颜色的格式，你可以将它们组合在一起，开始使用颜色了。正如你在可设置颜色的内容下的列表中所看到的，有很多事物都可以用 CSS 着色。让我们从两个方面来看看：在样式表中使用颜色，以及使用 JavaScript 代码添加和更改颜色，以改变
元素的样式。
为
元素应用颜色的最简单方法，也是你通常会采用的方法，就是在呈现
元素时使用的 CSS 中指定颜色。虽然我们不会使用前面提到的每一个属性，但我们会看几个示例。这个概念在任何使用颜色的地方都是一样的。
让我们来看一个示例，首先看看我们要达到的效果：
创建上述示例的 HTML 代码如下所示：
这非常简单，只需使用一个 <div> 作为内容的包装，内容由另外两个 <div> 组成，每个框中都有一个段落（<p>），每个段落的样式各不相同。
像往常一样，神奇的事情发生在 CSS 中，我们将在 CSS 中应用颜色并定义上述 HTML 的布局。
我们将逐一查看创建上述结果的 CSS，以便逐一回顾有趣的部分。
.wrapper 类用于为 <div> 指定样式，而 <div> 则封装了我们所有的其他内容。将使用 width 和 height 来确定容器的大小，以及其 margin 和 padding。