码农教程 - 一技在手,衣食无忧! tools

HTML 颜色

❮ 上一节 下一节 ❯

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

颜色名称

在 HTML 中，可以使用颜色名称来指定颜色：

番茄
橙子
道奇蓝
中海绿色
灰色的
石板蓝
紫色
浅灰

亲自试一试 »

HTML 支持140个标准颜色名称。

背景颜色

您可以设置 HTML 元素的背景颜色：

你好世界


Lorem ipsum dolor sat amet，conectetuer adipiscing elit，sed diam nonummy nibh euismod Tincidunt ut laoreet dolore magna aliquamerat volutpat。 Ut wisi enim ad minim veniam, quis nostrud exercitation 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>
亲自试一试 »

文字颜色

您可以设置文本的颜色：

你好世界

Lorem ipsum dolor sat amet，conectetuer adipiscing elit，sed diam nonummy nibh euismod Tincidunt ut laoreet dolore magna aliquamerat volutpat。

Ut wisi enim ad minim veniam, quis nostrud exercitation 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>
亲自试一试 »

边框颜色

您可以设置边框的颜色：

你好世界

你好世界

你好世界

示例

<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>
亲自试一试 »

颜色值

在 HTML 中，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值和 HSLA 值来指定颜色。

以下三个 <div> 元素的背景颜色设置为 RGB、HEX 和 HSL 值：

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

以下两个 <div> 元素的背景颜色设置为 RGBA 和 HSLA 值，这为颜色添加了 Alpha 通道（这里我们有 50% 的透明度）：

RGBA(255, 99, 71, 0.5)
高强度SLA(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>
亲自试一试 »

HTML练习

通过练习测试一下

练习:

插入正确的属性以使文本颜色变为紫色。

<p style=" : violet">This is a paragraph.</p>

开始练习

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

您将了解更多有关RGB,十六进制和HSL在接下来的章节中。


❮ 上一节 下一节 ❯