阅读 688

(Ⅰ)CSS 指定颜色的方法 | CSS 值和单位

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码

1. 你有没有使用过视网膜分辨率的图形?当中使用什么技术?
2. px,em,rem,vw 有什么区别?
复制代码

🙋上方面试题“参考答案详解”,请点击此处查看获取方式!



前言: 本篇也是一篇纯基础、纯理论文章,但重要性毋庸置疑。

在利用 CSS 能做的几乎所有工作中,其基础都是“单位”,这是影响所有属性的“颜色”、“距离”和“大小”的一种元素。如果理解了本篇介绍的相关知识,你就能更快地学习和使用 CSS 的余下内容。


1 指定颜色

对于“颜色”的学习,让我们先认真复习文章:《从零基础到轻松就业 | 用李涛高手之路前 3 节课开启我们光与色的大门》

在此篇基础上,我们可以很轻松的认识到:一个 Web 创作人员至少可以用 3 种方法来设置“颜色”。

1.1 按“颜色名”指定颜色

CSS2.1 定义了 17 种颜色名,CSS3 中包含了基于标准 X11 RGB 值的 140 种颜色的扩展颜色表。如下例,这些颜色可以直接以“名字”的方式拿来用,大多数浏览器都能识别。

h1 {
  color: red;
}

h2 {
  color: green;
}

h3 {
  color: maroon;
} /* 褐红色 */
复制代码

但,这种颜色展示方式的弊端就在于,没办法指定色谱中任意的颜色。

1.2 函数式 RGB 指定颜色

如下例,可以用“整数记法”,也可以用对应的“百分数记法”。二者没有孰优孰劣之分,实际工作中“整数记法”更常用,更有用。

❗️百分数是针对“255”来相应计算的,因为,RGB 三者中的任何一种光都有 0-255 个颜色的位置(0 是接近无颜色,255 就是很纯的红、绿、蓝)。实际工作中,没必要对二者进行转换。

h1 {
  color: rgb(255, 0, 0);
} /* 红色 */

h3 {
  color: rgb(50%, 0%, 0%);
} /* 褐红色 */

h3 {
  color: rgb(128, 0, 0);
} /* 褐红色 */
复制代码

1.3 十六进制 RGB 指定颜色:

h1 {
  color: #CC6600;
}
复制代码

❗️上例代码中,#CC6600 就是一个十六进制码。格式为:

  • # 开头;

  • 按顺序分别用两位数字指定红、绿、蓝的分量;

  • CC 为“红”的分量、66 为“绿”的分量、00 为“蓝”的分量。

十六进制码并不是基于 0-9 这 10 个数字,而是基于 0-F 这 16 个数字:0、1、2、3、4、5、6、7、8、9、A(对应 10)、B(对应 11)、C(对应 12)、D(对应 13)、E(对应 14)、F(对应 15)。

把“十六进制码” #CC6600 转化为“十进制”:

  • 将十六进制颜色分解为“红”、“绿”、“蓝”份量:

    红:CC
    绿:66
    蓝:00

  • 以 CC 为例,我们知道,十进制用两位数最大只能表示 99,而十六进制是想通过用两位数来表示 0-255 这所有 256 个值。

那意思就是,十进制是逢十进一,而十六进制是逢十六进一。
那同为两位数 CC,在十进制下,是十位的 C 个十、个位的 C 个 1;而十六进制下,就是十六位下的 C 个十六、个位的 C 个 1。
故:十六进制下的 CC 转化为十进制为:12✖️16 + 12✖️1 = 204。

  • 同理得:
    • 66:6✖️16 + 6✖️1 = 102
    • 00:0✖️16 + 0✖️1 = 0

即:

h1 {
  color: #CC6600;
}
复制代码

等同于:

h1 {
  color: rgb(204, 102, 0);
}
复制代码

也等同于:

h1 {
    color: rgb(80%, 40%, 0%);
}
复制代码

💡当然,要把 RGB 十进制转化为十六进制则是:用十进制数字➗16,所得数字小数点前的整数部分为“十六位”;再将小数点后的数乘以 16,所得的数为个位。


下篇我们继续讨论下一个知识点——“绝对长度单位”和“相对长度单位”。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论