1. Web
  2. CSS
  3. CSS 颜色
  4. 为 HTML 元素应用颜色

使用 CSS 将颜色应用于 HTML 元素

通过 CSS，有很多方法可以为你的 HTML 元素 添加颜色，以创建你想要的外观。本指南是一个入门介绍，讲解如何使用 CSS 为 HTML 元素应用颜色。本指南包括在其值中设置颜色的 CSS 属性列表，以及如何在样式表和其他方式中使用颜色。

注意：明智地使用颜色很重要。始终选择合适的颜色，确保文本和背景之间的对比度足以保证可读性，并且始终牢记不同视觉能力人群的需求。

要了解更多关于 CSS 颜色作为数据类型的信息，请参阅 CSS <color> 数据类型参考和 CSS 颜色值指南。

可以具有颜色的属性

在元素级别，HTML 中的所有内容都可以应用颜色。让我们来看看页面上渲染的不同项目——例如文本、边框等。我们将提供 CSS 属性列表，这些属性用于为每个项目应用颜色。

从根本上讲，color 属性定义 HTML 元素内容的前景色，而 background-color 属性定义元素的背景色。这些属性几乎可以在任何元素上使用。

文本

每当渲染元素时，这些属性都用于确定文本的颜色、其背景以及文本上的任何装饰。

color

用于绘制文本和任何文本装饰（例如添加下划线、上划线、删除线等）的颜色。

background-color

文本的背景色。

text-shadow

配置应用于文本的阴影效果。阴影选项中包括阴影的基色（然后根据其他参数进行模糊和与背景混合）。请参阅文本投射阴影了解更多信息。

text-decoration-color

默认文本装饰（如下划线、删除线等）的颜色是 currentColor。此关键字表示 color 属性的当前值。但是，您可以使用 text-decoration-color 属性覆盖该值并为它们使用不同的颜色。

text-emphasis-color

在文本中每个字符旁边绘制强调符号时使用的颜色。这主要用于绘制东亚语言的文本。

caret-color

在元素内绘制插入符号（有时称为文本输入光标）时使用的颜色。这仅在可编辑的元素中有效，例如 <input> 和 <textarea>，或者其 HTML contenteditable 属性设置为 true 的元素。

盒子

每个元素都是一个包含某种内容的盒子，除了盒子可能包含的任何内容外，它还有一个背景和边框。

边框

请参阅边框部分，了解可用于设置盒子边框颜色的 CSS 属性列表。

background-color

在元素中没有前景色内容的区域使用的背景色。

box-shadow

配置盒子上的内阴影和投射阴影效果。每个阴影的选项中包括阴影的基色（然后根据其他参数进行模糊和与任何背景混合）。

column-rule-color

在使用 CSS 多列布局时，用于绘制分隔文本列的线的颜色。

outline-color

用于在元素外部绘制轮廓的颜色。此轮廓与边框不同，因为它在文档中不占用空间。轮廓不参与盒子模型，而是覆盖其他内容。轮廓通常用作焦点指示器，指示当前哪个元素具有焦点并将接收键盘输入事件。

边框

任何元素都可以绘制边框。基本的元素边框是围绕元素内容边缘绘制的一条线。请参阅盒子模型了解元素与其边框之间的关系，并参阅文章使用 CSS 样式化边框了解更多关于应用样式到边框的信息。

您可以使用 border 简写属性，它允许您一次性配置边框的所有内容（包括边框的非颜色特性，例如其宽度、样式（实线、虚线等）等）。

border-color 简写

指定用于元素边框每一侧的单一颜色。

border-left-color、border-right-color、border-top-color 和 border-bottom-color

允许您设置元素边框相应侧的颜色。

border-block-start-color 和 border-block-end-color

通过这些属性，您可以设置用于绘制边框所围绕的块的起始和结束边缘的颜色。在从左到右的书写模式（例如英语的书写方式）中，块起始边框是顶部边缘，块结束边框是底部。这与行内起始和结束不同，行内起始和结束是左右边缘（对应于盒子中每行文本的开始和结束位置）。

border-inline-start-color 和 border-inline-end-color

这些属性允许您为盒子中文本行起始和结束的边缘着色。这取决于 writing-mode、direction 和 text-orientation 属性，这些属性通常（但不总是）用于根据所显示的语言调整文本方向性。例如，如果盒子的文本是从右到左渲染的，那么 border-inline-start-color 将应用于边框的右侧。

在样式表中将颜色指定为值

既然您知道哪些 CSS 属性允许您为元素应用颜色，您就可以开始为您的网站添加颜色了。让我们来看一些在样式表中使用颜色的例子。在这个例子中，我们使用了几个前面提到的属性，无论属性是什么，在 CSS 中应用颜色的概念都是相同的。

让我们先看看结果，然后再查看创建它所需的代码

HTML

