尚硅谷前端基础 (42)

好，说完了，我们这个长度单位，在我们的CSS里还有一个用的比较多的一个单位，我们叫做一个，诶叫做一个颜色单位啊，颜色也就是说颜色单位顾名思义就是用来设置我们这个颜色的啊，还是打开一下。Open啊。然后呢，在这里面我们关掉，在这儿我们来写一下啊，重新刷新一下啊。好，在这里面我们看一下是不有问题，因为刚才没写代码就交来了，OK，没有问题，我们接着来说啊，在这我们创建一个BOXS1，直接来一个点一个BOX1，然后在里面我们来写一下这个样式子带标签，然后这是一个点一个BOX1，所以颜色刚才我们我们已经设置过了，对吧，White我来个100个像素，Hi，是一个100个像素，然后background color background color，比如说我来一个red，对吧，来一个red，那现在它是不是就是一个红色背景了，哎，所以这个red现在它就是一个颜色单位啊，就是一个颜色单位，那我们除了这个东西，我们来说一下啊，我们的颜色单位。

我们颜色的一个单位，哎，在我们的这个CSS中，我们可以什么呢？我们可以直接使用我们这个颜色的名，作为什么呢？作为我们这个诶颜色啊，用使用颜色名哎来设置我们这个各种颜色啊，来设置各种颜色，比如什么呢？哎比如什么。Red呀，哎，那我知道我常用的是吧，Red还有什么orange哇，什么yellow啊yellow，然后这来一个这个blue是吧，Blue，诶green什么green green什么yellow green什么chocolate，什么silver等等等等，是不是有各种各样的颜色呀，哎各种各样颜色，那基本上我们这些颜色都可以用来去，哎用来去表示我们这个，哎字体颜色也好，还是背景颜色也好，用它都是可以的啊，它都是可以的，但是这里边又会产生了一个。

一个问题啊，一个问题，什么问题呢？那现在我们这个颜色有这么多，那我问你了，我们这些颜色虽然多，哎，那你你能记几个，你能记几个，哎，你能记的颜色是不是也有数啊，哎，你不可能把所有颜色都给它记住了，这是一个问题。第二个问题，那我们颜色是很多，那比如说我现在想，那你给我说一下这是什么颜色。你知不知道，哎，你不知道这个颜色，这颜色你没有办法描出来，或者这个这是什么颜色，这小虫子，这什么颜色，哎，这有点诶白不唧唧，有点灰不唧唧是吧？这叫什么颜色呀，你怎么用英语描述啊，你甭能用英语了，你用中文你都不好去描述这个颜色，所以关于这种颜色的名字，你用的时候非常的不方便啊，非常不方便，哎所以这里边注意诶但是但是在什么呢？哎，在我们的这个CS中，哎直接。

哎，使用这个颜色名是非常的不方便，首先第一点不方便，第记不住，第二点不方便，你不好去描述啊，你不好去描述，所以颜色名并不是一个我们很常用的一个描述颜色的一个方式，哎，那不用颜色名，你要用什么呢？那不用颜色名，我们要用什么颜色呢？那其实我们主要用的一种方式，我们叫做一个RGB值。RGB值啊，我们可以使用一个RGB值来表示我们这个颜色，RGB值怎么写的啊，RGB值实际上就是什么呢？RGB其实就是什么？RGB其实就是通过哎三种颜色的这个不同的一个浓度，哎来哎，调配出哎不同的一个颜色。

非常简单啊，R表什么意思呢？R就表示的是一个red啊，R就表示一个red，而我们这个G就表示一个GR表示的是一个，而我们这个B表示的是一个什么呢？叫做一个blue，叫做一个blue，这个就是我们所谓的一个RGB值，实际上就是三种，三种颜色啊，红色你有多少？哎，这个绿色你有多少，蓝色你有多少是吧？那你谁多诶全都是红的，没有绿的，没有蓝的，那就是红的，全都是绿的，没有其他的，那就是一个绿的，诶全都，诶红的全全都是绿的，全都是没有蓝的，那可能就是一个黄色，对吧？通过这些方式来表示我们这个颜色，所以这里边我们来说一下，我们说了每一种颜色的范围，哎在什么呢？在我们叫做一个零到255之间啊，零到255之间，哎，最小是零。

诶，最大是255，或者你也可以写成什么呢？写成零，诶0%到我们这个100%之间，也就是说你也可以用百分数，0%就相当于零，100%就相当于255，就这么一个非常简单演示一下，我们来说一下它一个语法，语法是怎么写的，就是一个RGBRGBRGB，然后呢，我们第一个括号啊，括号，然后第一个值是什么呢？是我们这个红色，然后逗号，然后是我们这个绿色，然后逗号，然后是我们这个蓝色啊，三种颜色的一个浓度，所以在这我就可以怎么写呢？我直接来一个BA background color，我们来一个RGBRGB，你看哎，你看人家都给你提示了是吧，第一个是红色浓度，红色，我比如说我写一个255啊，然后是我们绿色，绿色我写一个零，蓝色我也写一个零，那就是什么意思，红色。

