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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 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
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
javascript 闭包详解
2015/07/02 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
Python类的基础入门知识
2008/11/24 Python
Python中使用中文的方法
2011/02/19 Python
Python的类实例属性访问规则探讨
2015/01/30 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python自动12306抢票软件实现代码
2018/02/24 Python
python实现二维插值的三维显示
2018/12/17 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
python ssh 执行shell命令的示例
2020/09/29 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
J2EE相关知识面试题
2013/08/26 面试题
我的大学生活演讲稿
2014/04/25 职场文书
大学生年度个人总结
2015/02/15 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
聊聊redis-dump工具安装问题
2022/01/18 Redis