• 技术文章 >web前端 >css教程

    css颜色有几种写法

    青灯夜游青灯夜游2021-02-25 13:50:51原创4642

    css颜色有4种写法:1、使用颜色名,例red、black、gray等;2、使用十六进制数值,例“#FF0033”;3、RGB或RGBA值,例“rgb(255,0,51)”;4、HSL或HSLA值,例“hsl(120,100%,25%)”。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css颜色的几种写法

    1、使用颜色名

    虽然目前已经命名的颜色约有 184 种,但真正被各种浏览器支持,并且作为 CSS 规范推荐的颜色名称只有 16 种,如下表所示。

    表1:CSS 规范推荐的颜色名称

    /*名 称	颜 色	名 称	颜 色	名 称	颜 色
    black	纯黑	silver	浅灰	navy	深蓝
    blue	浅蓝	green	深绿	lime	浅绿
    teal	靛青	aqua	天蓝	maroon	深红
    red	大红	purple	深紫	fuchsia	品红
    olive	褐黄	yellow	明黄	gray	深灰
    white	壳白*/

    不建议在网页中使用颜色名,特别是大规模的使用,避免有些颜色名不被浏览器解析,或者不同浏览器对颜色的解释差异。

    【推荐教程:CSS视频教程

    2、十六进制颜色

    十六进制符号 #RRGGBB 和 #RGB(比如 #ff0000)。"#" 后跟 6 位或者 3 位十六进制字符(0-9, A-F)。

    这是最常用的取色方法,例如:

    #f03
    #F03
    #ff0033
    #FF0033

    3、RGB,红-绿-蓝(red-green-blue (RGB))

    规定颜色值为 rgb 代码的颜色,函数格式为 rgb(R,G,B),取值可以是 0-255 的整数或百分比。

    rgb(255,0,51)
    rgb(255, 0, 51)
    rgb(100%,0%,20%)
    rgb(100%, 0%, 20%)

    扩展:RGBA,红-绿-蓝-阿尔法(RGBa)

    RGBA 扩展了 RGB 颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。a 表示透明度:0=透明;1=不透明。

    rgba(255,0,0,0.1)    /* 10% 不透明 */  
    rgba(255,0,0,0.4)    /* 40% 不透明 */  
    rgba(255,0,0,0.7)    /* 70% 不透明 */  
    rgba(255,0,0,  1)    /* 不透明,即红色 */

    4、HSL,色相-饱和度-明度(Hue-saturation-lightness)

    色相(Hue)表示色环(即代表彩虹的一个圆环)的一个角度。
    饱和度和明度由百分数来表示。
    100% 是满饱和度,而 0% 是一种灰度。
    100% 明度是白色, 0% 明度是黑色,而 50% 明度是"一般的"。

    hsl(120,100%,25%)    /* 深绿色 */  
    hsl(120,100%,50%)    /* 绿色 */       
    hsl(120,100%,75%)    /* 浅绿色 */

    扩展:HSLA,色相-饱和度-明度-阿尔法(HSLa)

    HSLa 扩展自 HSL 颜色模式,包含了阿尔法通道,可以规定一个颜色的透明度。 a 表示透明度:0=透明;1=不透明。

    hsla(240,100%,50%,0.05)   /* 5% 不透明 */   
    hsla(240,100%,50%, 0.4)   /* 40% 不透明 */  
    hsla(240,100%,50%, 0.7)   /* 70% 不透明 */  
    hsla(240,100%,50%,   1)   /* 完全不透明 */

    更多编程相关知识,请访问:编程视频!!

    以上就是css颜色有几种写法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css 颜色
    上一篇:css怎么设置字体白色描边 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• css中如何让文字大小改变• 在css中设置边框可以用哪些属性• css3中怎么调节透明度• css设置外边距的属性名是什么
    1/1

    PHP中文网