来一发CSS教程:CSS3新功效和新特征

有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等
网页制造poluoluo文章简介：良多已存在的新功效和特征正在被提出至CSS3。我们将在此实验展现个中的一些内容――条件是他们已被Firefox、Konqueror、Safari/Webkit完成了。
良多已存在的新功效和特征正在被提出至CSS3。我们将在此实验展现个中的一些内容——条件是他们已被Firefox、Konqueror、Safari/Webkit完成了。
上面顺次先容。
译者注：原文链接在此省往，其链接的内容会附带在最初面。
边框
border-color属性
boder-image属性
border-radius属性
box-shadow属性
背景
background-origin属性和background-clip属性
background-size属性
多重背景
色彩
HSL色彩值
HSLA色彩值
opacity属性
RGBA色彩值
笔墨效果
text-shadow属性
text-overflow属性
word-wrap属性
用户界面
box-sizing属性
resize属性
outline属性
nav-top、nav-right、nav-bottom、nav-left属性
选择器
属性(attribute)选择器
基础盒模子
overflow-x属性和overflow-y属性
天生的内容
content属性
别的模块
mediaqueries模块
multi-columnlayout模块
Web字体模块
Speech模块


上面附带各个属性/模块的链接内容：


怎样经由过程CSS3创立黑色的边框
W3C已在CSS3中为边框供应了一些新的选项，这些选项即圆角边框、边框色彩以后，也长短常风趣的。Mozilla/Firefox已完成了这个同意你创立很酷的黑色边框的函数

Code:-moz-border-bottom-colors:#555#666#777#888#999#aaa#bbb#ccc;

Border-image：在你的边框中利用图片
另外一个使人镇静的CSS3中新的边框特征是border-image属性。有了这个特征你能够界说一个图片以代替一般边框。这个特征实践上可分为一对属性：border-image和border-corner-image。这两个值能够缩写，以下：

Code:border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-imageborder-image今朝已在Safari和Firefox3.1(Alpha)下事情了。语法以下：

Code:border-image:url(border.png)27272727roundround;或

Code:border-image:url(border.png)27272727stretchstretch;


Border-radius：用CSS创立圆角边框！
W3C已在CSS3中供应了一些新的选项，border-radius是个中之一，Mozilla/Firefox和Safari3都已完成了这个同意你创立圆角盒模子的函数。比方：

Code:-moz-border-radius:5px;
-webkit-border-radius:5px;
这些分歧的角能够被分离把持，代码以下：

Code:-moz-border-radius-topleft/-webkit-border-top-left-radius
-moz-border-radius-topright/-webkit-border-top-right-radius
-moz-border-radius-bottomleft/-webkit-border-bottom-left-radius
-moz-border-radius-bottomright/-webkit-border-bottom-right-radius


Box-shadow，CSS3的最牛逼的新特征之一
CSS3背景和边框模块具有一个十分好的新特征名叫box-shadow，它已在Safari3+和Firefox3.1(Alpha)中得以完成。其划定规矩说起了多重暗影，可是作者已对此提出了质疑，而且Safari3并未将实在现。
此属性由3个长度参数和一个色彩参数构成，个中长度参数有：
1.暗影的横向位移量，正值意味着暗影靠右，负值则靠左；
2.暗影的纵向位移量，负值意味着暗影靠上，正值则靠下；
3.退色突变半径，假如值为0则暗影会被间接割断，值越高退色突变的效果就越分明。比方：

Code:box-shadow:10px10px5px#888;
padding:5px5px5px15px;
此暗影会被仅靠圆角边框的圆角而创立，比方：

Code:box-shadow:-10px-10px0px#000;
border-radius:5px;
padding:5px5px5px15px;

background-origin和background-clip
Mozilla、Safari3和Konqueror都已实行性完成了CSS3中的background-origin属性和background-clip属性。Opera在上一个公然版本中有一个不乱的、基于初期Opera2.3中背景和边框标准的基本完成。

background-origin属性用来决意怎样在盒模子上钩算background-position的值。
此属性有三种取值：border-box、padding-box和content-box。假如你利用了padding-box，则背景的地位盘算会相对内边距地区的左上角；border-box则相对边框的左上角；content-box则相对其内容的左上角。基于Gecko或Webkit的扫瞄器利用了过期的标准版本，其取值为border、padding和content。

