【学习笔记】对htm>css颜色的认识与了解对rgb有个初步的认识

颜色的概念

  1. 色调:也就是大家常说的颜色(大家理解为颜色就可以了)
  2. 饱和度:灰色的含量(饱和度最大时,颜色中灰色的含量为零;饱和度最小时,颜色基本就是灰色。也就是说,饱和度与灰色的占比是成反比的。)
  3. 亮度:黑色的含量(亮度最大时,颜色中黑色的含量为零。亮度最小时,颜色会变得非常暗。也就是说,亮度与黑色的占比是成反比的。)
  4. 对比度:前景色与背景色的对比
  5. web安全色:

提示:关于 Web 安全色的具体颜色以及值,可以参考 https://www.bootcss.com/p/websafecolors/。

颜色值的类型

rgb模式

RGB是一个简称,全称为 Red-Green-Blue,即红-绿-蓝

十六进制符号 #RRGGBB#RGB

函数符 rgb(R, G, B)

#p1 {
    background-color: #FFCC33;
}
#p2 {
    background-color: #FC3;
}
#p3 {
    background-color: rgb(255, 204, 51);
}

img

hsl模式

HSL是一个简称,全称为 Hue-Saturation-Lightness,即 色调-饱和度-亮度。HSL 色彩模式是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。

p {
    background-color: hsl(50, 33%, 25%);
}

img

透明度

在 CSS3 版本中新增了 opacity 属性用来设置 HTML 元素的透明度,该属性的值范围介于 0 ~ 1 之间。具体情况如下所示:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>透明度</title>
  <style>
    div {
      background-color: lightcoral;
    }

    .light {
      opacity: 0.2;
    }

    .medium {
      opacity: 0.5;
    }

    .heavy {
      opacity: 0.9;
    }
  </style>
</head>

<body>
  <div class="light">这是一个测试内容.</div>
  <div class="medium">这又是一个测试内容.</div>
  <div class="heavy">这还是一个测试内容.</div>
</body>

</html>

img

单位

绝对长度单位

这种的长度是固定、不变化的。(px)

单位 名称 等价换算
cm 厘米 1cm = 96px/2.54
mm 毫米 1mm = 1/10th of 1cm
Q 四分之一毫米 1Q = 1/40th of 1cm
in 英寸 1in = 2.54cm = 96px
pc 十二点活字 1pc = 1/16th of 1in
pt 1pt = 1/72th of 1in
px 像素 1px = 1/96th of 1in

相对长度单位

相对长度单位所描述的长度一般会具有一个明确的参考物,例如父级元素、根元素或视口大小等。使用相对长度单位相对绝对长度单位更适用于现在越发复杂的终端设备的屏幕输出。

单位 相对于
em 父元素的字体大小
ex 字符“x”的高度
ch 数字“0”的宽度
rem 根元素的字体大小
lh 元素的line-height
vw 视窗宽度的1%
vh 视窗高度的1%
vmin 视窗较小尺寸的1%
vmax 视图大尺寸的1%
上一篇

【学习笔记】html结构化元素html标签的学习html5的学习