最大红色最大，然后蓝色绿色是不是都没有啊，哎，绿色蓝色都没有，那就是一个什么，就是一个红色啊，就是一个红色，好，我再写一个，那现在我干嘛呢。我复制一个啊，我把红色变没，然后呢，我把这个调成最大，哎，红色没有，诶上面没写分号是吧，把分号补上，把分号补上来看红色没有，绿色最大，蓝色没有，然后他说。他说就变成这样一个这样一个绿色呀，哎，就这样一个效果，其实很简单啊，其实很简单，那然后呢，我再调整一下，我把个什么呢？我把这个绿色调眉，我把红色调成最大，这个蓝色调成最大，那这时候就是一个蓝色啊，所以三种颜色值这个是我们的啊RG还有B啊三种颜色，但是这里边注意我们这个叫做一个三原色，但是这个三原色又跟我们的那个。

上学呢，学美术课那个三原色不一样，因为这不是我们那个美术的三原色，这叫什么呢？叫光的三原色，哪不一样呢？最典型的每束三颜色里面，我们好像是红黄蓝对吧？好像是红黄蓝，我记不太清楚了，是三种颜色条都有，那这个时候是一个黑色对吧？都没有是个白色都有是个黑色，而我们这个正好相反，如果什么呢？我这直接来一个RGB，如果。三种颜色都没有，三种颜色都没有，那么它将是一个黑色啊，如果三种颜色都是最大二五五，诶，这个第二个也是255。诶，第三个也是255，这个时候它就是一个白色，为什么？因为这个叫做一个光的三原色啊，叫做一个光的三原色，所以它的计算是根据什么？是根据光的值计算的，三个值都是零，那等于把灯关了，把灯关了那是不是就是黑色呀，哎，都那就黑色，如果三个值都是255，那就等于光的值都变成最大了，都变成最大就汇成了阳光，我们那个白光就是一个白色的，就像我们七色光，是不是七种色彩汇聚成一个光啊，哎，所以这个就是我们说的一个颜色的一个设置啊，RGB值，那RGB值，通过RGB值我们可以表示出多少种颜色啊，那就是255乘以255乘以255，那通过这种玩意儿，你想调什么色，你是不是就能调什么色，哎，就能调什么色，但我同学说了，诶老师你说这个的确RGB值能表示出的颜色有很多，但是。

实际上它还有一个问题啊，诶，你刚才还是那个问题，你说了，你说你用颜色名儿说不出这是什么颜色，你现在用RGB值，你能说出这什么颜色吗？哎，你这个问题啊，还真把我问住了，我确实说不出来这是什么颜色，我要说出来这是新星的，我用RGB值我也说不出来。哎，大家注意了，RGB值的本质是什么？它的本质就是把我们的颜色转换成了一个一个的数字，也就是说它可以直接用数字去表示出各种各样的颜色，那这样有什么好处？数字对于我们人人来说并不好识别，但是数字对于谁好识别呢？哎，我们的机器，所以这个颜色我们虽然没有人没有办法描述它，但是对于计算机来说，这个就实在是太简单了，诶工具有很多，举个例子，像我们之前给你展刚才说的，用用那工具fast。

我们直接点开它，呃，你不是想知道这是什么颜色吗？哎，当然我想知道对吧，你可能不想知道，我们直接点开它，是不是有一个屏幕取色器啊，哎，屏幕取色器怎么办？你想要哪个颜色怎么办？吸它啊吸它你想要这个颜色直接放在这儿，直接哎，你这一吸走你，哎，你看这是不是就有一个RGB值啊，诶直接给它复制过来，你往这儿一粘起火，这颜色就出来了，这就是它的颜色，懂我意思吗？哎，你想要什么颜色，你就吸它就完了，你想要这个绿不拉几的颜色对吧？直接找到它，诶直接我们就干嘛呀？哎，吸它完事啊，找到这个直接一吸走你RGB值是不是跟这儿呢？直接复制往这一粘。

保存是不是就完事儿了，哎，就完事儿了啊，是这样一个效果，所以你转换成数字，我们人虽然还是依然不方便识别，但是对于我们的计算机来说，对于我们的软件来说，它识别起来就非常的方便了啊，非常方便，好这个是我们说的一个RGB值，当然啊，你还可以替换成百分比的，百分比就是0%，就相当于是零，100%应于2%就是255啊呃，这个呢，我到时候用的不多，你知道一下就行了，我们不多展示了，然后除了RGB值以外，我们还有一个叫RGBA的值rgba rgba其实跟rgba一样，它就是在我们RGB基础上多了一个AA表什么意思？A表示的是一个这个透明，诶，A就是我们这个阿尔法透明叫A，所以在这儿我们可以直接写一个，诶写一个A啊，写一个A，然后呢，你写了A以后，它是要对应四个值啊，四个值，所以后边我再写一个，比如说我写一个点五啊，点五就是0.5啊，写1.5。

