共计 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/