CSS3简介及强大的选择器综述.pptx

启奥-Web前端培训教程 CSS3 功能强大的选择器 文本、字体效果 边框、背景、色彩模式、渐变 可伸缩布局、多列布局、用户界面 过渡、动画、2D/3D旋转 媒体查询 总体课程导航 第1章 CSS3简介及强大的选择器 启奥-Web前端培训教程 本章节授课目标 启奥-Web前端培训教程 了解CSS3的发展方向及新特性 掌握CSS3增强的选择器功能 CSS3简介 启奥-Web前端培训教程 CSS3简介 启奥-Web前端培训教程 CSS即层叠样式表（Cascading Stylesheet）。 在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同的页面的外观和格式 CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等 CSS3的发展现状 启奥-Web前端培训教程 毋庸置疑，CSS3是WEB样式设计的未来，CSS3规范尚处于完善之中，因此浏览器的支持程度各有不同。为了让用户能够体验到CSS3的好处，各主浏览器都定义了自己的私有属性 CSS3 完全向后兼容，因此不必改变现有的设计，浏览器通常支持 CSS3 CSS3的发展目前体现在两个方面 模块化的发展 浏览器支持情况 CSS3的发展现状 启奥-Web前端培训教程 模块化的发展 CSS3开始遵循模块化的开发，原因是以前的规范作为一个模块实在是庞大而且比较复杂，所以CSS3把它分解为多个小的模块，这样有助于清理各个模块之间的关系，并且非常灵活 最重要的CSS3模块 选择器 框模型 背景和边框 文本效果 2D/3D 转换 过渡/动画 多栏布局 用户界面 CSS3的发展现状 启奥-Web前端培训教程 浏览器支持情况 各个主流浏览器为了能让用户体验CSS3的新特性，都定义了各自的私有属性。虽然它可以避免不同浏览器中解析同一个属性时出现冲突，但也没有解决同一页面在不同浏览器中表现不一致的问题，并且我们需要编写更多CSS代码，造成代码冗余 不同浏览器的私有属性 开发商前缀 浏览器 -moz- Firefox -webkit- Chorme和Safari -o- Opera -ms- IE CSS3新特性预览 启奥-Web前端培训教程 与之前的版本相比，CSS3的改进非常大，增加了很多新的特性。之前的很多效果都需借助图片和脚本来实现，现在只需要几行代码就能完成 功能强大的选择器 文字效果 边框 背景 色彩模式 渐变 盒布局和多列布局 过渡/动画 2D/3D旋转 媒体查询 增强的选择器功能 启奥-Web前端培训教程 CSS3选择器 启奥-Web前端培训教程 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。以下列出的是在CSS3 版本中定义的，即： 兄弟选择器 属性选择器 伪类选择器 兄弟选择器 启奥-Web前端培训教程 element1~element2(找到E1后面能匹配E2的兄弟节点) 例：#box~.long {background:#FC0;} 找到id为box的元素后面class名为long的兄弟节点 属性选择器 启奥-Web前端培训教程 CSS3一共新增了3个属性选择器，这些选择器遵循了惯用的编码规则，选用了^、$和*三个通用的匹配运算符，具有如下意义： ^表示匹配起始符 $表示匹配结束符 *表示匹配任意字符 属性选择器 启奥-Web前端培训教程 [attribute^=value]匹配属性值以指定值开头的每个元素(IE6不支持) [attribute$=value]匹配属性值以指定值结尾的每个元素，与上一属性结果相反 [attribute*=value] 匹配属性值包含指定值的每个元素 1、例如：设置 class 属性值以 “test” 开头的所有 div 元素的背景色 div[class^=“test”]{background:#ffff00;} 2、例如：设置 class 属性值以 test 开头的所有元素的背景色： [class^=test] {background:#ffff00;} 伪类选择器 启奥-Web前端培训教程 伪类选择器分成三大类： 结构伪类：可以通过文档结构的相互关系来匹配特定的元素，对于有规律的文档结构，可以减少class和id的定义，使得文档结构更加清晰 UI元素状态伪类：可以设置元素处于某种状态下的样式。在人机交互过