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

相关推荐

  • css选择器的作用是什么?css的基本选择器有几种

    css选择器的作用:• 选择页面中对应的标签(找她),方便后续设置样式(改她) 标签选择器 结构:标签名 { css属性名:属性值; }Ø 作用:通过标签名,找到页面中所有这类标签,设置样式Ø 注意点:1. 标签选择器选择的是一类标签,而不是单独某一个2. 标签选择器无论嵌套关系有多深,都能找到对应的标签   类选择器 结构:.类名 { css属性…

    2022年 11月 12日
    0
  • css引入方式有几种?分别是什么?

    CSS引入方式 内嵌式:CSS 写在style标签中• 提示:style标签虽然可以写在页面任意位置,但是通常约定写在 head 标签中Ø 外联式:CSS 写在一个单独的.css文件中• 提示:需要通过link标签在网页中引入Ø 行内式:CSS 写在标签的style属性中• 提示:一般会配合js使用

    2022年 11月 12日
    0
  • 水平居中方法总结 margin : 0 auto

    如果需要让div、p、h(大盒子)水平居中?• 可以通过margin : 0 auto ; 实现Ø 注意点:1. 如果需要让 div、p、h(大盒子) 水平居中,直接给 当前元素本身 设置即可2. margin:0 auto 一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度

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

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

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

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

    2022年 11月 13日
    0

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信