CSS3简介及强大的选择器.ppt

《CSS3简介及强大的选择器.ppt》由会员上传分享，免费在线阅读，更多相关内容在PPT专区-天天文库。

1、启奥-Web前端培训教程CSS3功能强大的选择器文本、字体效果边框、背景、色彩模式、渐变可伸缩布局、多列布局、用户界面过渡、动画、2D/3D旋转媒体查询总体课程导航第1章CSS3简介及强大的选择器启奥-Web前端培训教程本章节授课目标启奥-Web前端培训教程了解CSS3的发展方向及新特性掌握CSS3增强的选择器功能CSS3简介启奥-Web前端培训教程CSS3简介启奥-Web前端培训教程CSS即层叠样式表（CascadingStylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代

2、码做一些简单的修改，就可以改变同一页面的不同部分，或者不同的页面的外观和格式CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等CSS3的发展现状启奥-Web前端培训教程毋庸置疑，CSS3是WEB样式设计的未来，CSS3规范尚处于完善之中，因此浏览器的支持程度各有不同。为了让用户能够体验到CSS3的好处，各主浏览器都定义了自己的私有属性CSS3完全向后

3、兼容，因此不必改变现有的设计，浏览器通常支持CSS3CSS3的发展目前体现在两个方面模块化的发展浏览器支持情况CSS3的发展现状启奥-Web前端培训教程模块化的发展CSS3开始遵循模块化的开发，原因是以前的规范作为一个模块实在是庞大而且比较复杂，所以CSS3把它分解为多个小的模块，这样有助于清理各个模块之间的关系，并且非常灵活最重要的CSS3模块选择器框模型背景和边框文本效果2D/3D转换过渡/动画多栏布局用户界面CSS3的发展现状启奥-Web前端培训教程浏览器支持情况各个主流浏览器为了能让用户体验CSS3的新特性，都定义了各自的私有属性。虽然它可以避免不

4、同浏览器中解析同一个属性时出现冲突，但也没有解决同一页面在不同浏览器中表现不一致的问题，并且我们需要编写更多CSS代码，造成代码冗余不同浏览器的私有属性开发商前缀浏览器-moz-Firefox-webkit-Chorme和Safari-o-Opera-ms-IECSS3新特性预览启奥-Web前端培训教程与之前的版本相比，CSS3的改进非常大，增加了很多新的特性。之前的很多效果都需借助图片和脚本来实现，现在只需要几行代码就能完成功能强大的选择器文字效果边框背景色彩模式渐变盒布局和多列布局过渡/动画2D/3D旋转媒体查询增强的选择器功能启奥-Web前端培训教程

5、CSS3选择器启奥-Web前端培训教程在CSS中，选择器是一种模式，用于选择需要添加样式的元素。以下列出的是在CSS3版本中定义的，即：兄弟选择器属性选择器伪类选择器兄弟选择器启奥-Web前端培训教程element1~element2(找到E1后面能匹配E2的兄弟节点)例：#box~.long{background:#FC0;}找到id为box的元素后面class名为long的兄弟节点属性选择器启奥-Web前端培训教程CSS3一共新增了3个属性选择器，这些选择器遵循了惯用的编码规则，选用了^、$和*三个通用的匹配运算符，具有如下意义：^表示匹配起始符$表示

6、匹配结束符*表示匹配任意字符属性选择器启奥-Web前端培训教程[attribute^=value]匹配属性值以指定值开头的每个元素(IE6不支持)[attribute$=value]匹配属性值以指定值结尾的每个元素，与上一属性结果相反[attribute*=value]匹配属性值包含指定值的每个元素1、例如：设置class属性值以“test”开头的所有div元素的背景色div[class^=“test”]{background:#ffff00;}2、例如：设置class属性值以"test"开头的所有元素的背景色：[class^="test"]{backgr

7、ound:#ffff00;}伪类选择器启奥-Web前端培训教程伪类选择器分成三大类：结构伪类：可以通过文档结构的相互关系来匹配特定的元素，对于有规律的文档结构，可以减少class和id的定义，使得文档结构更加清晰UI元素状态伪类：可以设置元素处于某种状态下的样式。在人机交互过程中，只要元素状态发生变化，选择符就有可能会匹配成功伪元素：并不针对真正的元素使用该选择符，而是针对CSS已经定义好的伪元素使用伪类选择器启奥-Web前端培训教程结构伪类：E:first-of-type：匹配与E同类型、同级的兄弟元素中的第一个元素E:last-of-type：匹配与E

8、同类型、同级的兄弟元素中的最后一个元素E:only-of-type