css颜色属性及设置颜色的地方
css颜色属性
在css中用color属性规定文本的颜色。
默认值是not specified 有继承性,在javascript中语法是object.style.color="#FF0000"
取值方法
1,英文单词color:name;规定颜色值为颜色名称的颜色。
但是英文单词能够表达的颜色是有局限性的,不是所有的颜色都有英文名字,就像所有的颜色也不会都有中文字一样。
2,RGB(red红色,green绿色,blue蓝色)
rgb格式,格式rgb(0,0,0);
rgb格式,其实 就是三原色,r(red红色)g(green绿色)b(blue蓝色)
三原色会搭配出所有的颜色,格式中第一个数字代表红色的显示亮度,第二个代表绿色显色亮度,第三个代表蓝色显示亮度。他们的取值范围都在0-255之间,0代表不发光,255发光,值越大越亮。
红色:rgb(255,0,0)
绿色:rgb(0,255,0)
蓝色:rgb(0,0,255)
黑色:rgb(0,0,0)
白色:rgb(255,255,255)
三个值越小越偏黑色,越大越偏白色,三个值一样的时候就是灰色,值大小决定亮度。
其外还有rgba,这里a代表透明度,取值范围是0-1,取值越小越透明,在css中opacity也可以设置透明度,那么他们之间的区别在于什么呢?
他们的区别就是:当你想在透明的背景上面显示其它元素时,opacity会让里面元素透明,而rgba不会这样做。
3,十六进制表示的颜色,格式:color:#ffcc00(例如);
十六进制的方法,本质就是rgb,每两位表示一个颜色,例如上面,ff表示r,cc表示g,00表示b。
大家都知道10进制吧,就是逢10进1,十六进制就是逢16进1,
相应的数值转换就得到相应的颜色,对了还有一点就是,当没两位一样的时候我们就可以缩写,如例子我们可以写为:color:#fc0;
4,HSL颜色
IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。
HSL(色调Hue,饱和度Saturation,明度Lightness)。
色相是在色轮上的程度(从0到360)-0(或360)是红色的,120是绿色的,240是蓝色的。
饱和度是一个百分比值;0%意味着灰色和100%的阴影,是全彩。
亮度也是一个百分点;0%是黑色的,100%是白色的。
HSL更符合人类的直观感觉,比如人一般表达一个颜色会这样说:有点浓的暗红色。而不会说红色占多少,绿色占多少,蓝色占多少。
而RAG适合机器识别颜色。
都会在哪里用到颜色呢
简单总结一下
首先文字color,文字还有文字下划线颜色text-decoration-color,
其次就是盒模型的边框border-color(边框的颜色每个方向都可以单独设置颜色border-left-color,border-right-color,border-top-color,border-bottom-color)和背景颜色background-color。
a标签鼠标浮动,点击,未访问,已访问时字体的颜色和背景颜色。
表格的文本背景颜色,及表格的边框颜色。
轮廓outline-color()。