DIV+CSS基础DIV+CSS补充知识:元素颜色的表示方法总结

DIV+CSS补充知识:元素颜色的表示方法总结

在初中物理中我们学过,色光的三原色是红绿蓝,在CSS中,定义颜色有多种方式,常见的方式有颜色英文名,十六进制颜色值,RGB颜色,RGBA颜色,HSL颜色,HSLA颜色等。

1. 颜色的英文名很好理解,比如blue表示蓝色,red表示红色,black表示黑色等,本文结尾将列出一些代表颜色的英文名称。

2. 十六进制颜色定方式是#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分,取值可以是0-FF之间,例如:

#0000ff表示蓝色,这是因为蓝色成分被设置为最高值ff,而其他色彩成分被设置为0。又如#ffffff表示纯白色,而#000000表示纯黑色。

3. RGB颜色和十六进制的定义原理是相似的,它的定义方式是rgb(red, green, blue)。每个参数 (red、green、blue) 定义颜色的强度,可以是介于0与255之间的整数,或者是百分比值(从0%到100%)。

例如,rgb(0,0,255)值显示为蓝色,这是因为blue参数被设置为最高值(255),而其他被设置为0。同样道理,rgb(0,0,0)表示纯黑色,而rgb(255,255,255)表示纯白色。

4. RGBA颜色是在RGB的基础上增加了一个透明度的值,相当于rgba(red,green,blue,alpha),其中alpha可以设置为0-1之间的小数,0为完全透明,而1表示不透明。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试网页标题</title>
<style type="text/css">
#a1 {background:rgb(35,4,241);width:200px;height:100px;}
#a2 {background:rgba(35,4,241,0.5);width:200px;height:100px;}
</style>
</head>
<body>
<div id="a1">
</div>
<div id="a2">
</div>
</body>
</html>

浏览这个网页,我们看到两个div的rgb值是一样的,但后者设置了透明度,所以背景颜色显示为半透明的蓝色。

rgba颜色值.png

5. HSL指的是hue(色调)、saturation(饱和度)、lightness(亮度),HSL颜色值定义方式为:hsl(hue, saturation, lightness)

其中,Hue是色盘上的度数(从0到360),0 (或360)是红色,120是绿色,240是蓝色。Saturation是百分比值,0%意味着灰色,而100%是全彩色。Lightness也是百分比值,0%是黑色,100%是白色。

6. 同样的,HSLA则相当于在HSL基础上加上定义透明度的值,如:

div {background-color:hsla(120,60%,80%,0.7);}

HTML和CSS颜色规范中定义了147种颜色名,包括17种标准颜色和130种其他颜色。

17种标准颜色分别是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow ……其中文意思分别是:

水绿色,黑色,蓝色,紫红色,灰色,绿色,黄绿色、红褐色、海军蓝、黄褐、橙色、紫色、红色、银色、蓝绿色,白色,黄色。

关于颜色的英文名所对应的十六定制表示方法,请点击这里查看

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/div_css/20.html