CSS关于颜色使用的理解(单词、RGB、十六进制)

来源:互联网 发布:u盘重新安装mac os x 编辑:程序博客网 时间:2024/05/29 14:09
    初入前端,写代码时颜色值一直用的取色器直接取出的十六进制单位,今天看书看到关于颜色的内在常识,记录一下~~  

主要三种表达方式:

  • 命名颜色
    直接用英文单词表示,css规范应该定义了17个颜色名,可以直接查一下。例如:
    h1 {color:red;}

  • 用RGB指定颜色
    计算机屏幕通过三原色红、绿、蓝组合成各种颜色。rgb(color)括号里包含三个数字,可以用百分数,也可以用整数
    用百分数指定白色和黑色:
    rgb(100%,100%,100%) 三个原色全部组合就是白色,分别是红、绿、蓝
    rgb(0%,0%,0%)
    用整数指定相应为:
    rgb(255,255,255) 整数范围0~255 和0%~100%是对应的
    rgb(0,0,0)


    如果想要红色的标题,则:
    h1 {color: rgb(100%,0%,0%);}
    如果想要紫红色标题,则:
    h1 {color: rgb(50%,0%,0%);}或者h1 {color: rgb(127,0,0);}
    这里写图片描述
    如果想要灰色的段落,则:
    p {color: rgb(50%,50%,50%);}
    这里写图片描述
    注:大于255的值即100%会被认为是255,小于0即0%的值被认为是0
    p {color:(300%,400%,500%);}等价于p{color:(100%,100%,100%);}

  • 十六进制rgb颜色
    例如h1{color: #FF0000;} 等价h1{color: rgb(100%,0%,0%);} 等价h1{color:rgb(255,0,0);}都是红色h1标题

    可以看到,这种语法为#RRGGBB,将三个介于00~FF之间的十六进制连起来,FF即256,做一个进制转换就可以了。
    注:#6FA与#66FFAA等价,可以用三位表示,浏览器取每一位并复制成两位