DIV教程之CSS3教程:在CSS中利用的色彩

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。
网页制造poluoluo文章简介：玩转CSS3色采.
译自：PlayingAroundwithCSS3Colors
中文：玩转CSS3色采
传统来讲，人人在CSS中利用的色彩要末是16进制格局，要末是rgb格局，就像rgb(171,205,239)。

登录/注册后可看大图

CSS3带来了一些新的处置色彩的办法，好比利用HSL(Hue,Saturation,Light)和opacity/alpha通道。不幸的是，如今只要Firefox3+,Chrome1.0+和Safari3+和一些衍生的扫瞄器完整撑持它们。可是我们能够尽我们所能，而IE直到InternetExplorer9才会入手下手撑持一些CSS3属性。
Opacity
这实际上是一个旧属性，使人惊异的是，它被IE确当前版本撑持——只管是以一种对照庞大的办法。
Opacity将全部CSS工具变通明，一切的子元素的通明度也会得当的承继。官方的语法以下：
opacity:[0-1的小数];
以是一个opacity:0.5;设置会让工具50%通明。只管较新的扫瞄器主动的撑持它，老的扫瞄器仍是必要一些定制的代码，就像IE扫瞄器一样。
今朝较老的Firefox版本，我们必要利用-moz-前缀，而关于旧的Safari/Chrome版本，我们必要利用-webkit-前缀。而关于更老的还在利用KHTML内核而不是webkit内核的Safari版原本说，我们必要利用-khtml-。那末假如我们想撑持每个扫瞄器，我们的代码应当是如许的：
opacity:0.5;
-moz-opacity:0.5;
-webkit-opacity:0.5;
-khtml-opacity:0.5;
啊，稍等！IE怎样办？好吧，IE切实其实完整不撑持这个，可是它利用了一个公有的滤镜。传统的办法冗长简明：
filter:alpha(opacity=50);
请注重关于IE我们必要利用从0到100的整数，而不是像opacity属性那样的小数。忧郁的是，InternetExplorer8供应了一个新的办法来处置。不要实验像另外一个那样记着这个，这是很长的一个：
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
固然，假如你想撑持旧的IE扫瞄器，你将不能不利用下面的谁人短的，这也就意味着假如要兼容尽年夜部分扫瞄器，你必要统共六条CSS语句。
PS：现实上，Safari从1.2版本(2004年)就入手下手撑持opacity属性了，KHTML内核的Safai基础很难再找到了，而现实上，Konqueror从未撑持过-khtml-opacity属性，以是请不要再利用它(我在翻译的时分思索到原文的完全性，以是并没有对下面的代码作出修改)。Opera从9.0入手下手撑持CSS3的opacity，而Firefox直到3.5才原生撑持opacity。IE8的-ms-再加上filter真是微软的天赋作品啊！不外请注重，假如你要同时利用filter和-ms-filter，请注重将-ms-filter写在filter的后面。——神飞

网页制造poluoluo文章简介：玩转CSS3色采.

RGBa
上面让我们会商一下RGBa。RGBa是对原始的RGB的扩大，它到场了第四个参数：alpha通道。alpha通道参数接纳0到1之间的小数，就像opacity那样。利用RGBa而不是opacity的上风是，当利用RGBa的时分，通明不会被使用到子元素。这也就一名着，你能够在一个通明工具内里利用一个完整不通明的子工具，而当你利用opacity的时分，通明工具的子元素也是通明的。
利用RGBa不克不及再复杂了：
div{
background:rgb(255,0,0);/*Theoldone*/
background:rgba(255,0,0,0.5);/*Thenewone*/
}
正如你看到的那样，我们垂垂经由过程增加一个字母和别的一个参数就将一个实体的白色变成半通明的白色了。RGBa被Firefox3+、Safari3+、Chrome1.0+和Opera10撑持。但IE仍是不撑持。CSS-Tricks供应了一个利用公有滤镜的办法来让它在IE下也能够事情:
<!--[ifIE]>
<styletype="text/css">
.color-block{
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom:1;
}
>/style>
<![endif]-->
HSL
HSL是一个选择色彩的很直不雅的办法。假如你必要“再暗一点点儿”或“再亮一点点儿”，利用十六进制组合会颇贫苦吧。侥幸的是，经由过程HSL，它就是仅仅一个复杂的数字改动。

登录/注册后可看大图

HSL代表Hue(色彩、也称“色相”)、Saturation(饱和度)和Lightness(明度)。Hue就是一个色盘中的色彩(参考上图)。色采选择经由过程度数来断定，0

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。