CSS 颜色

---

指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。

---

CSS 颜色名

在 CSS 中，可以使用颜色名称来指定颜色:

Tomato Orange DodgerBlue MediumSeaGreen Gray SlateBlue Violet LightGray

亲自试一试 »

CSS/HTML 支持 140 种标准颜色名。

---

CSS 背景色

您可以为 HTML 元素设置背景色:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

实例

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
亲自试一试 »

---

CSS 文本颜色

您可以设置文本的颜色:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

实例

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p> 亲自试一试 »

---

CSS 边框颜色

您可以设置边框的颜色:

Hello World

Hello World

Hello World

实例

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1> 亲自试一试 »

---

CSS 颜色值

在 CSS 中，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色:

与颜色名 "Tomato" 等效:

rgb(255, 99, 71) #ff6347 hsl(9, 100%, 64%)

与颜色名 "Tomato" 等效，但是透明度为 50%:

rgba(255, 99, 71, 0.5) hsla(9, 100%, 64%, 0.5)

实例

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1> 亲自试一试 »

了解有关颜色值的更多信息

在下一章中，您将学习有关 RGB, HEX 和 HSL 的更多知识。