HTML第13章-CSS3的选择器课件.ppt

1、第第13章章 CSS3的选择器CSS3概述概述1CSS的基本选择器的基本选择器2在在HTML中使用中使用CSS的方法的方法3CSS复合选择器复合选择器4CSS3新增的选择器新增的选择器5使用使用CSS设计网站页面设计网站页面613.1 CSS3概述概述13.1.1 CSS3简介简介1CSS的发展的发展2浏览器对浏览器对CSS3的支持的支持 流行的浏览器对流行的浏览器对CSS都有很好的支持，但不同浏览器对都有很好的支持，但不同浏览器对CSS3很多很多细节的处理存在差异。细节的处理存在差异。3CSS的编辑器的编辑器 Dreamweaver CS5、WebStorm、IntelliJ IDEA199

2、6年12月，CSS1规范1998年5月，CSS2规范2001年5月，CSS3工作草案CSS3不断改进发展13.1 CSS3概述概述13.1.2 CSS的一个示例的一个示例示例示例13-1：使用传统的使用传统的HTML设计页面。设计页面。13.1 CSS3概述概述13.1.2 CSS的一个示例的一个示例使用使用CSS改进改进HTML设计页面。设计页面。使用使用CSS有以下几个主要优点。有以下几个主要优点。（1）结构和风格分离）结构和风格分离（2）扩充）扩充HTML标记标记（3）提高网站维护效率）提高网站维护效率（4）可以实现精美的页面布局）可以实现精美的页面布局13.2 CSS的基本选择器 CS

3、S可以认为是多个选择器组成的集合，每个选择器由可以认为是多个选择器组成的集合，每个选择器由3个基本部分组成个基本部分组成“选择器名称选择器名称”、“属性属性”和和“值值”，格式定义如下。格式定义如下。selectorproperty:value;13.2 CSS的基本选择器13.2.1 标记选择器标记选择器 一个一个HTML页面由很多不页面由很多不同的标记组成，例如同的标记组成，例如、等。等。CSS标记选择器就用于声明这些标记选择器就用于声明这些标记的标记的CSS样式。样式。tagName property:value;13.2.2 类选择器类选择器 类选择器用来为一系列类选择器用来为一系列标

4、记定义相同的呈现方标记定义相同的呈现方式。式。.className property:value;13.2 CSS的基本选择器13.2.2 类选择器类选择器示例示例13-3所示为标记选择器和类选择器的综合应所示为标记选择器和类选择器的综合应用用 13.2 CSS的基本选择器13.2.3 ID选择器选择器 ID选择器和类选择器在设置格式的功能上类似，都是对选择器和类选择器在设置格式的功能上类似，都是对特定属性的属性值进行设置。特定属性的属性值进行设置。ID选择器的一个重要功能是用做网页元素的唯一标识，选择器的一个重要功能是用做网页元素的唯一标识，所以，一个所以，一个HTML文件中一个元素的文件中

5、一个元素的ID属性值中惟一的。属性值中惟一的。定义定义ID选择器的语法格式如下。选择器的语法格式如下。#idName property:value;13.2 CSS的基本选择器13.2.3 ID选择器选择器在定义在定义ID选择器时，需要在选择器时，需要在idName前面加一个前面加一个“#”符号，如下面的符号，如下面的示例所示。示例所示。#font1 font-family:幼圆幼圆;color:#00F;类选择器与类选择器与ID选择器主要区别如下。选择器主要区别如下。（1）类选择器可以给任意数量的标记定义样式，但）类选择器可以给任意数量的标记定义样式，但ID选择器在页面的选择器在页面的标记中

6、只能使用一次。标记中只能使用一次。（2）ID选择器比类选择器具有更高的优先级，即当选择器比类选择器具有更高的优先级，即当ID选择器与类选择选择器与类选择器在样式定义上发生冲突时，优先使用器在样式定义上发生冲突时，优先使用ID选择器定义的样式。选择器定义的样式。13.2 CSS的基本选择器示例示例13-4 ID选择器的应用选择器的应用13.3 在HTML中使用CSS的方法13.3.1 行内样式行内样式 最简单的一种使用方式，直接把最简单的一种使用方式，直接把CSS代码添加到代码添加到HTML的代码行中，由的代码行中，由标记支持，代码示例如下：标记支持，代码示例如下：13.3.2 嵌入样式嵌入样式

