带来一篇向你先容丰厚的CSS3 特征

提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。
网页制造poluoluo文章简介：级联款式表在13年前被引进，并且被普遍利用的CSS2.1尺度在11年前被创立，明显我们如今已与昔时相差千里了。相称了不得的是时代网站开辟有了几前进现实上，我们也没法设想。为何会如许呢，当提到CSS的时分，已往我们是云云的不宁愿和惧怕实验？为何我们还要
级联款式表在13年前被引进，并且被普遍利用的CSS2.1尺度在11年前被创立，明显我们如今已与昔时相差千里了。相称了不得的是时代网站开辟有了几前进——现实上，我们也没法设想。
为何会如许呢，当提到CSS的时分，已往我们是云云的不宁愿和惧怕实验？为何我们还要利用厌恶的hack和依附JavaScript的手艺来写款式？为何我们不克不及使用丰厚的CSS3特征和古代扫瞄器中可用的工具并将我们的计划品德带到下一个品级？
是时分在我们的项目中引进CSS3特征了，不必惧怕渐渐在我们的款式表中到场css3特征和选择器会出成绩。让我们的客户意想到CSS3的上风(并且让旧扫瞄器更快的消散)是我们力所能及的事变——我们应当如许做，出格是在它可以让网站加倍天真并削减开辟和保护本钱的时分。
在本文中，我们将研讨CSS3的上风，并看一下一些网页计划师是怎样利用它们的。最初，我们将懂得到从CSS3中我们能失掉甚么和我们怎样在我们的项目中利用它的新特征。
同时请参考我们之前的一篇相干文章：

• 利用CSS3将你的网站计划推向将来
  

利用扫瞄器专有属性

为了利用年夜部分CSS3特征，我们不能不与本来的属性一同利用临盆商专有扩大。缘故原由是直到如今，年夜部分扫瞄器只撑持部分CSS3属性。并且不幸的是，一些属性乃至到最初都大概不被W3C保举，以是经由过程指定扫瞄器专有属性，将他们与尺度属性辨别开来是很主要的(然后在他们是过剩的的时分利用切合尺度的款式将之掩盖)。
固然，这类办法的优势是，将招致一个混乱的款式表和网站在扫瞄器之间的体现纷歧致。究竟，我们不想在我们的款式表中重拾公有扫瞄器hack的需求。InternetExplorer的臭名远扬的marquee、blink和别的标签在大批款式表中被使用，并在20世纪九十年月成为一个传奇；它们仍然让现存的良多网站（在其他扫瞄器中）体现纷歧致乃至难以浏览。而我们如今也不想将我们本人置于一样的地步，对吧？
但是，网站不必要在一切的扫瞄器中看起来必需严厉的分歧。有的时分在某个扫瞄器中利用公有属性来完成特定的效果是可行的。
最多见的公有属性是用于Webkit中心扫瞄器的(好比,Safari)，它们以-webkit-入手下手，和Gecko中心的扫瞄器(好比,Firefox)，以-moz-入手下手，另有Konqueror(-khtml-)、Opera(-o-)和InternetExplorer(-ms-)都有它们本人的属性扩大（今朝只要IE8撑持-ms-前缀）
作为专业的计划师，我们不能不注重：利用这些公有属性将让我们的款式表不克不及经由过程考证。以是今朝将他们放到终极版的款式中是少见的。可是在某种情形下，好比实验或进修，我们最少能够思索将他们和尺度的CSS属性一同写到一个款式表中。

网页制造poluoluo文章简介：级联款式表在13年前被引进，并且被普遍利用的CSS2.1尺度在11年前被创立，明显我们如今已与昔时相差千里了。相称了不得的是时代网站开辟有了几前进现实上，我们也没法设想。为何会如许呢，当提到CSS的时分，已往我们是云云的不宁愿和惧怕实验？为何我们还要

1.选择器

CSS选择器是个难以相信地壮大的工具：它们同意我们在标签中指定特定的HTML元素而不用利用过剩的class、ID或JavaScripts。并且它们中的年夜部分并非CSS3中新增加的，而是没有被失掉应有的普遍使用。假如你在实验完成一个洁净的、轻量级的标签和布局与体现更好的分别，初级选择器长短常有效的。它们能够削减在标签中的class和ID的数目并让计划师更便利的保护款式表。
属性选择器

三个新的属性选择器被增加到CSS3：

• [att^="value"]
  婚配包括以特定的值开首的属性的元素
  
