css颜色属性及设置颜色的地方

时间:2021-10-17 16:36:45

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()。