html5css3开发实例课件第2章3层叠表

第2章CSS3层叠样式表说起HTML

5必然会提到CSS3，不禁让人想起圆角、阴影、渐变页面渲染效果。CSS3是CSS技术的升级版本，是下一代样式表语言。CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。本章将对CSS3做一个全面的概要的介绍，让大家对CSS3有一个初步的、总体的认识。2.1CSS3简介首先，我们来了解一下CSS3的背景。2.1.1

CSS3的历史背景CSS的发展是伴随着HTML的发展而发展的。从1990年代初HTML被发明开始，样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。1994年哈坤·利提出了CSS的最初建议。伯特·波斯（BertBos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚创建，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。同年12月发CSS发布了第一个版本的规范CSS1。1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题。1998年5月发布了第二个版本的规范CSS

2。2002年工作组又启动了对CSS2.1的开发，这是CSS2的修订版，最终与2004年正式发布了修订版本CSS

2.1。CSS

2.1是目前最流行、浏览器支持最完整的版本。2.1.2CSS3的发展现状目前，CSS3规范尚处于完善之中，也因此浏览器的支持程度各有不同。为了让用户能够体验到CSS3的好处，各主流浏览器都定义了自己的私有属性。1.模块化的发展2.浏览器支持情况2.1.3CSS3新特性预览与之前的版本相比，CSS3的改进是非常大的。CSS3不仅仅是在修订和完善，更是增加了很多新的特性，把样式表的功能发挥的淋漓尽致。之前的很多效果都有借助图片和脚本来实现，现在只需要几行代码就能搞定了。这不仅简化了设计师的工作，页面代码也更加简洁和清晰。下面我们就一起浏览一下CSS3的主要新特性。1.功能强大的选择器2.文字效果3.边框4.背景5.色彩模式6.盒布局和多列布局7.渐变8.动画9.媒体查询2.2增强的选择器功能在样式表中，选择器是一个非常重要的功能。伴随CSS3和HTML5的发展，选择器的功能已经超出了CSS的应用范围，发展成为一个独立的选择器规范，目前还可以应用于脚本的选择查询。针对于样式表选择器，CSS3新增了诸多的选择符，并兼容CSS

1和CSS

2中的选择符。下面我们来系统地介绍一下CSS选择符，并详细介绍CSS3新增的选择符。2.2.1元素选择符和关系选择符元素选择符和关系选择符是CSS中最基本的选择符。如表2.2所示的是元素选择符；如表2.3所示的是关系选择符。2.2.2属性选择符在CSS3中，属性选择符已经构成了非常强大的标签属性过滤体系，如图2.4所示。有表2.4可知，CSS3新增了3个属性选择符：E[attr^="val"]、E[attr$="val"]、E[attr*="val"]。这些选择符遵循了惯用的编码规则，选用了^、$和*这三个通用的匹配运算符，具有如下的意义：^表示匹配起始符；$表示匹配结束符；*表示匹配任意字符。下面我们通过一个示例来了解这3个属性选择符的使用方法。1.属性选择符E[attr^="val"]2.属性选择符E[attr$="val"]3.属性选择符E[attr*="val"]2.2.3结构伪类选择符CSS3新增的结构伪类选择符，可以通过文档结构的相互关系来匹配特定的元素。对于有规律的文档结构，可以减少class属性和id属性的定义，使得文档结构更加简洁。结构伪类选择符如表2.5所示。1.选择符root、not、empty和target2.选择符first-child、last-child、nth-child和nth-last-child3.选择符nth-of-type和nth-last-of-type4.选择符only-child、first-of-type、last-of-type和only-of-type2.2.4

UI元素状态伪类选择符在CSS3中，还有一种伪类选择符叫UI元素状态伪类选择符，可以设置元素处在某种状态下的样式，在人机交互过程中，只要元素的状态发生了变化，选择符就有可能会匹配成功。下面列出了CSS中的UI元素状态伪类选择符，如表2.6所示。

2.2.5伪元素选择符CSS3中，还有一种伪元素选择符：是指并不是针对真正的元素使用的选择符，而是针对CSS已经定义好的伪元素使用选择符。下面是CSS3中改进过的伪元素选择符，如表2.7所示。

2.3小结本章主要是回顾了CSS的发展及目前的发展状况，并简要介绍CSS3的新特性。本章重点介绍了CSS3的选择器功能，为设计样式表提供更加灵活的代码设计方案。本章的难点在于对选择器功能的掌握。新增的选择器功能包括属性选择符、伪类选择符和伪元素选择符，他们在选择文档元素方面显得非常灵活，作为前端开发人员，一定要掌握它。下一章，我们将CSS3学习的第一步——文本、背景、边框