css颜色值有哪几种表达方式?css中的颜色的表示方法

css颜色共有四种颜色取值方式

属性名

如:文字颜色:color
• 如:背景颜色:background-color

css颜色值有哪几种表达方式?css中的颜色的表示方法

 

取值类型①:关键词
Ø 常见颜色取值:
• red:红色
• green:绿色
• blue:蓝色
• yellow:黄色
• orange:橘色
• skyblue:天蓝色
• pink:粉色

 

取值类型②:rgb表示法

每项取值范围:0~255
Ø 常见颜色取值:
• rgb ( 255 , 0 , 0 ) :红色
• rgb ( 0 , 255 , 0 ) :绿色
• rgb ( 0 , 0 , 255 ) :蓝色
• rgb ( 0 , 0 , 0 ) :黑色
• rgb ( 255 , 255 , 255 ) :白色

 

取值类型③:rgba表示法

其实,比rgb表示法多个一个a,a表示透明度

a的取值范围:0~1
• 1:完全不透明
• 0:完全透明
Ø 省略写法:
• rgba ( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )

 

取值类型④:十六进制表示法

取值范围:
• 两个数字为一组,每个数字的取值范围:0~9 , a , b , c , d , e , f
Ø 省略写法:
• 如果三组中,每组数字都相同,此时可以每组可以省略只写一个数字
• 正确写法:#ffaabb 改写成 #fab
Ø 常见取值:
• #fff :白色
• #000 :黑色
Ø 注意点
1. 类似于:#ffaabc 不能改写成 #fabc
2. 实际开发中会直接使用测量工具直接得到颜色,不需要前端自己设计颜色,直接复制粘贴即可。

css颜色值有哪几种表达方式?css中的颜色的表示方法

主题测试文章,只做测试使用。发布者:果壳日志,转转请注明出处:https://www.xin12123.com/n/518.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年 11月 12日 下午4:52
下一篇 2022年 11月 13日 下午2:49

相关推荐

  • img标签和背景图片的区别

    需求:需要在网页中展示一张图片的效果?Ø 方法一:直接写上img标签即可• img标签是一个标签,不设置宽高默认会以原尺寸显示Ø 方法二:div标签 + 背景图片• 需要设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签

    CSS 2022年 11月 13日
    00
  • css文本样式属性,css文本样式有哪些

    文本缩进 属性名:text-indent 属性名:text-indentØ 取值:• 数字+px• 数字+em(推荐:1em = 当前标签的font-size的大小)   文本水平对齐方式 属性名:text-align 注意点:• 如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置   文本修饰 属性名:t…

    2022年 11月 12日
    00
  • css背景相关属性有哪些,css背景相关属性连写

    背景颜色 属性名:background-color(bgc)Ø 属性值:• 颜色取值:关键字、rgb表示法、rgba表示法、十六进制……Ø 注意点:• 背景颜色默认值是透明: rgba(0,0,0,0) 、transparent • 背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色   背景图片 属性名…

    2022年 11月 13日
    00
  • css字体样式属性有哪些?

    字体大小 属性名:font-sizeØ 取值:数字 + pxØ 注意点:• 谷歌浏览器默认文字大小是16px• 单位需要设置,否则无效 字体粗细 属性名:font-weight 注意点:• 不是所有字体都提供了九种粗细,因此部分取值页面中无变化• 实际开发中以:正常、加粗两种取值使用最多。   字体样式(是否倾斜) 属性名:font-styleØ …

    2022年 11月 12日
    00
  • css3的高级选择器有哪些?css进阶选择器

    后代选择器:空格 作用:根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素Ø 选择器语法:选择器1 选择器2 { css }Ø 结果:• 在选择器1所找到标签的后代(儿子、孙子、重孙子…)中,找到满足选择器2的标签,设置样式Ø 注意点:1. 后代包括:儿子、孙子、重孙子……2. 后代选择器中,选择器与选择器之前通过 空格 隔开   …

    2022年 11月 13日
    00

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信