HTML 颜色
HTML 颜色由预定义的颜色名称指定,或由RGB、HEX、HSL、RGBA或HSLA值指定。
颜色名称
在 HTML 中,可以使用颜色名称指定颜色:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
HTML 支持 140个标准颜色名称。
背景色
您可以设置 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>
<p style="background-color:Tomato;">Lorem ipsum...</p>
亲自试一试 »
文本颜色
您可以设置文本的颜色:
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>
亲自试一试 »
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
边框颜色
可以设置边框的颜色:
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>
亲自试一试 »
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
颜色值
在 HTML 中,还可以使用 RGB 值、十六进制值、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)
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>
亲自试一试 »
<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>