7、 将样式定义作为网页代码的一部分，写在将样式定义作为网页代码的一部分，写在HTML文档的文档的和和之间，通过之间，通过和和标记来声明。标记来声明。嵌入的样式与行内样式有相似的，嵌入的样式与行内样式有相似的，也有也有不同，行内样式不同，行内样式的作用域只有一行，而嵌入的样式可以作用于整个的作用域只有一行，而嵌入的样式可以作用于整个HTML文文档中。档中。13.3 在HTML中使用CSS的方法示例示例13-5是包含行内样式和嵌入样式是包含行内样式和嵌入样式。13.3 在HTML中使用CSS的方法13.3.3 链接样式链接样式 链接样式是在链接样式是在HTML中引入中引入CSS使用频率最高的方法使用

8、频率最高的方法。体现了“页面内容”和“样式定义”分离实现了内容描述和CSS代码的分离网站的前期制作和后期维护都十分方便。链接样式先要定义一个扩展名为链接样式先要定义一个扩展名为“.css”的文件（即外部的文件（即外部样式表），该文件包含需要用到的样式表），该文件包含需要用到的CSS规则，不包含任何其规则，不包含任何其他的他的HTML代码。代码。链接样式表的方法就是在链接样式表的方法就是在HTML文件的文件的部分添部分添加代码，格式如下。加代码，格式如下。13.3 在HTML中使用CSS的方法链接样式表的一个示例链接样式表的一个示例demo0306.html13.3 在HTML中使用CSS的方法

9、13.3.4 导入样式导入样式 导入样式和链接样式的操作过程基本相同，都需要一个单独的外部CSS文件，然后再将其导入到HTML文件中，但在语法和运行过程上有所差别。导入样式是HTML文件初始化时将外部CSS文件导入到HTML文件内，作为文件的一部分，类似于嵌入。导入外部样式需要在内嵌样式表的标记中使用import导入一个外部的CSS文件，示例代码如下。importmystyle.css;13.3 在HTML中使用CSS的方法示例示例13-7使用导入样式表完成示例使用导入样式表完成示例13-6的显示的显示13.3 在HTML中使用CSS的方法13.3.5 样式的优先级样式的优先级1行内样式和嵌入

10、样式比较行内样式和嵌入样式比较行内样式的优先级大于嵌入样式行内样式的优先级大于嵌入样式13.3 在HTML中使用CSS的方法2嵌入样式和链接样式比较嵌入样式和链接样式比较嵌入样式的优先级高于链接样式。嵌入样式的优先级高于链接样式。13.3 在HTML中使用CSS的方法3链接样式和导入样式链接样式和导入样式链接样式的优先级高于导入样式链接样式的优先级高于导入样式的优先级。的优先级。通过前面的例子，通过前面的例子，CSS样式表方样式表方式的优先顺序由高到低次依为：式的优先顺序由高到低次依为：行内样式、嵌入样式、链接样式行内样式、嵌入样式、链接样式和导入样式。和导入样式。13.4 CSS复合选择器

11、复合选择器就是两个或多个基本选择器通过不同方式组复合选择器就是两个或多个基本选择器通过不同方式组合而成的选择器，可以实现更强、更方便的选择功能，主要合而成的选择器，可以实现更强、更方便的选择功能，主要有交集选择器、并集选择器和后代选择器等。有交集选择器、并集选择器和后代选择器等。13.4.1 交集选择器交集选择器 交集选择器是由两个选择器直接连接构成的，其结果是交集选择器是由两个选择器直接连接构成的，其结果是选中两者各自作用范围的交集。其中，第一个必须是标记选选中两者各自作用范围的交集。其中，第一个必须是标记选择器，第二个必须是类选择器或择器，第二个必须是类选择器或ID选择器，例如：选择器，例

