网页设计案例课堂网页设计网站设计网页设计入门自学教程教材html5标准计算机开发附光盘教学幻灯片7.pptVIP

第7章 CSS3概述 本章内容 7.1 CSS3介绍 7.2 编辑和浏览CSS 7.3 在HTML5中使用CSS3的方法 7.4 CSS3选择器 7.5 选择器声明 7.6 综合实例1——制作五彩标题 7.7 综合实例2——制作新闻菜单 7.1 CSS3介绍 7.1.1 CSS3功能 7.1.2 CSS3发展历史 7.1.3 浏览器与CSS3 7.2 编辑和浏览CSS 7.2.1 CSS基础语法 7.2.1 手工编写CSS 7.2.2 Dreamweaver编写CSS 7.3 在HTML5中使用CSS3的方法 7.3.1 行内样式 7.3.2 内嵌样式 7.3.3 链接样式 7.3.4 导入样式 7.3.5 优先级问题 7.4 CSS3选择器 7.4.1 标签选择器 7.4.2 类选择器 7.4.3 ID选择器 7.4.4 全局选择器 7.4.5 组合选择器 7.4.6 继承选择器 7.4.7 伪类 7.4.8 属性选择器 7.4.9 结构伪类选择器 7.4.10 UI元素状态伪类选择器 7.4.1 标签选择器 HTML文档是由多个不同标记组成，而CSS选择器就是声明那些标记采用样式。例如p选择器，就是用于声明页面中所有p标记的样式风格。标签选择器形式如下所示。 tagName{property:value} 实例：7.1.html 7.4.2 类选择器 类选择器用来为一系列标记定义相同的呈现方式，常用语法格式如下 。classValue {property:value}。 实例：7.2.html 7.4.3 ID选择器 ID选择器和类选择器类似，都是针对特定属性的属性值进行匹配。ID选择器定义的是某一个特定的HTML元素，一个网页文件中只能有一个元素使用某一ID的属性值。ID选择器的基本格式如#idValue{property:value}。 实例：7.3.html 7.4.4 全局选择器 如果想要一个页面中所有html标记使用同一种样式，可以使用全局选择器。全局选择器，顾名思义就是对所有HTML元素其作用。其语法格式为*{property:value}。 实例：7.7.html 7.4.5 组合选择器 将多种选择器进行搭配，可以构成一种复合选择器，也称为组合选择器。即将标签选择器、类选择器和ID选择器组合起来使用。组合选择器只是一种组合形式，并不算是一种真正的选择器，但在实际中经常使用。使用示例如.orderlist li {xxxx}。 实例：7.5.html 7.4.6 继承选择器 子标记在没有定义的情况下所有的样式是继承父标记的，当子标记的重复定义了父标记已经定义过的声明时，子标记就执行后面的声明；与父标记不冲突的地方仍然沿用父标记的声明。 实例：7.6.html 7.4.7 伪类 伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标记上的。伪类作用在标记的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类不常被用到。 伪类包括：:first-child、:link:、:vistited、:hover、:active、:focus和:lang等等。其中有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:vistited、:hover和:active。 实例：7.7.html 7.4.8 属性选择器 属性选择器就是根据某个属性是否存在或属性值来寻找元素，因此能够实现意想不到的的效果。现在CSS3中，属性选择器分别是E[foo]、E[foo= “bar ”]、E[foo~= “bar ”]、E[foo|=“en”]、E[foo^=“bar”]、E[foo$=“bar”]、E[foo*=“bar”]。 实例：7.8.html 7.4.9 结构伪类选择器 结构伪类（Structural pseudo-classes）是CSS3新增的类型选择器。顾名思义，结构伪类就是利用文档结构树（DOM）实现元素过滤，也就是说，通过文档结构的相互关系来匹配特定的元素，从而减少文档内对class属性和ID属性的定义，使得文档更加简洁。例如E:root 、E:nth-child(n)、E:nth-last-child(n) 、E:nth-of-type(n) 、E:nth-last-of-type(n)、E:last-child、E:first-of-type。 实例：7.9.html 7.4.10 UI元素状态伪类选择器 UI元素状态伪类（The UI element states pseudo-classes）也是CSS3新增选择器。其中UI即User Interface（用户界面）的简称。U