你会发现它就在点发白了，诶为什么发白了呢？因为现在等于是给它设置上了一个透明的效果，半透明啊，半透明如果是一的话，如果是一就是100%，百之百，那就是不透明啊，就是不透明，如果是零，那就是什么了，就没了啊，就没了，所以这个点五等于设置一个半透明的效果，如果它下边有别的元素，那个元素就能从这透上来，但是现在我们还没有讲，我把两个元素给它摆一起，所以现在你先知道一下RGBA就是什么呢。

RGBA就是哎，在我们这个RGB的这个基础上，哎增加了一个这个A表示什么呢？诶表示我们这个不透明度啊，表示不透明度啊，一就表示完全不透明，点五就表示半不透明，就是半透明对吧，半透明零就表示完全透明啊我们这个最后一个哎需要什么呢？需要四个值啊需要四个值前三个，前三个和我们RGB一样啊一样，第四个表示什么呢？表示我们不透明度啊，不透明度我们来说一下啊，我们这个一一表示完全不透明，而我们这个零表示什么呢？哎，表示完全透明啊，那点五那就是什么呀？诶点五就是半透明啊半透明当然你也。

可以传其他的对吧，点3.2.1对吧，都可以啊，可以传小数，这是我们说的这两种rgba，还有RGBA啊这两种还有一种是我们叫做一个16进制的一个RDB值，它其实也是RDB值啊，就是改用16进制表示的，它的语法我们直接说了，语法是什么呢？是井号哎，三个颜色，红色，绿色，还有这个蓝色啊，通过三个颜色它是一个16进制的，那这里面它的红色浓度，我们这个颜色浓度，颜色浓度通过我们这个零，零，还有到FF之间表示FF，我们说一看到FF，我们要知道它是16进制的，因为16进制数字是从零一直到F啊，012346789 ABCDEEF，这是我们16进制的一个二进值啊，那这个零就表什么呢？表示没有FF就表示最大。其实这个FF就相当于我们十。

这个十进制里边那255其实是一样，表示起来怎么看，我们来看一下，还是直接来一个background，我们直接来一个号号F0000，哎你看这就表示了一个红色，它一共是六位啊，一共是六位，前两位表示的是红色，中间两位G表示的是绿色，最后两位这个B表示的是蓝色啊这么两位两位的FF最大，零零就表示没有啊，就表示没有，所以这个时候如果你想表示一个黄色，那就是什么呢？那就是我们的个，诶红色跟我们的这个绿色最大，哎，然后呢，蓝色没有，那就是一个黄色是这么表示的，然后这种颜色它有一种特殊的地方，注意了，如果什么呢？如果我们颜色两位两位重复，两位两位重复可以什么呢？可以什么呢？可以进行简写啊，可以进行简写什么意思，比如说我们井号a ABB CC，你看是不是。

啊位两个重复啊，它就可以写成井号ABC，井号ABC，所以像这个我这是不是一个FFFF00啊这个东西我就可以简写，简写成什么呢？简写成FF0是一样的啊，是一样的简写，但是注意能简写的前提是两位两位重复，你如果是这么一个a abdcd，这还能不能简写了，不能简写了，因为你最后那两位不一样，所以能简写得是两两重复才可以啊，两两重才可以，好那这里边，所以像我们就可以写这么一个颜色，这么一个颜色我经常用的一个颜色啊叫什么呢？叫做一个BFA，哎，BFA这是一个叫做豆沙绿，这是一个护眼的颜色是吧，对眼睛比较好，像这个白色，就它微点刺眼，这个颜色就比较的比较柔和一些啊，比较柔和一些，那这个颜色的完整写法是什么？完整写法就是BBFAA，对吧？这是一个完整斜法啊，完整写法同样用。

我们这个取色器也可以对这个颜色进行取，取色器，你比如说取这颜色吧，我这一取是不是也有16进制的，哎，你想取哪个，它也是有16进制的啊，直接取的还是取取这个吧，蓝的。这一群是不是也有一个16进制的颜色呀？哎，你也可以用它直接复制，然后来设置都行啊，就是我们这RDB值跟16进制都行啊，都行好，这个是我们说的一个颜色啊，这个东西是我们比较常用的，然后这个颜色其实在我们的CSR，在我们这个Vs code里，你看你还可以选，诶比如说你不知道想用什么颜色了，它你一放这，它会给你出现这个颜色的一个选择是吧，你可以自己选，他可以给你给你给可以给你调，对吧，你选一个，哎，你可以上下拖，上下拖一选，是不是给你选出这么一个颜色来啊，可以去拖啊，你这一放这，它就出现这个选色这个调色这个选项，所以借助这个工具，我们也可以调出这个很多的颜色，那这我就不一一展示了，自己尝试去用一下啊，尝试去用一下，我们这儿呢，先先停一下。