12、如：“h1.class1；p#id1”。交集选择器的基本语法格式如下。交集选择器的基本语法格式如下。tagName.className property:value;13.4 CSS复合选择器示例示例13-11演示了交集选择器的作用演示了交集选择器的作用13.4 CSS复合选择器13.4.2 并集选择器并集选择器 并集选择器就是对多个选择器进行集体声明，多个选择并集选择器就是对多个选择器进行集体声明，多个选择器之间用器之间用“，”隔开，每个选择器可以是任何类型选择器。隔开，每个选择器可以是任何类型选择器。如果某些选择器定义的样式完全相同，或者部分相同，如果某些选择器定义的样式完全相同，或者部分

13、相同，则可以使用并集选择器。则可以使用并集选择器。下面是并集选择器的语法格式。下面是并集选择器的语法格式。selector1,selector2,property:value;13.4 CSS复合选择器示例示例13-12演示了并集选择器的作用演示了并集选择器的作用13.4 CSS复合选择器13.4.3 后代选择器后代选择器 在在CSS选择器中，还可以通过嵌套的方式，对特殊位置的选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行控制。例如，当标记进行控制。例如，当与与之间包之间包含含标记时，就可以使用后代选择器定义出现在标记时，就可以使用后代选择器定义出现在标记中的标记中的标记的格式。

14、后代选择器的写法是把外层的标记的格式。后代选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。标记写在前面，内层的标记写在后面，之间用空格隔开。selector1 selector2 property:value;两个选择器之间用空格隔开，并且两个选择器之间用空格隔开，并且selector2是是selector1包含的对象。包含的对象。13.4 CSS复合选择器示例示例13-13演示了后代选择演示了后代选择器的作用器的作用13.4 CSS复合选择器13.4.4 子选择器子选择器子选择器语法格式如下：子选择器语法格式如下：selector1selector213.4 CSS复

15、合选择器13.4.5 相邻选择器相邻选择器 相邻选择器的定义符号是相邻选择器的定义符号是加号（加号（+），可以选中紧跟），可以选中紧跟在它后面的一个兄弟元素（在它后面的一个兄弟元素（这两个元素具有共同的父元这两个元素具有共同的父元素）素）.13.5 CSS3新增的选择器13.5.1 属性选择器属性选择器 通过各种各样的属性，可以给元素增加很多附加信息。例如，通过通过各种各样的属性，可以给元素增加很多附加信息。例如，通过id属性，可以区分不同的元素；通过属性，可以区分不同的元素；通过class属性，可以设置元素的样式。属性，可以设置元素的样式。为了扩展属性选择器的功能，可以使用为了扩展属性选择器

16、的功能，可以使用、$和和*这三个通配符。这三个通配符。表表13-1 属性选择器及其功能属性选择器及其功能选择器选择器说明说明att*=value匹配属性包含特定值的元素。例如，匹配属性包含特定值的元素。例如，ahref*=lnnu，匹配匹配包含匹配包含匹配att=value匹配属性包含以特定值开头的元素。例如，匹配属性包含以特定值开头的元素。例如，ahref=ftp，匹配匹配头匹配头匹配att$=value匹配属性包含以特定值结尾的元素。例如，匹配属性包含以特定值结尾的元素。例如，ahref$=cn，匹，匹配配尾匹配尾匹配att=value匹配属性等于某特定值的元素。例如，匹配属性等于某特定值

17、的元素。例如，type=text，匹配，匹配13.5 CSS3新增的选择器示例示例13-16是关于属性选择器的一个例子是关于属性选择器的一个例子13.5 CSS3新增的选择器13.5.2 伪类选择器伪类选择器 伪类选择器区别于类选择器，类选择器是由用户自行定义，而伪类选伪类选择器区别于类选择器，类选择器是由用户自行定义，而伪类选择器是在择器是在CSS中已经定义好的选择器。中已经定义好的选择器。伪类选择器可以分为结构伪类选择器和伪类选择器可以分为结构伪类选择器和UI元素伪类选择器元素伪类选择器2种。种。1.基本结构伪类选择器基本结构伪类选择器表表13-2 基本结构伪类选择器基本结构伪类选择器选择

18、器选择器功能功能:root 匹配文档的根元素匹配文档的根元素:not 对某个结构元素使用样式，但排除这个结构元素下面的子结构元素。对某个结构元素使用样式，但排除这个结构元素下面的子结构元素。:empty 指定当元素内容为空白时使用的样式。指定当元素内容为空白时使用的样式。:target对页面中某个对页面中某个target元素（该元素的元素（该元素的id被当做页面的超链接来使用）指被当做页面的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元元素后起作用。素后起作用。13.5 CSS3新增的选择器13.5.2

