在CSS中颜色有很多表示方式,今天列出一些常见的颜色表示方式及它们的用法。

①color:blue; 

第一种,调用颜色属性,将颜色的英文输入在冒号后,以分号结束。

这种方法直接了当,但是能表示的颜色的种类很少。

②color:#000000;

第二种,‘#’号开头,每位数字可为:0、1、2、3、4、5、6、7、8、

9、a、b、c、d、e、f。前1,2位表示红色,3,4位表示绿色,5,6

位表示蓝色。与RGB颜色表示法的思路类似,用红绿蓝三原色组合为

各种颜色,种类繁多。

③color:rgb(0,0,0);

第三种,RGB表示法。有两种值:数值,所有值都是0—255;百分值

,所有值为0%—100%。他们的共同特点是第一个值表示红色,第二个

值表示绿色,第三个值表示蓝色。通过组合,能够表示各种颜色。

④color:rgba(0,0,0,0.5);

第四种,RGBA表示法。它是RGB表示法的升级版,新添了透明属性。

前三个属性值和RGB表示法相同,第四个属性值的值域为0——1可

以精确到小数点后两位。

⑤color:hsl(0,100%,100%);

第五种,HSL表示法。它的含义:H表示色调,该值的值域为0——

360,0和360表示红色,120表示绿色,240表示蓝色。S表示饱和度

,值域为0%——100%。L表示亮度,值域为0%——100%。

⑥color:hsla(0,100%,100%,0.5);

第六种,HSLA表示法。是HSL表示法的加强版,增加了透明度的属性

值,值域为0—1。

CSS颜色表示的几种方式的更多相关文章

  1. css 实现换肤几种方式

    说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.可供选择的换肤 对于只提供几种主题方案,让用户来选择的,一般就简单粗暴的写多套主题 一个全局class控制样式切换 ...

  2. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  3. css清除浮动的两种方式(clearfix和clear)

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  4. css清除浮动的几种方式,哪种最合适?

    细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...

  5. HTML/css清除浮动的几种方式

    浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...

  6. 关于css垂直水平居中的几种方式

    css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...

  7. 实现CSS等分布局的4种方式

    × 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...

  8. CSS清除浮动的几种方式

    浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...

  9. css清除浮动的3种方式

    前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...

随机推荐

  1. Electron-forge应用(打包填坑)

    Electron-forge应用   一.  使用Electron-Forge做应用的缘由 最近遇到一个需求,Web应用登录时要校验用户的登录Mac地址,以确定该用户是在授权过的电脑设备上登录的.没错 ...

  2. 03_常用的JS正则表达式54种形式类型

    1.由数字.26个英文字母或者下划线组成的字符串: ^[0-9a-zA-Z_]{1,}$ 2.非负整数(正整数 + 0 ): ^/d+$ 3. 正整数: ^[0-9]*[1-9][0-9]*$ 4.非 ...

  3. iOS多线程编程原理及实践

    摘要:iOS开发中,开发者不仅要做好iOS的内存管理,而且如果你的iOS涉及多线程,那你也必须了解iOS编程中对多线程的限制,iOS主线程的堆栈大小为1M,其它线程均为512KB,且这个限制开发者是无 ...

  4. ArcGIS Desktop 10.1 下载地址及破解

    ArcGIS Desktop 10.1 正式版请到这里下载 http://pan.baidu.com/share/link?shareid=27476&uk=3608003693 正式版破解方 ...

  5. Scala与Mongodb实践4-----数据库操具体应用

    目的:在实践3中搭建了运算环境,这里学会如何使用该环境进行具体的运算和相关的排序组合等. 由数据库mongodb操作如find,aggregate等可知它们的返回类型是FindObservable.A ...

  6. Android 平台JS调试技术

    1.  测试技术简介 Android平台微信公众号一般以H5的形式开发,测试发现流量一般都通过js进行加密传输,导致无法对越权.SQL注入等风险点进行测试.针对此难点,本手册会介绍包括Android环 ...

  7. 曹工说Spring Boot源码(11)-- context:component-scan,你真的会用吗(这次来说说它的奇技淫巧)

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  8. C# 根据年月日计算周次

    //day:要判断的日期,WeekStart:1 周一为一周的开始, 2 周日为一周的开始 public static int WeekOfMonth(DateTime day, int WeekSt ...

  9. 深入理解Java虚拟机-类加载连接和初始化解析

    不管学习什么,我一直追求的是知其然,还要知其所以然,对真理的追求可以体现在方方面面.人生短短数十载,匆匆一世似烟云,我认为,既然来了,就应该留下一些有意义的东西.本系列文章是结合张龙老师的<深入 ...

  10. 安装xpath helper

    1.下载 版本是:2.02的 链接:https://pan.baidu.com/s/1YdyTbWElL904EMQ-9Ougnw 提取码:bxxa 2.无效安装的解决方案 参考链接:https:// ...