background-clip属性用来决意背景是不是要扩大到边框里。默许值是border-box，即扩大到边框里。但假如将其赋值padding-box则不会。假如你利用content-box则背景只会在有内容的矩形地区显现(这个可选值已在比来的标准中往失落了)。
实行性完成的代码以下：

Code:-webkit-background-origin/-moz-background-origin
-webkit-background-clip/-moz-background-clip
不乱完成的代码以下：

Code:background-origin
background-clip


Background-size
CSS3给了你一种界说背景图片尺寸的体例。你能够经由过程背景图片宽高的像素值或百分比举行界说。当你利用百分比举行界说时，其图片尺寸是相对其盒模子经由过程background-origin界说的地区的长和宽的。
完成这一特征的扫瞄器有Opera9.5、Safari3、Firefox和Konqueror。他们分离利用-o-background-size、-webkit-background-size和-khtml-background-size、-moz-background-size属性。比方：

Code:background-size:200px50px;


经由过程CSS3完成多重背景
CSS3同意统一个元素中有多个背景图片。你能够用逗号将分歧的背景界说分开开已界说多重背景。好比：

Code:background:url(body-top.gif)topleftno-repeat,url(banner_fresco.jpg)top11pxno-repeat,url(body-bottom.gif)bottomleftno-repeat,url(body-middle.gif)leftrepeat-y;
今朝已完成这一属性的扫瞄器有：Webkit和KHTML(Konqueror)。


HSL色彩值
跟利用16进制的RGB(红、绿、蓝)色彩值一样，CSS3也能够辨认HSL(色相、饱和度、亮度)色彩值。
HSL色彩值有三个参数：
色相是指色盘的度数，0度或360度是白色，120度是绿色，240度是蓝色。我们能够在0度到360度之间取值以暗示分歧的色彩。
饱和度值是一个百分数，100%暗示完整饱和的色彩。
亮度值也是一个百分数，0%暗示全黑，100%暗示全白，50%则暗示两头值。
这类色彩值为我们断定可用色彩微风格供应了一个十分宽广的空间。
现现在，HSL已被Opera9.5、Safari3、Konqueror和Mozilla扫瞄器所完成。
比方：

Code:<divstyle="background-color:hsl(0,100%,50%);"></div>
<divstyle="background-color:hsl(120,100%,50%);"></div>
<divstyle="background-color:hsl(240,100%,50%);"></div>
相称于：

Code:<divstyle="background-color:rgb(255,0,0);"></div>
<divstyle="background-color:rgb(0,255,0);"></div>
<divstyle="background-color:rgb(0,0,255);"></div>
链接：http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsl-color


HSLA色彩值
HSLA与HSL的干系跟RGBA与RGB的干系一样，即这里同意呈现第四个参数，以暗示其通明度(经由过程Alpha通道)。
在截稿时，只要Safari3和Firefox3Beta撑持HSLA色彩值。
比方：

Code:<divstyle="background-color:hsla(0,100%,50%,0.2);"></div>
<divstyle="background-color:hsla(0,100%,50%,0.4);"></div>
<divstyle="background-color:hsla(0,100%,50%,0.6);"></div>
<divstyle="background-color:hsla(0,100%,50%,0.8);"></div>
<divstyle="background-color:hsla(0,100%,50%,1);"></div>
其RGBA的写法是：

Code:<divstyle="background-color:rgb(243,191,189);"></div>
<divstyle="background-color:rgb(246,143,142);"></div>
<divstyle="background-color:rgb(249,95,94);"></div>
<divstyle="background-color:rgb(252,47,47);"></div>
<divstyle="background-color:rgb(255,0,0);"></div>
链接：http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsla-color


Opacity
Opacity是今朝为止最普遍完成的CSS3特征。这也许也是我们最等候的特征。
比方：

Code:<divstyle="background:#ff0000;opacity:0.2;"></div>
<divstyle="background:#ff0000;opacity:0.4;"></div>
<divstyle="background:#ff0000;opacity:0.6;"></div>
<divstyle="background:#ff0000;opacity:0.8;"></div>
<divstyle="background:#ff0000;opacity:1;"></div>