19、 伪类选择器伪类选择器13.5 CSS3新增的选择器3.UI伪类选择器伪类选择器表表13-4 常用的常用的UI伪类选择器伪类选择器选择器选择器功能功能E:enabled选择匹配选择匹配E的所有可用的所有可用UI元素。注意，在网页中，元素。注意，在网页中，UI元素一般是指包含在元素一般是指包含在form元素内的表单元元素内的表单元素。例如素。例如:input:enabled匹配下面代码框中的文本框，无法匹配该片段中的按钮。匹配下面代码框中的文本框，无法匹配该片段中的按钮。E:disabled选择匹配选择匹配E的所有不可用的所有不可用UI元素。注意，在网页中，元素。注意，在网页中，UI元素一般是指

20、包含在元素一般是指包含在form元素的表单元元素的表单元素。例如素。例如:input:disabled匹配下面代码段中的按钮，但不匹配该片段中的文本框。匹配下面代码段中的按钮，但不匹配该片段中的文本框。E:checked选择匹配选择匹配E的所有处于选中状态的的所有处于选中状态的UI元素。注意，在网页中，元素。注意，在网页中，UI元素一般是指包含在元素一般是指包含在form元素元素内的表单元素。内的表单元素。E:read-only用来指定当元素处于只读状态时的样式。用来指定当元素处于只读状态时的样式。E:read-write用来指定当元素处于非只读状态时的样式。用来指定当元素处于非只读状态时的样

21、式。E:hover用来指定当鼠标指针移动到元素上面时元素所使用的样式。用来指定当鼠标指针移动到元素上面时元素所使用的样式。E:active用来指定当元素被激活时使用的样式。用来指定当元素被激活时使用的样式。E:focus用来指定当元素处获得焦点时使用的样式。用来指定当元素处获得焦点时使用的样式。13.5 CSS3新增的选择器3.UI伪类选择器伪类选择器13.5 CSS3新增的选择器示例示例13-18是超级链接的伪类选是超级链接的伪类选择器的应用。择器的应用。13.5 CSS3新增的选择器示例示例13-19展示了伪类选择器展示了伪类选择器:focus和和:first-child的功能的功能13.

22、5 CSS3新增的选择器13.5.3 伪元素选择伪元素选择器器1:first-letter和和:first-line:first-letter用于选中元素内用于选中元素内容的首字符。容的首字符。:first-line用于用于选中元素中的首行文本。选中元素中的首行文本。13.5 CSS3新增的选择器2选择器选择器:before和和:after :before和和:after两个伪对象必须配合两个伪对象必须配合content属性使用属性使用才有意义。它们的作用是在指定的标记内产生一个新的行内才有意义。它们的作用是在指定的标记内产生一个新的行内标记，该行内元素的内容由标记，该行内元素的内容由cont

23、ent属性里的内容决定。属性里的内容决定。v before选择器用于在某个元素之前插入内容。选择器用于在某个元素之前插入内容。:before content:文字或其他内容文字或其他内容 v after选择器用于在某个元素之后插入内容。选择器用于在某个元素之后插入内容。:after content:文字或其他内容文字或其他内容 13.5 CSS3新增的选择器示例示例13-21展示了伪元素选择器展示了伪元素选择器的应用的应用13.6 使用CSS设计网站页面 示示例的布局使用表格，页面中的元素如文字、超级链例的布局使用表格，页面中的元素如文字、超级链接、表单、水平线等由接、表单、水平线等由CSS来控制，页面效果如图来控制，页面效果如图13-14所示。所示。13.6 使用CSS设计网站页面1网页布局网页布局2在页面中应用的样式在页面中应用的样式示例示例13-22的全部代码的全部代码(略略)作业与操作（1）创建一个名为“mycss1”的样式文件，该样式定义字体为华文仿宋、幼园和宋体，字号为12pt，颜色为黄色，背景为蓝色，并在一个HTML文件中链接该样式文件。（2）设计一个示例，使用属性选择器、伪类选择器、伪元素选择器、后代选择器等控制文本、段落或图片的样式。