前端课程——颜色与单位

Dreamy.TZK

发布于 2020-04-09 14:36:13

8880

发布于 2020-04-09 14:36:13

文章被收录于专栏：小康的自留地小康的自留地

颜色与单位

有关颜色的相关概念

色调：很接近通俗意义上的颜色。图像的相对明暗程度，在彩色图像上表现为颜色（简单的理解为颜色）
饱和度：是指颜色中灰色的含量。色彩的纯洁性（颜色中灰色的含量），也叫饱和度/彩度。
亮度：是指颜色中黑色的含量。发光体的光源面积之比（黑色的含量）
对比度：前景色与背景色之间的差异。明暗区域最亮的白和最暗的黑之间不同亮度层级的测量，差异范围越大代表对比越大，差异范围越小代表对比越小。
Web 安全色：不需要担心颜色在不同硬件环境、操作系统和浏览器之间的差异。不必担心因不同硬件（浏览器）而造成的颜色不同。Web 安全色目前基本具有 216 种颜色，其中色彩为 210 种（开发时使用的颜色），非色彩为 6 种。关于 Web 安全色的具体颜色以及值，可以参考 https://www.bootcss.com/p/websafecolors/。

前景色与背景色

CSS 中的前景色和背景色就是 color 和 backgorund-color 两个属性，其中 color 属性表示前景色，background-color 属性表示背景色。

颜色值的类型

色彩关键字 色彩关键字是一个不区分大小写的标识符，其表示一个具体的颜色，例如 red 表示红色、blue 表示蓝色等。 .test{ color:blue; }
RGB 色彩模式 RGB是一个简称，全称为 Red-Green-Blue，即红-绿-蓝。RGB 色彩模式是工业界的一种颜色标准，是通过对红、绿、蓝三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。以下三个表示同一个值 #p1 { background-color: #FFCC33; } #p2 { background-color: #FC3; } #p3 { background-color: rgb(255, 204, 51); }
HSL 色彩模式 HSL是一个简称，全称为 Hue-Saturation-Lightness，即 色调-饱和度-亮度。HSL 色彩模式是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。在 CSS 中使用 HSL 色彩模式是通过 hsl(H, S, L) 函数实现的，具体含义如下：
- **H **表示色调，其值范围为 0 ~ 360 之间的一个角度。
- S 表示饱和度，其值范围为 0% ~ 100% 之间的百分值。
- L 表示亮度，其值使用百分值表示。0%表示黑色，50%表示标准色，100%表示白色。
p { background-color: hsl(50, 33%, 25%); }

透明度

opacity属性，介于0~1之间，如果大于1则当做1。

如果值为 0 或 0.0 则表示完全透明
如果值为 0.5 则表示半透明
如果值为 1 或 1.0 则表示不透明 .light { opacity: 0.2; }
RGB 模式增加了 rgba(R,G,B,A) 函数，其中 A 为 alpha 表示透明度。
HSL 模式增加了 hsl(H,S,L,A) 函数，其中 A 为 alpha 表示透明度。

颜色模式

属于 CSS2 版本的是 rgb() 函数，CSS3 新增加了 rgba()、hsl() 和 hsla() 函数。这样就形成了四种具体的颜色模式。

CSS的值与单位

CSS 中的值是一种定义允许子值集合的方法。例如我们现在可以使用色彩关键字、RGB 色彩模式或 HSL 色彩模式不同类型来描述颜色值。

在 CSS 中除了颜色值需要不同类型描述之外，比较常见的还有长度值也需要不同类型描述，例如 10px 或 50% 等。

CSS中描述长度时需要加上单位

绝对长度单位这种长度时固定的不变的，在HTML中常见的单位为像素（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%

像素值（px）

像素的英文为 Pixel，简写为 px。像素是指在由一个数字序列表示的图像中的一个最小单位。简单来说，如果我们把一张图片放大数倍，会发现这些连续色调其实是由许多色彩相近的小方点所组成，而这些小方点就是构成影像的最小单元就是像素。

百分比（%）

**百分比（%）**总是将某个值作为参考，设置为这个参考值的百分比，例如 40%。在 CSS 中一般情况下，百分比（%）多是将当前 HTML 元素的父级元素作为参考值。例如如果一个父级元素拥有两个子级元素，一个子级元素的宽度为 40%，另一个子级元素的宽度为 80%，那么第二个子级元素的宽度就是第一个子级元素的宽度的 2 倍。如下示例代码所示

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

<head>
  <meta charset="UTF-8">
  <title>百分比</title>
  <style>
    .parent {
      width: 200px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    #child1 {
      width: 40%;
      height: 50px;
      background-color: limegreen;
    }

    #child2 {
      width: 80%;
      height: 50px;
      background-color: lightslategray;
    }
  </style>
</head>

<body>
  <div class="parent"><!--宽度200px，高度100px-->
    <div id="child1"><!--高度20px，宽度80px</div>-->
    <div id="child2"><!--高度50px，宽度160px</div>-->
  </div>
</body>

</html>