ylbtech-CSS:CSS 合法颜色值
1.返回顶部
1、

CSS 颜色

可以用以下方法来规定 CSS 中的颜色:

  • 十六进制色
  • RGB 颜色
  • RGBA 颜色
  • HSL 颜色
  • HSLA 颜色
  • 预定义/跨浏览器颜色名

十六进制颜色

所有浏览器都支持十六进制颜色值。

十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。

举例说,#0000ff 值显示为蓝色,这是因为蓝色成分被设置为最高值(ff),而其他成分被设置为 0。

实例

p
{
background-color:#0000ff;
}

亲自试一试

RGB 颜色

所有浏览器都支持 RGB 颜色值。

RGB 颜色值是这样规定的:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)

举例说,rgb(0,0,255) 值显示为蓝色,这是因为 blue 参数被设置为最高值(255),而其他被设置为 0。

同样地,下面的值定义了相同的颜色:rgb(0,0,255) 和 rgb(0%,0%,100%)。

实例

p
{
background-color:rgb(255,0,0);
}

亲自试一试

RGBA 颜色

RGBA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

实例

p
{
background-color:rgba(255,0,0,0.5);
}

亲自试一试

HSL 颜色

HSL 颜色值得到以下浏览器的支持:IE9+、Firefox、Chrome、Safari 以及 Opera 10+。

HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。

HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。

Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色。

实例

p
{
background-color:hsl(120,65%,75%);
}

亲自试一试

HSLA 颜色

HSLA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

HSLA 颜色值是 HSL 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

HSLA 颜色值是这样规定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

实例

p
{
background-color:hsla(120,65%,75%,0.3);
}

亲自试一试

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

CSS:CSS 合法颜色值的更多相关文章

  1. CSS颜色代码 颜色值 颜色名字大全(转载)

    CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...

  2. Bulma CSS - CSS类

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  3. css里颜色的那些事儿(合法颜色值)

    css中主要有六种方法指定颜色: 1.十六进制颜色 2.RGB颜色 3.RGBA颜色 4.HSL色彩 5.HSLA颜色 6.预定义/跨浏览器的颜色名称 前三种是我们最常见的,也是用的最多的,而后三种对 ...

  4. CSS颜色代码 颜色值 颜色名字大全

    颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...

  5. CSS——NO.9(颜色值和长度值)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  6. css中的颜色值

    下面是比较适合在测试页面中用来设置背景颜色的淡颜色,最好记住一些,dark.blue.red.green.gray.olive颜色较深.

  7. html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  8. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

  9. reset.css css重置公共样式

    @charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...

随机推荐

  1. 百科知识 .e,.ec文件如何打开

    1 .e是易语言源文件,你可以从以下网址下载e语言编程环境: http://www.xiazaiba.com/html/409.html   2 安装之后会自动关联.e文件.   3 打开一个e语言文 ...

  2. SolidEdge 工程图中如何标注尺寸公差

    1 先标注基准框,输入基准符号(A B C之类的)   2 点击特征控制,设置马上要标注的特征和公差(可以保存为模板)   3 直接点击要标注的元素即可   4 没有基准的形位公差标注也一样  

  3. Linq实现SQL in

    比如 Id in (1,2,3) int[] a={1,2,3}; list.Where(x=>a.Contains(x.Id))

  4. 【转载】ASP.NET应用程序与页面生命周期

    在本文中,我们将了解不同的事件,ASP.NET 应用程序的生命周期以浏览器向 Web 服务器(对于 ASP.NET 应用程序,通常为 IIS)发送请求为起点,直至将请求结果返回至浏览器结束.在这个过程 ...

  5. vue-router篇

    目录结构: -lib-vue.js -lib-vue-router.js -js-main.js -index.html 1.安装和基本配置 2.传参以及获取传参 3.子路由 4.手动访问和传参 5. ...

  6. 基于bootstrap的纯静态网站目录

    一.博客页面 二.登陆页面 三.信息采集 四.管理后台 五.网站汇总(基于上边四个功能) 因为样式统一采用bootstrap的样式,所以不做介绍 样式导入可以将bootstrap下载至本地(有自动补齐 ...

  7. 每天一点儿Java--list

    import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; /** * ...

  8. Android 四大组件学习之BroadcastReceiver一

    本节课学习四大组件最后一个, 广播接受者. 顾名思义广播接受者就是接受广播呗.比方在现实社会中,曾经每一个人家都有一台收音机,这可就能够去接受广播发出来的消息.大家都知道.程序世界也是參照的显示生活设 ...

  9. Hibernate的基本开发流程

    一.Hibernate开发的基本流程 二.Hibernate开发的环境搭建 1.引入Hibernate核心包以及Hibernate依赖包即可.可以在Hibernate目录下的\lib\required ...

  10. MapReduce源代码分析之LocatedFileStatusFetcher

    LocatedFileStatusFetcher是MapReduce中一个针对给定输入路径数组,使用配置的线程数目来获取数据块位置的有用类. 它的主要作用就是利用多线程技术.每一个线程相应一个任务.每 ...