CSS3概述PPT演示课件

第1页,CSS3概述,本章概述 本章的学习目标主要内容,第2页,本章概述,在过去，Web页面的许多视觉效果都是由标记元素来描述，直接把表示页面结构的标记与表示页面外观的标记或属性混合在一起，HTML就是这样的标记语言。然而，之后出现的严格的XHTML则不允许出现用于描述外观的元素与特性，标记语言只是用于描述页面结构。描述外观的工作则交给用层叠样式表（Cascading Style Sheet，CSS）语法编写的样式表来完成。标记与样式之间的职责区分为Web页面的开发、维护，甚至运行性能都带来了诸多益处，而这种解决方案与仅仅使用标记相比，优势巨大。,第3页,本章的学习目标,CSS发展历史；为文档应用CSS的3种方式；了解CSS3的新增特性；了解查看CSS3兼容性的方法。,第4页,主要内容,11.1 CSS变迁11.2 了解CSS3新增特性11.3 CSS3兼容性速查11.4 本章小结,第5页,11.1 CSS变迁,11.1.1 CSS产生的原因11.1.2 CSS发展历史11.1.3 Hello CSS World11.1.4 为文档应用CSS的方式,第6页,11.1.1 CSS产生的原因,HTML的设计初衷并不是为了描述外观，HTML本身也并不善于此道。而早起的HTML却是既要负责文档结构又要负责文档样式，任务太重。因此，后来人们用HTML标记语言描述页面的结构，而将表示网页外观的功能标记或属性分离出来，这就形成了表示网页外观的替代方法层叠样式表(Cascading Style Sheet，CSS)。,第7页,11.1.2 CSS发展历史,1994年哈坤利提出了CSS的最初建议。伯特波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。,第8页,11.1.3 Hello CSS World,详情见【例11-1】一个使用CSS样式表现网页外观的例子。,第9页,11.1.4 为文档应用CSS的方式,CSS提供了3种使用方式：第一，内联样式表，通过HTML元素的style属性直接将样式嵌入HTML标记中；第二，样式规则块，将表示样式的style属性的内容，全部提到公共的样式规则块中，以方便管理和扩展；第三，外部链接样式文件，将样式彻底独立成一个文件，供任何页面调用。,第10页,主要内容,11.1 CSS变迁11.2 了解CSS3新增特性11.3 CSS3兼容性速查11.4 本章小结,第11页,11.2 了解CSS3新增特性,11.2.1 CSS3选择器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.1 CSS3选择器,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: 1px solid #bbb; -webkit-column-gap: 2em; 这段代码中，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,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue);,第19页,11.2.8 阴影和反射效果,阴影效果既可用于普通元素，也可用于文字，例如：.class1 text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); .class2 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); ,第20页,11.2.8 阴影和反射效果,还可以使用新增的反射功能来绘制出水中倒影的效果，示例代码如下：.classReflect -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.51); ,第21页,11.2.9 背景效果,CSS3中新增了关于背景的属性，例如，Background Clip属性用于确定背景画区，取值如下：border-box：背景从border开始显示。padding-box：背景从padding开始显示。content-box：背景从content区域开始显示。no-clip：默认属性，等同于border-box。,第22页,11.2.10 盒子模型,盒子模型为开发者提供了一种非常灵活的布局方式，但是支持这一特性的浏览器并不多，目前只有webkit内核的新版本safari和chrome以及gecko内核的新版本firefox。下面是一个盒子模型的示例代码： 1 2 3 4 ,第23页,11.2.11 过渡、形变与动画,在CSS3中，可以通过Transitions实现过渡，Transform实现形变，Animation实现动画。,第24页,主要内容,11.1 CSS变迁11.2 了解CSS3新增特性11.3 CSS3兼容性速查11.4 本章小结,第25页,11.3 CSS3兼容性速查,本书推荐常用的CSS3兼容性速查表：/，在