关于前端:CSS-颜色

4次阅读

共计 1138 个字符,预计需要花费 3 分钟才能阅读完成。

色彩是网页中必不可少的一个元素,例如咱们能够给某个字体设置色彩,给元素的边框设置色彩,设置元素的背景色彩等。要想一个网页难看,必定是须要给它增加一些色调的。

色彩值

色彩是通过对红、绿和蓝光的组合来显示的。咱们个别会通过上面三种形式来规定 CSS 中的色彩:

  • 色彩名称
  • 十六进制色彩值
  • RGB 色彩

色彩名称

HTML 和 CSS 色彩标准中定义了 147 种颜色名,其中有 17 种规范色彩,加上 130 种其余色彩。

例如 red 红色、green 绿色、blue 蓝色等,因为色彩名太多了,这里就不一一给大家列出来啦。咱们次要讲一下如何设置色彩。

示例:

例如通过色彩名,将字体色彩设置为红色:

color:red;

或者将元素的背景色彩设置为粉色:

background-color: pink;

应用的应用很简略,间接在 CSS 属性前面接色彩名即可,不须要加别的修饰符。

十六进制色彩值

十六进制色彩值就是通过十六进制来示意色彩,十六进制色彩的规定为:#RRGGBB。其中 RR 是红色、GG 绿色、BB 蓝色,十六进制整数规定了色彩的成。所有值必须介于 0-9 与 A-F 之间。

十六进制值应用三个双位数来编写,并且要以 # 号结尾。例如 #000000 彩色、#FF0000 红色、#00FF00 绿色、#0000FF 蓝色。

而当双位数雷同时(一二位雷同、三四位雷同、五六位雷同),能够缩写,例如 #000000 能够缩写为 #000#FF0000 能够缩写为 F00 等。然而像 #101010 这种就不能缩写。

示例:

例如别离将字体色彩设置为红色、绿色、蓝色:

color:#FF0000;
color:#00FF00;
color:#0000FF;

上述代码也能够简写成:

color:#F00;
color:#0F0;
color:#00F;

RGB 色彩

RGB 色彩值是通过 rgb(red, green, blue) 来规定的,三个参数别离定义红、绿、蓝的强度,参数值能够是介于 0 与 255 之间的整数,或者是 0% 到 100% 的百分比。

例如 rgb(255,0,0) 示意红色、rgb(0,0,255) 示意蓝色等。

示例:

例如将背景色彩设置为红色、绿色、蓝色:

background-color:rgb(255,0,0);
background-color:rgb(0,255,0);
background-color:rgb(0,0,255);

总结

上述就是咱们所讲的三种规定 CSS 中色彩的办法啦,能够设置应用的色彩有很多,但咱们不可能将这些色彩值全副记住,所以其实只须要搞清楚色彩值是怎么应用的就能够啦。

像咱们平时工作中,个别会由设计师将网页设计好,而后将设计图给咱们,咱们在制作网页的时候,就只须要通过色彩汲取器吸一下设计图中的色彩,而后就晓得是什么色彩啦。

链接:https://www.9xkd.com/

正文完
 0