带来一篇CSS3教程(10):CSS3 HSL声明设置色彩
网上冲浪无论你用InternetExplorer还是NetscapeNavigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。利用CSS3HSL声明一样是用来设置色彩的。下一个呢?HSLA?是的,这个和RGBA的效果是一样的。
上一篇文章:CSS3教程(9):设置RGB色彩
HSL声明利用色彩Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置色彩。
Hue衍生于色盘:0和360是白色,靠近120的是绿色,240是蓝色。
Saturation值是一个百分比:0%是灰度,100%饱和度最高
Lightness值也是一个百分比:0%是最暗,50%均值,100%最亮。
随想:为何是”ligntness”呢?也许我更习气Photoshop中的”Brightness”呢……
扫瞄器兼容性:
今朝HSL和HSLA被Firefox、GoogleChrome、和Safari扫瞄器较好的撑持,并且不必要任何前缀
CSS3HSL
下面的演示由以下款式完成
div.hslL1{background:hsl(320,100%,50%);height:20px;}div.hslL2{background:hsl(320,50%,50%);height:20px;}div.hslL3{background:hsl(320,100%,75%);height:20px;}div.hslL4{background:hsl(202,100%,50%);height:20px;}div.hslL5{background:hsl(202,50%,50%);height:20px;}div.hslL6{background:hsl(202,100%,75%);height:20px;}扫瞄器撑持:
[*]Firefox(3.05+…)
[*]GoogleChrome(1.0.154+…)
[*]GoogleChrome(2.0.156+…)
[*]InternetExplorer(IE7,IE8RC1)
[*]Opera(9.6+…)
[*]Safari(3.2.1+windows…)
CSS3HSLA
下面的效果由以下款式完成:
div.hslaL1{background:hsla(165,35%,50%,0.2);height:20px;}div.hslaL2{background:hsla(165,35%,50%,0.4);height:20px;}div.hslaL3{background:hsla(165,35%,50%,0.6);height:20px;}div.hslaL4{background:hsla(165,35%,50%,0.8);height:20px;}div.hslaL5{background:hsla(165,35%,50%,1.0);height:20px;}扫瞄器撑持:
[*]Firefox(3.05+…)
[*]GoogleChrome(1.0.154+…)
[*]GoogleChrome(2.0.156+…)
[*]InternetExplorer(IE7,IE8RC1)
[*]Opera(9.6+…)
[*]Safari(3.2.1+windows…)
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。 经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅. 还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器) 学Dreamweaver技术的过程其实是一个增加信心的过程。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
页:
[1]