RGBA色彩值
CSS3已增加了一个色彩赋值的新特征。即RGB以后你如今也能够利用RGBA。这个"A"指的就是你推测的alpha(通明度)。这个新特征同意我们界说色彩的通明度。它让网页工程师的日子变得轻松很多。
现在，这个特征已在Safari3和Firefox3pre-alpha中得以完成。
例子：

Code:<divstyle="background:rgba(255,0,0,0.2);"></div>
<divstyle="background:rgba(255,0,0,0.4);"></div>
<divstyle="background:rgba(255,0,0,0.6);"></div>
<divstyle="background:rgba(255,0,0,0.8);"></div>
<divstyle="background:rgba(255,0,0,1);"></div>
Text-shadow：用CSS完成相似Photoshop的殊效
当我们必要完成一个复杂的暗影的时分，CSS3终极打消了我们对Photoshop的需求。text-shadow属性能够被以下体例利用：

Code:text-shadow:2px2px2px#000;
各个参数和box-shadow的参数表意分歧。
今朝Webkit、Opera9.5、Firefox3.1(pre-Alpha)、Konqueror、iCab已完成这一特征。
注：这个特征并非CSS3的新特征，而是CSS2提出的。Safari从第1个版本就有这个特征了。


Text-overflow
有的时分文本不能不被切割。好比当其溢出元素的矩形地区的时分。一旦如许的征象呈现，你就必要一个视觉上的表示，告知用户文本被截断了。这时候我们引进了text-overflow-props。最广泛的体例就是经由过程省略号来暗示文本溢出，如划定规矩中所说，“以后的字符体现大概有所分歧”。Opera经由过程-o-text-overflow撑持了这一特征。
撑持这些特征如今变得很辣手。Webkit只撑持text-overflow的简写体例，且这些特征只是部分完成。text-overflow:ellipsis-word;和text-overflow:inherit;并没有事情。弄笑的是InternetExplorer从IE6入手下手撑持了这一特征。详细参照：http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/textoverflow.asp

Code:text-overflow:ellipsis;
text-overflow:clip;
text-overflow:ellipsis-word;


Word-wrap
Word-wrap属性已被微软创造并到场了CSS3中。它同意长单词在需要的情形下被截断换行。

Code:word-wrap:normal;
word-wrap:break-word
这个特征已在IE、Safari、Firefox3.1(Alpha)中得以完成。


Box-sizing：盒模子为复杂使用做了扩大
一向不完整了解盒模子？CSS3供应了一个叫做box-sizing的新的属性，这个属性让我们改动扫瞄器在盘算元素宽度方面的特征。默许情形下，box-sizing的值是content-box。在这类情形下，盘算宽高时会依照CSS2.1的相干划定规矩，再到场边框和内边距的宽高。假如把值设置为border-box，则你能够强迫扫瞄器不依照标准中的宽高举行衬着，而是把边框和内边距间接算在盒模子内。
Firefox已完成了这一特征，属性名为-moz-box-sizing。Safari利用-webkit-box-sizing属性名，Opera间接利用box-sizing属性名。


CSS3中的resize属性
老是但愿元素能够由我们随便调剂巨细？利用过良多七零八落的技能？CSS3在用户界面这部分供应懂得决计划：resize属性。它同意你界说盒模子是不是能够调剂巨细。Webkit最新的深夜版本完成这一特征。

Code:div.resize{width:100px;height:100px;border:1pxsolid;resize:both;overflow:auto;}
个中resize:both暗示其宽度和高度都能够调剂。同时另有resize:horizontal;和resize:vertical;同意只调剂宽度或只调剂高度。还能够搭配max-width/min-width/max-height/min-height等属性限定其调剂的局限。


Outline
Outlines已在CSS3中失掉了扩大，它包括了outline-offset属性。这个属性同意设置衬着表面线时向外位移的量。好比：

Code:outline:2pxsolidblue;
outline-offset:12px;
这一特征今朝已在Opera、Safari、Firefox下得以完成。


CSS3结点属性(Attribute)选择器
在W3C2005年12月的草案中形貌：
援用:
6.3.2属性选择器的部分值婚配
我们供应了三个属性选择器用以部分婚配其属性值
[att^=val]代表att属性值包括“val”前缀的元素
[att$=val]代表att属性值包括“val”后缀的元素
[att*=val]代表att属性值包括“val”的元素
属性值必需是标示符或字符串。属性名在选择个中是不是巨细写敏感取决于文档言语。

