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 |
瀏覽器相容性
載入中…