色彩要害表示一个颜色居然有这么多种方式

书接上文,上回书咱们讲了 CSS 中的远景色和背风景。说白了,所谓的远景色就是给字体设置色彩,不过人家就叫远景色,咱也是没啥措施。背风景相对来说是比拟简略的,但是要注意 background-color 属性的默认值是 transparent 表现透明。

知道了怎么设置远景色和背风景了,可是咱们一直都是在用代表某个色彩的英文单词来设置色彩的。这时候,你可能会问了,除了这种方法之外,还有没有其他方法同样可以设置色彩呢?

接下来,咱们就来说一说可以设置色彩值的类型。

色彩值的类型

其实呢,CSS 发展到 CSS3 版本,能用来表现色彩值的方法确定不能只有英文单词这么简略的方法了。目前,基础上可以分成 3 种,咱们也可以称为设置色彩值的 3 种类型:

  • 颜色要害字
  • RGB 颜色模式
  • HSL 颜色模式

看着这些名字是不是感到挺专业的?!其实吧,怎么说呢,名字这种东西就是个代号,便利人家记忆的。所以,千万别被名字所困惑了。

好了,闲话少叙,书归正传。咱们接下来就一个一个的来介绍每一种的应用方法吧。

颜色要害字

先来说说这个所谓的颜色要害字,简略来说,这个就是咱们说的用英文单词来表现某个具体的色彩值,只不过人家给了个相对专业的说法而已。

这个用来表现色彩值的英文单词是不区分大小的,也就是说,你大写小写什么的都是可以的。但是,咱们一般都是应用小写这种情势,比如 red 就表现红色、blue 就表现蓝色等等。当然了,咱现在说的都是比拟简略的颜色要害字。

不仅如此,CSS 从 CSS1 版本发展到 CSS3 版本,这个颜色要害字数量的变更还是比拟大的:

  • CSS1 版本时只有 16 个基础色彩,一般称为 HTML 的基础色彩。
  • CSS2 版本时增添了 orange 这种色彩。
  • CSS3 版本时增添的色彩数量比拟多,具体的你可以参考 MDN 网站有关颜色要害字的文章
这里有一点你可能须要注意一下,除了 CSS1 版本时的 16 个 HTML 基础色彩之外,其他所有色彩都是须要通过特定的盘算程序进行转换的。换句话讲,这些色彩在不同的阅读器中显示出来的后果很可能是不一样的。这也是咱们在实际工作中一般很少应用颜色要害字这种方法来设置色彩值的原因。当然了,你平时自己写点小案例什么还是无妨的。

在这些颜色要害字里面,有一个是比拟特别的,就是咱们之前说的 background-color 属性的默认值 transparent,它表现一个完整透明的色彩。

还有就是 transparent 在 CSS2 版本时并不是一个真实的色彩,到了 CSS3 版本时才重新被定义成了一个真实的色彩。当然了,这些你稍微懂得一下就行,究竟并不影响咱们应用不是?!

RGB 模式

说完了颜色要害字之后,咱们再来看看 RGB 模式是怎么样的。RGB 其实是一个缩写,全称是 Red-Green-Blue,表现的是红-绿-蓝。RGB 一般被叫做三原色,可是这个三原色有很多种呢,可不必定是红绿蓝这三个色彩。所以说呢,咱们现在 CSS 里面用的是本来工业上的一种色彩尺度。

当然了,这些你懂得一下就行,也不必深究。在实际应用的时候,咱们就是通过这三个色彩变更得到咱们最终想要的色彩。这么说有一点点抽象,咱们还在在一个例子里面来说比拟好。

首先,在说例子之前,咱们要先说一下在 CSS 中的 RGB 模式实际上有两种具体的用法:

  • 十六进制符号
  • 函数符

现在这么说,你确定是一脸懵逼的,是不?!没事儿,咱慢慢地来懂得它就行了。那么,咱们就先来说说所谓的十六进制符号的这种。

这种应用方法具体就是 #RRGGBB,也就是说,是一个 # 符号后面跟着 6 个字母,这 6 个字母就被称为十六进制符号。它们的值范畴是从 0 ~ 9,然后再从 A ~ F,一共是 16 位。

然后呢,每两位表现一个色彩,6 位刚好表现三个色彩值。比如如果咱们想设置的色彩为红色的话,就是 #FF0000。

这样,咱们就可以通过转变三个色彩的值来得到咱们最终想要的色彩了。这时候你可能会问了,有些色彩很难一下子就知道对应的红色、绿色和蓝色的值是多少,那要怎么设置呢?其实呢,这个问题咱们可以通过两种方法来解决:

  • 目前网上有很多供给色彩的 RGB 值的网站,比如比拟经典的有 Web 安全色。基础上,你自己搜索一下就会得到很多成果了。
  • 如果你做的案例是参考某个现有的网站或者 Web 利用的话,现在有很多的色彩取色器,也可以得到你想要色彩的 RGB 值。

上面说的这两种方法,基础上都是你自己练习做一些项目标时候能用上。如果是在工作中的话,一般色彩的值都是由设计人员来断定的,你只要用就可以了。所以就不要纠结这个问题了!

不过,咱们得说另外一个事儿,就是如果像刚才咱们设置红色的 RGB 值一样的话,你会发明表现三个色彩的两位值是一模一样的,比如 ff、00,这个时候咱们是可以省略一位的,就变成了 #f00。

接下来,咱们就在一个案例中来尝试用一下 RGB 模式的色彩值:

<style> .p1 { color: #ff0000; } .p2 { color: #f00; } </style> <p class="p1">这是一个段落内容.</p> <p class="p2">这也是一个段落内容.</p>