HTML5+CSS3网页设计基础教程第11章-CSS3概述

第1页第11章CSS3概述本章概述本章的学习目标主要内容第2页本章概述在过去,Web页面的许多视觉效果都是由标记元素来描述,直接把表示页面结构的标记与表示页面外观的标记或属性混合在一起,HTML就是这样的标记语言。然而,之后出现的严格的XHTML则不允许出现用于描述外观的元素与特性,标记语言只是用于描述页面结构。描述外观的工作则交给用层叠样式表（CascadingStyleSheet,CSS）语法编写的样式表来完成。标记与样式之间的职责区分为Web页面的开发、维护,甚至运行性能都带来了诸多益处,而这种解决方案与仅仅使用标记相比,优势巨大。第3页本章的学习目标CSS发展历史；为文档应用CSS的3种方式；了解CSS3的新增特性；了解查看CSS3兼容性的方法。第4页主要内容11.1CSS变迁11.2了解CSS3新增特性11.3CSS3兼容性速查11.4本章小结第5页11.1CSS变迁11.1.1CSS产生的原因11.1.2CSS发展历史11.1.3HelloCSSWorld11.1.4为文档应用CSS的方式第6页11.1.1CSS产生的原因HTML的设计初衷并不是为了描述外观,HTML本身也并不善于此道。而早起的HTML却是既要负责文档结构又要负责文档样式,任务太重。因此,后来人们用HTML标记语言描述页面的结构,而将表示网页外观的功能标记或属性分离出来,这就形成了表示网页外观的替代方法——层叠样式表(CascadingStyleSheet,CSS)。第7页11.1.2CSS发展历史1994年哈坤•利提出了CSS的最初建议。伯特•波斯（BertBos）当时正在设计一个叫做Argo的浏览器,他们决定一起合作设计CSS。第8页11.1.3HelloCSSWorld详情见【例11-1】一个使用CSS样式表现网页外观的例子。第9页11.1.4为文档应用CSS的方式CSS提供了3种使用方式:第一，内联样式表，通过HTML元素的style属性直接将样式嵌入HTML标记中；第二，样式规则块，将表示样式的style属性的内容，全部提到公共的样式规则块中，以方便管理和扩展；第三，外部链接样式文件，将样式彻底独立成一个文件，供任何页面调用。第10页主要内容11.1CSS变迁11.2了解CSS3新增特性11.3CSS3兼容性速查11.4本章小结第11页11.2了解CSS3新增特性11.2.1CSS3选择器11.2.2引用服务端字体11.2.3换行处理11.2.4文字渲染11.2.5多列布局11.2.6边框和颜色11.2.7渐变效果11.2.8阴影和反射效果11.2.9背景效果11.2.10盒子模型11.2.11过渡、形变与动画第12页11.2.1CSS3选择器CSS3在CSS2基础上提供了更多更加方便快捷的选择器，例如:tbody:nth-child(even)，nth-child(odd),:not(.textinput),div:first-child,E:nth-last-child(n)、E:nth-of-type(n)、E:nth-last-of-type(n)、E:last-child、E:first-of-type、E:only-child、E:only-of-type、E:empty、E:checked、E:enabled、E:disabled、E::selection、E:not(s)，利用这些新特性，可以极大程度地减少无畏代码。第13页11.2.2引用服务端字体当未在客户端安装字体样式时，在CSS3中，可以使用服务端字体，代码如下:@font-face{font-family:BorderWeb;src:url(BORDERW0.eot);}以上代码声明了服务端字体BORDERW0.eot，冠以“BorderWeb”的字体名称。声明之后即可在页面中使用了:“FONT-FAMILY:"BorderWeb"”。第14页11.2.3换行处理word-wrap属性主要用于指定当当前行超过指定容器的边界时如何处理的操作。第15页11.2.4文字渲染CSS3开始支持对文字进行更深层次的渲染，示例代码如下:div{-webkit-text-fill-color:black;-webkit-text-stroke-color:red;-webkit-text-stroke-width:2.75px;}第16页11.2.5多列布局.multi_column_style{-webkit-column-count:3;-webkit-column-rule:1pxsolid#bbb;-webkit-column-gap:2em;}<divclass="multi_column_style">……</div>这段代码中,column-count属性表示布局几列；Column-rule属性表示列与列之间的间隔条的样式；Column-gap属性表示列于列之间的间隔。第17页11.2.6边框和颜色CSS3对颜色提供了透明度的支持，示例代码如下:color:rgba(255,0,0,0.75);background:rgba(0,0,255,0.75);对于border，CSS3提供了圆角的支持，示例代码如下:border-radius:15px;第18页11.2.7渐变效果线性渐变:绘制左上（0%0%）到右上（0%100%）即从左到右水平渐变，代码如下:background-image:-webkit-gradient(linear,0%0%,100%0%,from(#2A8BBE),to(#FE280E));径向渐变:下面是目标半径为0的渐变的代码:backgroud:-webkit-gradient(radial,5050,50,5050,0,from(black),color-stop(0.5,red),to(blue));第19页11.2.8阴影和反射效果阴影效果既可用于普通元素，也可用于文字，例如:.class1{text-shadow:5px2px6pxrgba(64,64,64,0.5);}.class2{box-shadow:3px3px3pxrgba(0,64,128,0.3);}第20页11.2.8阴影和反射效果还可以使用新增的反射功能来绘制出水中倒影的效果，示例代码如下:.classReflect{-webkit-box-reflect:below10px-webkit-gradient(linear,lefttop,leftbottom,from(transparent),to(rgba(255,255,255,0.51)));}第21页11.2.9背景效果CSS3中新增了关于背景的属性，例如，BackgroundClip属性用于确定背景画区，取值如下: border-box:背景从border开始显示。 padding-box:背景从padding开始显示。 content-box:背景从content区域开始显示。 no-clip:默认属性，等同于border-box。第22页11.2.10盒子模型盒子模型为开发者提供了一种非常灵活的布局方式，但是支持这一特性的浏览器并不多，目前只有webkit内核的新版本safari和chrome以及gecko内核的新版本firefox。下面是一个盒子模型的示例代码:<divclass="boxcontainer"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div><divclass="itemflex">4</div></div>第23页11.2.11过渡、形变与动画在CSS3中,可以通过Transitions实现过渡,Transform实现形变,Animation实现动画。第24页主要内容11.1CSS变迁11.2了解CSS3新增特性11.3CSS3兼容性速查11.4本章小结第25页11.3CSS3兼容性速查本书推荐常用的CSS3兼容性速查表:/，在搜索框