肉渣教程

CSS 颜色

上一节 下一节

HTML颜色可以通过颜色名、RGB、HEX、HSL、RGBA、HSLA的方式来设置。


本小节和HTML基础教程的颜色那一节是一模一样的,如已领会,则可跳过本节


颜色名

在HTML里可以直接通过颜色名来设置。(更多颜色名查看这里

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
<h3 style="background-color:Tomato;color:White;">Tomato</h3>
<h3 style="background-color:Orange;color:White;">Orange</h3>
<h3 style="background-color:DodgerBlue;color:White;">DodgerBlue</h3>
<h3 style="background-color:MediumSeaGreen;color:White;">MediumSeaGreen</h3>
<h3 style="background-color:Gray;color:White;">Gray</h3>
<h3 style="background-color:SlateBlue;color:White;">SlateBlue</h3>
<h3 style="background-color:Violet;color:White;">Violet</h3>
<h3 style="background-color:LightGray;color:White;">LightGray</h3>

运行一下


背景色

background-color和background特性都可以用来设置背景色。

<h1 style="background-color:Tomato;">Tomato</h1>

运行一下

文本颜色

color特性可以用来设置元内的文本颜色。

<h1 style="color:Tomato;">Tomato</h1>

运行一下

边框颜色

border特性可以用来设元素的边框颜色。

<h1 style="border:1px solid Tomato;">Tomato</h1>

运行一下


颜色属性的取值

除了用颜色名的方式,还可以使用RGB、HEX、HSL、RGBA与HSLA的方式来定义颜色。

以颜色名为“Tomato”的色彩为例,rgb(255, 99, 71)#ff6347hsl(9, 100%, 64%)与使用色彩名的方式等价。

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

如下所示,同样是“Tomato”颜色,不一样的是下面的色彩还有50%的透明度。

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

RGB 值

RGB是计算机通过红色、绿色、蓝色的比例来定义颜色的一种方式。红、绿、蓝的取值0-255。

rgb(red, green, blue)

比如要想表示黑色,就是把红色、绿色、蓝色都设置成0,即rgb(0, 0, 0)
比如想要表示白色,就是把红色、绿色、蓝色都设置成255,即rgb(255, 255, 255)

rgb(255, 99, 71)
rgb(238, 99, 71)
<h3 style="background-color:rgb(255, 99, 71);color:rgb(255,255,255);">
rgb(255, 99, 71)
</h3>

<h3 style="background-color:rgb(238, 99, 71);color:rgb(255,255,255);">
rgb(238, 99, 71)
</h3>

运行一下

HEX 值

HEX即16进制色彩的定义方式。

#rrggbb

rr代表红色,取值范围是00到ff,等价于rgb模式下十进制的0-255;gg代表绿色,bb代表蓝色,取值都是00到ff;更多如下例所示。

#fc644d
#ec634c
<h3 style="background-color:#fc644d;color:#ffffff;">
#fc644d
</h3>

<h3 style="background-color:#ec634c;color:#ffffff;">
#ec634c
</h3>

运行一下

HSL 值

HSL的方式是利用色调(hue)、饱和度(saturation)、明度(lightness)这三个指数进行对颜色的定义。

hsl(hue, saturation, lightness)
  • 色调hue的取值范围是0-360,0代表红色,120代表绿色,240代表蓝色。
  • 饱和度saturation取值范围0%-100%,取值越大则饱和度越高,越低则灰度越高。
  • 明度lightness取值范围是0%-100%,0%代表全黑,100%代表全白,50%代表黑白之间。
hsl(8, 97%, 65%)
hsl(9, 81%, 61%)
<h3 style="background-color:hsl(8,97%,65%);color:hsl(0,0%,100%);">
hsl(8, 97%, 65%)
</h3>

<h3 style="background-color:hsl(9,81%,61%);color:hsl(0,0%,100%);">
hsl(9, 81%, 61%)
</h3>

运行一下

RGBA 值

RGBA类似于RGB模式,不同的是多出一个参数alpha。

rgba(red, green, blue, alpha)

alpha代表透明度,取值0-1,越小则透明度越高,0则意味着完全透明,1代表着完全不透明。

rgb(255, 99, 71)
rgba(255, 99, 71, 0.5)
<h3 style="background:rgb(255, 99, 71);color:rgb(255,255,255);">
rgb(255, 99, 71)
</h3>

<h3 style="background:rgba(255,99,71,0.5);color:rgb(255,255,255);">
rgba(255, 99, 71, 0.5)
</h3>

运行一下

HSLA 值

HSLA类似HSL格式,不同的也是多出一个参数alpha。

hsl(hue, saturation, lightness, alpha)

alpha代表透明度,取值0-1,越小则透明度越高,0则意味着完全透明,1代表着完全不透明。

hsl(8, 97%, 65%)
hsla(8, 97%, 65%, 0.5)
<h3 style="background-color:hsl(8,97%,65%);color:hsl(0,0%,100%);">
hsl(8, 97%, 65%)
</h3>

<h3 style="background-color:hsla(8,97%,65%,0.5);color:hsl(0,0%,100%);">
hsla(8, 97%, 65%, 0.5)
</h3>

运行一下


CSS 颜色

上一节 下一节