MediaQueries
CSS2增添了media="screen"的撑持，经由过程这类体例我们界说了显现数据用的款式表。CSS3增添了一个这方面的新的特征，即mediaqueries。
基础上，这意味着你能够基于分歧的宽高的视图地区改动款式表。在更普遍的范畴中，这代表着标准中提到的：“经由过程利用MediaQueries，其体现能够针对分歧规格的输入设备体现出分歧的内容。”
上面是有关min-width和max-width的两个测试，以后只在Safari3、Opera和Firefox3.1(Alpha)中可用。不管怎样这是将来的Web开辟，它使得我们能够很轻松的同时在挪动或传统设备中天生各自的页面。

Code:@mediaalland(min-width:640px){#media-queries-1{background-color:#0f0;}}@mediascreenand(max-width:2000px){#media-queries-2{background-color:#0f0;}}


Multi-columnlayout
W3C供应了把文本依照报纸一样按列排版的体例。Multi-columnlayout自成一个模块。它同意Web开辟者经由过程两种体例把笔墨填到栏目中：界说每列的宽度或界说列数。第一种体例能够由column-width属性完成，第二种体例则由column-count完成。为了在栏目之间创立空缺，你必要界说另外一个属性column-gap的宽度。
Multi-columnlayout以后只要基于Mozilla的扫瞄器和Safari3撑持，他们经由过程各自的前缀-moz-和-webkit-加以完成。上面的代码用到了column-width：

Code:-moz-column-width:13em;
-moz-column-gap:1em;

-webkit-column-width:13em;
-webkit-column-gap:1em;
另有一个例子是用到了column-count：

Code:-moz-column-count:3;
-moz-column-gap:1em;
-moz-column-rule:1pxsolidblack;

-webkit-column-count:3;
-webkit-column-gap:1em;
-webkit-column-rule:1pxsolidblack;
有一个已不再被撑持的特征是column-space-destribution，已经用以形貌怎样分别列间距。


经由过程@font-face界说Web字体
说@font-face是CSS3的新特征其实不正确，CSS2就已第一次撑持了这一特征，而且InternetExplorer早在第5个版本的时分就已撑持它了。只管云云，他们的完成体例是经由过程专有的eot(EmbededOpenType)字体魄式，没有其余扫瞄器决意利用这个格局。跟着Safari3.1的公布，网站的公布者能够在网页中利用恣意持有证书的ttf(TrueType)字体文件或orf(OpenType)字体文件。
为了利用Web字体，每一个字体表格必需利用@font-face划定规矩。

Code:@font-face{font-family:Delicious;src:url(Delicious-Roman.otf);}
@font-face{font-family:Delicious;font-weight:bold;src:url(Delicious-Bold.otf);}
然后挪用该字体：

Code:h3{font-family:Delicious,sans-serif;}


CSS3Speech
CSS2增加了听觉媒体范例的撑持。这项撑持用来界说在听觉设备中分解语音的“款式”。本划定规矩增加了几个这类新媒体范例的属性。
今朝的CSS2.1草案提出了media="speech"的特征，可是没有明白界说能够使用的属性。以是听觉媒体范例没有被承认。
CSS3的Speech模块移除一些老的属性，增加了新的属性。这些都分派在speech媒体范例中。
Opera是完成最多CSS3Speech属性的最盛行的扫瞄器。

Code:#voice-volume{-xv-voice-volume:x-soft;-xv-voice-balance:right;}
#voice-balance{-xv-voice-balance:left;}
#speech-cue{cue-after:url(ding.wav);}
#voice-rate{-xv-voice-rate:x-slow;}
#voice-family{voice-family:female;}
#voice-pitch{-xv-voice-pitch:x-low;}
#speech-speak{speak:spell-out;}
注：今朝CSS3Speech模块还在草案阶段，Opera对其经由过程-xv-前缀加以完成。</p>
大大缩减页面代码，提高页面浏览速度,缩减带宽成本;

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

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

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

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

可以使用 CSS 检查工具进行设计。

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

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

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。