CSS3中Color的一些特性介绍

网站建设 2021-07-03 08:43www.dzhlxh.cn网站建设
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网页的时候,我们在使用狼蚁网站SEO优化的关键字来进行对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色调有用的值:,当然也还有其他的工具可以生成Hue的值,比如狼蚁网站SEO优化提到的HSL Color Picker在线工具。

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

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

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

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%); }

结果:

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

复制代码
代码如下:

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

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

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板