本节我们来讲一下颜色,因为我们后面学习 CSS 样式时,会经常用到颜色,颜色也是网页中必不可少的一个元素例如我们可以给某个字体设置颜色,给元素的边框设置颜色,设置元素的背景颜色等要想一个网页好看,肯定是需要给它添加一些色彩的,我来为大家讲解一下关于css中颜色表示方法有哪些?跟着小编一起来看一看吧!
css中颜色表示方法有哪些
本节我们来讲一下颜色,因为我们后面学习 CSS 样式时,会经常用到颜色,颜色也是网页中必不可少的一个元素。例如我们可以给某个字体设置颜色,给元素的边框设置颜色,设置元素的背景颜色等。要想一个网页好看,肯定是需要给它添加一些色彩的。
颜色值颜色是通过对红、绿和蓝光的组合来显示的。我们一般会通过下面三种方式来规定 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(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 中颜色的方法啦,可以设置使用的颜色有很多,但我们不可能将这些颜色值全部记住,所以其实只需要搞清楚颜色值是怎么使用的就可以啦。
像我们平时工作中,一般会由设计师将网页设计好,然后将设计图给我们,我们在制作网页的时候,就只需要通过颜色吸取器吸一下设计图中的颜色,然后就知道是什么颜色啦。
,