CSS3中Color的一些特性介绍


Posted in HTML / CSS onMay 27, 2012

1.CSS 简介
CSS(Cascading Style Sheets),我们都不陌生吧。特别是我们在开发web项目的时候,用的更是不亦乐乎。

可是,你知道吗?CSS(注意 也就是CSS1)是在1996年的时候产生的标准,也就是到现在时隔(2012-1996)差不多15年的历史。毕竟时间在一直的走嘛,现在CSS3也在使用中,不过需要注意的是,CSS3并非是W3C的一个标准,它现在依旧是草案(Working Draft)状态,而不是最终的稳定版---W3C推荐。

据目前所知,CSS3已经增加了40多种模块(Module),既然还是草案,所以以后就还有增加的可能。所以,用我们的祈祷吧,希望CSS3赶快成为标准。那个时候我们程序员才是解放的时候。

在这篇文章中,我们会讨论一下CSS3中新增的40多个模块中的一个模块----Color模块。Color模块,比其他的模块更加的稳定。事实上,在2011年6月的时候,它就已经成为了W3C的推荐了,也就是标准了。

这新的CSS3 Color特性包括 在传统的hex 和RGB 值中增加了HSL特性,也就是增加了Opacity(透明度)和Alpha channels。

2.HSL Colors
在我们传统开发web网页的时候,我们在使用下面的关键字来进行对HTML和CSS进行颜色的设定。

Color 关键字 (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow)
Hexadecimal(16进制) 表示法
RGB (red,green,blue)表示法

比如,如下实例:

复制代码
代码如下:

.keyword { color: white; }//关键字表示法
.shorthex { color: #FFF; } //短的16进制表示法
.longhex { color: #FFFFFF; } //长16进制表示法
.rgb1 { color: rgb(255, 255, 255); } //rgb1 通过值
.rgb2 { color: rgb(100%, 100%, 100%); } //rgb2 通过百分比

对上面的表示,我们都不陌生。

那么,在CSS3中的HSL怎么表示以及是什么意思呢?

HSL格式:

.example { color: hsl([hue], [saturation], [light]); }用的也很简单:

.implemented { color: hsl(240, 50%, 80%); }
那这三个单词什么意思呢?

H(Hue)色调:0和360是红色,接近120的是绿色,240是蓝色。W3C提供了一些对H色调有用的值:Tables Of Hue andSaturation Values,当然也还有其他的工具可以生成Hue的值,比如下面提到的HSL Color Picker在线工具。

S(Saturation,饱和度)值是一个百分比:0%是灰度,100%饱和度最高

L(Lightness,亮度)值也是一个百分比:0%是最暗,50%均值,100%最亮。

HSL Color Picker是一个用来取HSL颜色的工具。界面如下:

CSS3中Color的一些特性介绍

HSL浏览器兼容性:

目前HSL和HSLA被Firefox、Google Chrome、和Safari浏览器较好的支持,而且不需要任何前缀修饰。

实例:

复制代码
代码如下:

#left { color: hsl(240, 0%, 50%); }
#center { color: hsl(240, 50%, 50%); }
#right { color: hsl(240, 100%, 50%); }

结果:

CSS3中Color的一些特性介绍

OK,那我们现在来调整一下:
OK,那我们现在来调整一下:

复制代码
代码如下:

#left { color: hsl(240, 100%, 0%); }
#center { color: hsl(240, 100%, 50%); }
#right { color: hsl(240, 100%, 100%); }

CSS3中Color的一些特性介绍

其实,也简单,说真的,我也不懂为什么要增加这种方增加颜色的方法。呵呵 不过也好,多一种方法把~。总归有好处的,不是吗?

Opacity(透明度) 和Gradients(渐变)
另外一个和颜色相关的CSS3属性是 Alpha 通道(channel)和Opacity(透明度)。基本上来说
作者:Lanny☆兰东才

HTML / CSS 相关文章推荐
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
CSS3 简写animation
May 10 #HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 #HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 #HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 #HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 #HTML / CSS
时尚的CSS3进度条效果
Feb 22 #HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 #HTML / CSS
You might like
sql注入与转义的php函数代码
2013/06/17 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
详解Python3.1版本带来的核心变化
2015/04/07 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Django框架模板介绍
2019/01/15 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
python实现对输入的密文加密
2019/03/20 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
python生成requirements.txt的两种方法
2019/09/18 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
美术专业个人自我评价
2014/01/18 职场文书
企业文化口号
2014/06/12 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技