创建上述示例的 HTML 代码如下所示

html
<div class="wrapper">
  <div class="boxLeft">
    <p>This is the first box.</p>
  </div>
  <div class="boxRight">
    <p>This is the second box.</p>
  </div>
</div>

这里有一个包装器 <div>，其中包含两个子 <div>，每个子 <div> 都有一个子段落 (<p>)。每个内容 <div> 都被赋予了不同的外观和感觉。

CSS

让我们分段看看创建上述结果的 CSS 代码。

注意：在此示例中，我们使用了多种不同的 CSS 颜色值类型来演示其用法。不建议在生产代码中使用此方法。编写 CSS 时，请为您和您的团队使用最直观的值类型。

css
.wrapper {
  height: 110px;
  padding: 10px;
  display: flex;
  gap: 10px;
  text-align: center;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  border: 6px solid mediumturquoise;
}

div {
  flex: 1;
}

.wrapper 类用于为包含所有其他内容的 <div> 分配样式。这通过 height 建立容器的高度，允许此块级元素的宽度默认为其父级的 100%。将 display 设置为 flex 并添加一个 10px 的 gap 会创建一个 flex 容器，使子元素并排布局，并在所有容器的子元素之间留有间隙。我们使用 flex 让 flex 子元素增长以填充容器；它不影响 flex 容器本身。

我们在此讨论中更感兴趣的是使用 border 属性在元素的外部边缘建立边框。此边框是一条实线，宽 6 像素，颜色为 命名颜色 mediumturquoise。

在我们的包装器中，我们有一个左盒子和一个右盒子。

css
.boxLeft {
  background-color: rgb(245 130 130);
  outline: 2px solid darkred;
}

用于样式化左侧盒子的 .boxLeft 类设置了背景和轮廓的颜色

  • 盒子的背景色通过使用 rgb() 函数符号将 CSS background-color 属性的值更改为 rgb(245 130 130) 来设置。
  • 为盒子定义了一个轮廓。与更常用的 border 不同，outline 完全不影响布局；它会在元素盒子外部的任何内容之上绘制，而不是像 border 那样留出空间。这个轮廓是一条两像素厚的实心深红色线条。请注意在指定颜色时使用了 darkred 关键字。
  • 请注意，我们没有明确设置文本颜色。这意味着 color 的值将从定义它的最近包含元素继承。默认情况下，它是黑色。
css
.boxRight {
  background-color: hwb(270deg 63% 13%);
  outline: 4px dashed #6e1478;
  color: hsl(0deg 95% 95%);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #8f8;
  text-decoration: underline wavy #8f8;
  text-shadow: 2px 2px 3px black;
}

注意：我们单独包含了 text-decoration-* 样式，因为 Safari 不支持 text-decoration 作为简写属性。

最后，.boxRight 类设置了右侧盒子的几种样式。然后建立以下颜色（使用五种不同的声明颜色值的方式）

  • background-color 使用 hwb() 函数符号设置 — hwb(270deg 63% 13%)。这是一种中紫色。
  • 盒子的 outline 用于指定盒子应由四像素厚的虚线围住，其颜色使用六位<hex-color> #6e1478 略深一点的紫色。
  • 前景（文本）颜色通过使用 hsl() 函数符号设置 color 属性来指定 — hsl(0deg 95% 95%)。这是一种非常浅的粉红色。
  • 我们使用 text-decoration 简写以及用于浏览器兼容性的完整组件，在文本下方添加了一条绿色波浪线。我们使用了三位<hex-color> #8f8，它等同于 #88ff88。
  • 最后，使用 text-shadow 为文本添加了一点阴影。它的 color 参数设置为 black，一个<named-color> 值。

我们使用了五种不同的颜色语法来演示其可能性。在实际中，您和您的团队最好选择一种首选的颜色表示法，所有从事代码库工作的人员都使用相同的颜色语法。

使用颜色的其他方式

CSS 并不是唯一支持颜色的 Web 技术。其他示例包括

HTML Canvas API

允许您在 <canvas> 元素中绘制 2D 位图图形。请参阅我们的 Canvas 教程以了解更多信息。

SVG（可伸缩矢量图形）

允许您使用绘制特定形状、图案和线条的命令创建图像。SVG 命令格式为 XML，可以直接嵌入网页中，也可以使用 <img> 元素放置在页面中，就像任何其他类型的图像一样。

WebGL

Web Graphics Library 是一个基于 OpenGL ES 的 API，用于在 Web 上绘制高性能 2D 和 3D 图形。请参阅我们的 WebGL 教程了解更多信息。另请参阅 WebGPU，它是 WebGL 的继任者，适用于现代 GPU。

注意：一些现在已废弃的 HTML 属性接受颜色作为值，例如 bgcolor 和 vlink。这些属性仅接受 <named-color> 以及三位或六位数的 <hex-color> 值。

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.