re:从0开始的CSS学习之路 5. 颜色单位

0. 写在前面

没想到在CSS里也要再次了解这些颜色单位,感觉回到了大二的数字图像处理,可惜现在已经大四了,感觉并没有学会什么AI的东西
re:从0开始的CSS学习之路 5. 颜色单位_第1张图片

1. 颜色单位

  1. 预定义颜色名:HTML和CSS规定了147种颜色名。例如:red yellow green blue

  2. RGB颜色值
    rgb(red, green, blue):括号中每个参数代表对应颜色的浓度
    浓度值是0-255之间的整数,0表示无浓度,255表示最大浓度
    也可以使用百分比表示浓度 0%~100%

  3. 十六进制颜色值
    #RRGGBB:RR-红色 GG-绿色 BB-蓝色,每种颜色使用十六进制整数表示浓度
    十六进制(满十六进一):0 1 2 3 4 5 6 7 8 9 A B C D E F
    例如:#ff0000
    若每种颜色的两位数值都一样可以简写为:#f00

  4. RGBA:相较于RGB多了个A表示透明度,取值范围在0.0~1.0之间
    0.0表示透明 1.0表示不透明 0.5表示半透明

  5. HSL/HSLA
    H 色调(0-360)0红色->120绿色->240蓝色
    S 饱和度(0%-100%) 0%灰色->100%全彩
    L 亮度(0%-100%) 0%黑色->100%白色
    A透明度(0.0-1.0) 0.0透明->1.0不透明

示例如下:

DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
	.div1 {
		width: 200px;
		height: 200px;
	
		/* background-color: red; */
		/* background-color: rgb(255, 200, 0); */
		/* background-color: rgb(100%, 0%, 0%); */
		/* background-color: #f00; */
		/* background-color: rgba(255, 0, 0, 0.5); */
		background-color: hsla(0, 100%, 50%, .3);
	}
head>

<body>
	<div class="div1">div>
body>

html>

实际网页开发感觉hsla用的不多,主要还是以十六进制或rgb为主

你可能感兴趣的:(从0开始的CSS之旅,css,学习,前端)