第11章 CS3.ppt

第11章 CSS3概述 第*页 第11章 CSS3概述 本章概述 本章的学习目标 主要内容 第*页 本章概述 在过去，Web页面的许多视觉效果都是由标记元素来描述，直接把表示页面结构的标记与表示页面外观的标记或属性混合在一起，HTML就是这样的标记语言。然而，之后出现的严格的XHTML则不允许出现用于描述外观的元素与特性，标记语言只是用于描述页面结构。描述外观的工作则交给用层叠样式表（Cascading Style Sheet，CSS）语法编写的样式表来完成。标记与样式之间的职责区分为Web页面的开发、维护，甚至运行性能都带来了诸多益处，而这种解决方案与仅仅使用标记相比，优势巨大。 第*页 本章的学习目标 CSS发展历史； 为文档应用CSS的3种方式； 了解CSS3的新增特性； 了解查看CSS3兼容性的方法。 第*页 主要内容 11.1 CSS变迁 11.2 了解CSS3新增特性 11.3 CSS3兼容性速查 11.4 本章小结 第*页 11.1 CSS变迁 11.1.1 CSS产生的原因 11.1.2 CSS发展历史 11.1.3 Hello CSS World 11.1.4 为文档应用CSS的方式 第*页 11.1.1 CSS产生的原因 HTML的设计初衷并不是为了描述外观，HTML本身也并不善于此道。而早起的HTML却是既要负责文档结构又要负责文档样式，任务太重。因此，后来人们用HTML标记语言描述页面的结构，而将表示网页外观的功能标记或属性分离出来，这就形成了表示网页外观的替代方法——层叠样式表(Cascading Style Sheet，CSS)。 第*页 11.1.2 CSS发展历史 1994年哈坤?利提出了CSS的最初建议。伯特?波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。 第*页 11.1.3 Hello CSS World 详情见【例11-1】一个使用CSS样式表现网页外观的例子。 第*页 11.1.4 为文档应用CSS的方式 CSS提供了3种使用方式：第一，内联样式表，通过HTML元素的style属性直接将样式嵌入HTML标记中；第二，样式规则块，将表示样式的style属性的内容，全部提到公共的样式规则块中，以方便管理和扩展；第三，外部链接样式文件，将样式彻底独立成一个文件，供任何页面调用。 第*页 主要内容 11.1 CSS变迁 11.2 了解CSS3新增特性 11.3 CSS3兼容性速查 11.4 本章小结 第*页 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 过渡、形变与动画 第*页 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)，利用这些新特性，可以极大程度地减少无畏代码。 第*页 11.2.2 引用服务端字体 当未在客户端安装字体样式时，在CSS3中，可以使用服务端字体，代码如下： @font-face { font-family: BorderWeb; src:url(BORDERW0.eot); } 以上代码声明了服务端字体BORDERW0.eot，冠以“BorderWeb” 的字体名称。声明之后即可在页面中使用了：“FONT-FAMILY:BorderWeb” 。 第*页 11.2.3 换行处理 word-wrap属性主要用于指定当当前行超过指定容器的边界时如何处理的操作。 第*页 11.2.4 文字渲染 CSS3开始支持对文字进行更深层次的渲染，示例代码如下： div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 2.75