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

       

       

        



  • 相关阅读:
    LeetCode--371--两整数之和
    《Cracking the Coding Interview》——第17章:普通题——题目10
    《Cracking the Coding Interview》——第17章:普通题——题目9
    《Cracking the Coding Interview》——第17章:普通题——题目8
    《Cracking the Coding Interview》——第17章:普通题——题目7
    《Cracking the Coding Interview》——第17章:普通题——题目6
    《Cracking the Coding Interview》——第17章:普通题——题目5
    《Cracking the Coding Interview》——第17章:普通题——题目4
    《Cracking the Coding Interview》——第17章:普通题——题目3
    《Cracking the Coding Interview》——第17章:普通题——题目2
  • 原文地址:https://www.cnblogs.com/cqy1125/p/9132065.html
Copyright © 2020-2023  润新知