13.4. CSS颜色 -- 五颜六色的世界

13.4.1. CSS RGB(A) 颜色
13.4.2. CSS HSL(A) 颜色
13.4.3. web安全色

前面的教程使用了下面的代码color:black;,这段代码翻译过来就是 颜色(color):黑色(black).这就是CSS的一种颜色表示方式

CSS颜色(表示为<color>)

CSS的颜色表示法 http://www.dreamdu.com/css/css_colors/

CSS预定义颜色表示法(就是使用颜色的英文):

color:red;
color:green;
color:blue;

red,green,blue都是CSS关键词,CSS关键词我将在CSS高级教程中介绍.

CSS RGB颜色表示法:

color:rgb(255,0,0);
color:rgb(0,255,0);
color:rgb(0,0,255);

RGB颜色表示法就是红(R:red),绿(G:green),蓝(B:blue),这三原色混合后呈现出的颜色,其中每种颜色的取值为0~255.

CSS RGB百分比颜色表示法:

color:rgb(100%, 0%, 0%);
color:rgb(0%, 100%, 0%);
color:rgb(0%, 0%, 100%);

RGB百分比颜色表示法就是利用百分比来表示RGB颜色,其中RGB中的0就代表百分比中的0%,RGB中的255就代表百分比中的100%.

CSS 16进制颜色表示法:

color:#ff0000;
color:#00ff00;
color:#1199ff;

16进制颜色表示法就是使用三对十六进制数分别表示RGB中的三原色,像上面例子的最后一个color:#1199ff;,其中11代表R的颜色(十六进制的11就等于十进制中的17),其中99代表G的颜色(十六进制的99就等于十进制中的153),其中ff代表B的颜色(十六进制的ff就等于十进制中的255),前面再加一个#号.(#1199ff;等价于rgb(17,153,255);)

CSS 短16进制颜色表示法,属于web safe colors(网络安全色):

color:#f00;
color:#0f0;
color:#00f;

短16进制颜色表示法就是当16进制颜色表示法中的两个表示颜色值的数字一样的时候的简写,比如color:#ff0000;就可以简写为color:#f00;.

CSS RGBA颜色表示法:

color:rgba(255,0,0,1);
color:rgba(0,255,0,1);
color:rgba(0,0,255,1);

RGBA颜色表示法就是在RGB颜色的基础上增加了Alpha通道.

CSS HSL颜色表示法:

color:hsl(360, 100%, 75%);
color:hsl(120, 100%, 75%);
color:hsl(240, 100%, 75%);

HSL颜色表示法就是使用色相(hue),饱和度(saturation),亮度(lightness)表示颜色的一种方法.

CSS HSLA颜色表示法:

color:hsla(360, 100%, 50%, 1);
color:hsla(120, 100%, 50%, 1);
color:hsla(240, 100%, 50%, 1);

HSLA颜色表示法就是在HSL颜色的基础上增加了Alpha通道.

说明:

什么是16进制?

16进制是逢16进1,a代表10,f代表15,我们平时使用的10进制都是逢10进1.(16进制的ff等于10进制的255)

CSS的颜色总数是多少?

从整数0到255范围内的rgb颜色表示,我们可以计算出CSS可以表示颜色的总数为,256*256*256=16777216

注意:

  • 使用16进制表示颜色时,要使用#标记
  • #rgb等价于#rrggbb,例如:#fb0等价于#ffbb00
  • 一个等式rgb(255,255,255) = rgb(100%,100%,100%) = #FFF = #FFFFFF
  • CSS2.1定义了一些17种预定义颜色,使用预定义颜色可以更直观,简单,教程的最后将会总结CSS的预定义颜色列表.


  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都