码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-06-05 00:48:02      阅读:1101      评论:0      收藏:0      [点我收藏+]

标签:局限   color   绿色   back   红色   一点   多少   进制   ecif   

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

   

   

    

 



 

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

标签:局限   color   绿色   back   红色   一点   多少   进制   ecif   

原文地址:https://www.cnblogs.com/cqy1125/p/9132065.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!