color
color CSS 属性设置元素文本和文本装饰的前景颜色值，并设置 currentColor 值。currentColor 可以作为其他属性的间接值使用，并且是其他颜色属性（如 border-color）的默认值。
试一试
color: rebeccapurple;
color: #00a400;
color: rgb(214 122 127);
color: hsl(30deg 82% 43%);
color: hsl(237deg 74% 33% / 61%);
color: hwb(152deg 0% 58% / 70%);
<section id="default-example">
<div class="example-container">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather.
</p>
</div>
</section>
#example-element {
font-size: 1.5em;
}
.example-container {
background-color: white;
padding: 10px;
}
有关在 HTML 中使用颜色的概述，请参阅 使用 CSS 为 HTML 元素应用颜色。
语法
css
/* Keyword values */
color: currentColor;
/* <named-color> values */
color: red;
color: orange;
color: tan;
color: rebeccapurple;
/* <hex-color> values */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;
/* <rgb()> values and legacy <rgba()> values*/
color: rgb(34, 12, 64);
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.6);
color: rgb(34.6 12 64 / 60%);
color: rgba(34.6 12 64 / 60%);
/* <hsl()> values and legacy <hsla()> values */
color: hsl(30, 100%, 50%);
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.2 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);
/* <hwb()> values */
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);
/* Global values */
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;
color 属性指定为单个 <color> 值。
请注意，该值必须是单一颜色。它不能是 <gradient>，因为渐变实际上是一种 <image>。
值
<color>-
设置元素文本和装饰部分的颜色。
currentColor-
将颜色设置为元素的
color属性值。但是，如果设置为color的值，currentColor将被视为inherit。
无障碍
确保文本颜色与文本所放置的背景之间的对比度足够高，以便视力低下的人能够阅读页面内容，这一点非常重要。
颜色对比度通过比较文本和背景颜色值的亮度来确定。为了满足当前的 Web 内容可访问性指南 (WCAG)，文本内容需要 4.5:1 的比率，而较大文本（如标题）需要 3:1 的比率。大文本定义为 18.66px 或更大且粗体，或 24px 或更大。
正式定义
| 初始值 | canvastext |
|---|---|
| 应用于 | 所有元素和文本。它也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 计算值 | computed color |
| 动画类型 | 按计算值类型 |
正式语法
color =
<color>
示例
将文本设为红色
以下是将段落文本设为红色的所有方法
css
p {
color: red;
}
p {
color: #f00;
}
p {
color: #ff0000;
}
p {
color: rgb(255 0 0);
}
p {
color: rgb(100% 0% 0%);
}
p {
color: hsl(0 100% 50%);
}
/* 50% translucent */
p {
color: #ff000080;
}
p {
color: rgb(255 0 0 / 50%);
}
p {
color: hsl(0 100% 50% / 50%);
}
规范
| 规范 |
|---|
| CSS 颜色模块第四版 # the-color-property |
| Scalable Vector Graphics (SVG) 2 # ColorProperty |
浏览器兼容性
加载中…