• [att$="value"]
  婚配包括以特定的值开头的属性的元素
  
• [att*="value"]
  婚配包括含有特定的值的属性的元素
  

登录/注册后可看大图

tweetCC利用一个属性选择器来指定有title属性并以字符“tweetCC”开头的链接:

1. a[title$="tweetCC"]{position:absolute;top:0;right:0;display:block;width:140px;height:140px;text-indent:-9999px;}

复制代码

扫瞄器撑持:只要IE6不撑持CSS的属性选择器。IE7和IE8、Opera、Webkit中心和Gecko中心的扫瞄器都撑持。以是在你的款式中利用属性选择器是对照平安的。
连字符

CSS3中独一新引进的连字符是通用的兄弟选择器（同级）。它针对一个元素的有统一个父级节点的一切兄弟级别元素。
好比，给某个特定的div的同级的图片增加一个灰色的边框(div和图片应当有统一个父级节点)，在款式表中界说上面的款式就充足了：

1. div~img{border:1pxsolid#ccc;}

复制代码

扫瞄器撑持：一切的次要扫瞄器都撑持这个通用的兄弟选择器除我们最爱的IE6！

网页制造poluoluo文章简介：级联款式表在13年前被引进，并且被普遍利用的CSS2.1尺度在11年前被创立，明显我们如今已与昔时相差千里了。相称了不得的是时代网站开辟有了几前进现实上，我们也没法设想。为何会如许呢，当提到CSS的时分，已往我们是云云的不宁愿和惧怕实验？为何我们还要

伪类

也许在CSS3中增添最多的就是新的伪类了，这里是一些最风趣和最有效的：

• :nth-child(n)
  让你基于元素在父节点的子元素的列表地位来指定元素。你能够是用数字、数字表达式或odd和even关头词(对斑马款式的列表很完善)。以是假如你想婚配在第四个元素以后的一个3个元素的分组，你能够复杂的如许利用：
  :nth-child(3n+4){background-color:#ccc;}/*婚配第4,7,10,13,16,19...个元素*/
  
• :nth-last-child(n)
  与上个选择器的头脑一样，可是从前面婚配元素（倒序），好比，为了指定一个div内里的最初两个段落，我们可使用上面的选择器：
  divp:nth-last-child(-n+2)
  
• :last-child
  婚配一个父节点下的最初一个子元素，同等于
  :nth-last-child(1)
  
• :checked
  婚配选择的元素，好比复选框
  
• :empty
  婚配空元素（没有子元素）。
  
• :not(s)
  婚配一切不切合指定声明(s)的元素。好比，假如你想让一切的没有利用”lead”类的段落的显现为玄色，能够如许写：
  p:not([class*="lead"]){color:black;}
  

AndreaGandino在他的网站上利用:last-child为选择器指定每篇日记的最初一个段落，并将其的外间距(margin)设置为0:

登录/注册后可看大图

1. #primary.textp:last-child{margin:0;}

复制代码

扫瞄器撑持:Webkit中心和Opera扫瞄器撑持一切新的CSS3伪类，Firefox2和3(Gecko中心)只撑持:not(s),:last-child,

登录/注册后可看大图

nly-child,:root,:empty,:target,:checked,:enabled和:disabled，可是Firefox3.5将加倍普遍的撑持CSS3选择器。Trident中心扫瞄器(InternetExplorer)现实上不撑持这些伪选择器。
伪元素

在CSS3中独一引进的伪元素是::selection.它可让你指定被用户高亮（选中）的元素。
扫瞄器撑持:今朝没有任何一款InternetExplorer或Firefox扫瞄器撑持::selection伪元素。Safari,Opera和Chrome均撑持。

网页制造poluoluo文章简介：级联款式表在13年前被引进，并且被普遍利用的CSS2.1尺度在11年前被创立，明显我们如今已与昔时相差千里了。相称了不得的是时代网站开辟有了几前进现实上，我们也没法设想。为何会如许呢，当提到CSS的时分，已往我们是云云的不宁愿和惧怕实验？为何我们还要

2.RGBA和通明度

RGBA让你能够不单单设定色采，还能设定元素的通明度。一些扫瞄器尚不撑持它，以是最幸亏RGBa后面设定别的扫瞄器撑持的没有通明的色彩属性。

登录/注册后可看大图

TimVanDamme在链接的hover效果上利用了RGBA
在这个网站上，TimVanDamme在鼠标悬停效果上利用了RGBa；比方，在他的首页的network链接上:

1. #networkslia:hover,#networkslia:focus{background:rgba(164,173,183,.15);}

复制代码

当设定一个RGBA色采的时分，我们必需顺次设定红、蓝、和绿色的值，能够是0-255或百分数。通明值应当在0.0到1.0之间，比方0.5代表50%的通明度。
RGBA和opacity之间的分歧是前者只会使用到指定的元素上，尔后者会影响我们指定的元素及其子元素。
这里有个例子展现我们怎样给一个div增加80%通明:

1. div{opacity:0.8;}

复制代码

扫瞄器撑持:RGBA被Webkit内核扫瞄器撑持。IE一切版本都不撑持。Firefox2也不撑持，可是Firefox3和Opera9.5均撑持。Opacity被Opera、Webkit中心和Gecko中心的扫瞄器撑持。IE一切版本一样不撑持。IE只撑持自家的活该的滤镜（filter）

网页制造poluoluo文章简介：级联款式表在13年前被引进，并且被普遍利用的CSS2.1尺度在11年前被创立，明显我们如今已与昔时相差千里了。相称了不得的是时代网站开辟有了几前进现实上，我们也没法设想。为何会如许呢，当提到CSS的时分，已往我们是云云的不宁愿和惧怕实验？为何我们还要

3.多栏结构

这是新的CSS3选择器可让你不必利用多个div标签就可以完成多栏结构。扫瞄器注释这个属性并天生多栏，让文本完成一个仿报纸的多栏布局。

登录/注册后可看大图

tweetCC在其首页利用了CSS3多栏选择器
tweetCC在其首页大将先容笔墨显现为四栏。这四栏并不是浮动的div；相反，计划师利用上面的CSS3多栏结构：

1. .index#contentdiv{-webkit-column-count:4;-webkit-column-gap:20px;-moz-column-count:4;-moz-column-gap:20px;}

复制代码

我们能够经由过程这个选择器界说三件事变：栏数(column-count)、栏宽(column-width、例子中没有效到)和各栏之间的空缺/间距(column-gap)。假如column-count未设定，扫瞄器会在同意的宽度内包容尽量多的栏目。
为了在各栏工夫增加一个数值的分开，我们可使用column-rule属性，其功效和border属性相似:

1. div{column-rule:1pxsolid#00000;}

复制代码

下面的这条属性，扫瞄器中不会看就任何效果，由于它没有分栏，假如共同下面的例子就能够了。
相干属性:column-break-after,column-break-before,column-span,column-fill.
扫瞄器撑持:多栏结构今朝被Safari3+，chrome，和Firefox1.5+所撑持。

网页制造poluoluo文章简介：级联款式表在13年前被引进，并且被普遍利用的CSS2.1尺度在11年前被创立，明显我们如今已与昔时相差千里了。相称了不得的是时代网站开辟有了几前进现实上，我们也没法设想。为何会如许呢，当提到CSS的时分，已往我们是云云的不宁愿和惧怕实验？为何我们还要

4.多背景图

CSS3同意你利用多个属性好比background-image、background-repeat,background-size,background-position,background-originandbackground-clip等在一个元素上增加多层背景图片.
在一个元素上增加多背景的最复杂的办法是利用简写代码，你能够指定下面的一切属性到一条声明中，只是最经常使用的仍是image,position和repeat:

1. div{background:url(example.jpg)topleftno-repeat,url(example2.jpg)bottomleftno-repeat,url(example3.jpg)centercenterrepeat-y;}

复制代码

第一个图片将是离用户“比来”的谁人。
该属性的一个更庞大的版本能够是如许的：

1. div{background:url(example.jpg)topleft(100%2em)no-repeat,url(example2.jpg)bottomleft(100%2em)no-repeat,url(example3.jpg)centercenter(10em10em)repeat-y;}

复制代码

在这里，(100%2em)是background-size的值；第一个背景图片将会呈现在左上角并会被拉伸至该div的100%宽度和2em的高度。
由于只要多数的扫瞄器撑持它，又由于在网站上不显现背景有损网站的视觉效果，以是，这并非一个被普遍使用了的属性。只管云云，它明显可以年夜年夜地进步计划师的事情流并明显削减标签数目——相对用别的体例完成一样的效果。
扫瞄器撑持:今朝，多背景图片只在Safari/chrome和Konqueror中无效
扩大浏览：

• CSS3系列教程:背景图片(背景巨细和多背景图)
  
• Layeringmultiplebackgroundimages
  
• MultiplebackgroundswithCSS3andCSS3.info
  
• IntroductiontoCSS3,Part6:Backgrounds
  

5.WordWrap

word-wrap属性用来避免太长的字符串溢出的。能够用两个属性值normal和break-word。normal值(默许的)只在同意的断点截断笔墨，如连字符。假如利用了break-word，笔墨能够在任何必要的中央截断以婚配分派的空间并避免溢出。

登录/注册后可看大图

WordPress背景在数据表中利用了word-wrap.
在WordPress的把持面板中，word-wrap属性被用于表格中的元素；好比在日记和页面的列表中：

1. .widefat*{word-wrap:break-word;}

复制代码

扫瞄器撑持：word-wrap被InternetExplorer和Safari/chrome撑持。Firefox将在3.5版本中撑持它。

网页制造poluoluo文章简介：级联款式表在13年前被引进，并且被普遍利用的CSS2.1尺度在11年前被创立，明显我们如今已与昔时相差千里了。相称了不得的是时代网站开辟有了几前进现实上，我们也没法设想。为何会如许呢，当提到CSS的时分，已往我们是云云的不宁愿和惧怕实验？为何我们还要

6.笔墨暗影

只管在CSS2中就已存在，text-shadow是一个未被普遍使用的CSS属性。可是它将在CSS3中被普遍接纳。这个属性给计划师一个新的跨扫瞄器的工具来为计划增加一个维度以使笔墨夺目。
只管如许，你必要确认，你的计划中的笔墨是可读的，以防用户的扫瞄器不撑持CSS3初级属性。给笔墨和背景致彩充足的对照度以防text-shadow属性不克不及被扫瞄器准确衬着或了解。

登录/注册后可看大图

Beakapp在它的网站中利用了text-shadow属性：内容地区.
BeakApp.com为内容地区利用了text-shadow属性，为笔墨增加深度和维度并让它变得夺目——而不是利用某种图片交换手艺。该属性今朝只在Safari和Chrome中可用。
该网站的主菜单利用的CSS以下：

1. div~img{border:1pxsolid#ccc;}0

复制代码

这里我们利用暗影色彩(利用了RGBA，后面有形貌)，然后是右(x坐标)和底部(y坐标)偏移，最初是含混半径
假如要在一个笔墨上利用多暗影，可使用逗号分隔。好比：
InternetExplorer不撑持它，Firefox将期近将刊行的3.5版本中撑持。

网页制造poluoluo文章简介：级联款式表在13年前被引进，并且被普遍利用的CSS2.1尺度在11年前被创立，明显我们如今已与昔时相差千里了。相称了不得的是时代网站开辟有了几前进现实上，我们也没法设想。为何会如许呢，当提到CSS的时分，已往我们是云云的不宁愿和惧怕实验？为何我们还要

7.@font-face属性

只管是最被等候的CSS3特征(乃至它在CSS2中就已被引进了)，@font-face在网站上仍旧没有像别的CSS3属性那样被普遍接纳.这次要由于字体受权和版权成绩：嵌进的字体很简单从网站高低载到，这是字体厂商的次要挂念。
只管云云，受权我呢提貌似已入手下手办理了。TypeKit答应将制订一个计划，以使计划师和字体厂商更简单的一致受权成绩，这将明显的充分网站计划中的排版并使@font-face属性在实践事情中可用。

登录/注册后可看大图

Mozilla实行室JetPack网站接纳font-face划定规矩来利用DroidSans字体。
多数利用该属性的网站之一是新上线的JetPackMozillaLabs.

1. div~img{border:1pxsolid#ccc;}1

复制代码

要想在你的网站中利用嵌进字体，你必需自力的性命每一个款式(好比，normal,bold和italic)。请确保只利用被受权为利用到网站的字体并在必要的时分给字体的计划师一些表彰。
在界说了@font-face划定规矩以后，你就能够用一般的font-family属性来援用该字体了：

1. div~img{border:1pxsolid#ccc;}2

复制代码

假如一个扫瞄器不撑持@font-face，它将利用font-family(CSS字体库)属性中指定的下一个字体。对撑持的扫瞄器来讲，假如@font-face字体是一个奢靡品（只要多数元素用到），这对一些网站是可行的；可是假如该字体在计划中占据一个次要的脚色大概是公司的视觉特性的一部分，你便可能想利用别的的办理计划，好比sIFR或Cuf

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

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

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

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

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

学Dreamweaver技术的过程其实是一个增加信心的过程。