6.2 CSS选择器 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（机械工业出版社）

网页设计与制作 第六章 CSS样式表 样式表的应用非常广泛，通过定义样式表，可以对页面中的元素进行美化，是美化网页的重要手段之一。Dreamweaver CS5.5支持强大的样式表定义，通过样式表的编辑功能，可以方便快捷地为网页定义各种各样的样式。 6.2 CSS选择器 样式表的定义由两个主要的部分构成：选择器，以及一条或多条声明。 Selector {declaration1; declaration2; … eclaration } 选择器，英文称为selector，是CSS中很重要的概念。所有HTML语言中的标记样式都是通过选择器来进行控制的。每条声明由一个属性和一个值组成。每个属性有一个值。属性和值之间用冒号分开。如果要定义不止一个声明，则需要用分号将每个声明分开。 6.2 CSS选择器 6.2.1标记选择器：整体控制 标记选择器是最常见的CSS选择器。一个HTML页面有很多不同的标记组成，而标记选择器，则是决定哪些标记采用相应的CSS样式。因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称，如图所示。 CSS标记选择器 6.2 CSS选择器 6.2.1标记选择器：整体控制 上图中的CSS代码声明了HTML页面中的所有的<h1>标记，文字的颜色为红色，字体大小为14px。在后期维护中，如果想改变整个网站中h1标记文字的颜色，只需要修改color属性就可以了。 6.2 CSS选择器 6.2.2类选择器：精确控制 定义类选择器时，在自定义类的名称前面加一个“.”号，类选择器的名称可以是任意英文单词或者英文开头与数字的组合，一般根据其功能和效果命名。与标记选择器一样，属性和值必须要符合CSS规范，如图所示。 类选择器 6.2 CSS选择器 6.2.3id选择器：控制特殊的网页元素 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。定义id选择器时在id名称前加“#”， id选择器是用来对单一元素定义单独的样式。Id选择器的使用方法与class选择器基本相同，如图所示。 id选择器 6.2 CSS选择器 6.2.4群选择器 当几个选择器样式属性一样时，可以共同调用一个声明，选择器之间用逗号分隔，这样可以精简代码。可以把群选择器看成是几个选择器的并集。只要选择器属于并集都可以运用该样式。 6.2 CSS选择器 6.2.5交集选择器 交集选择器是由两个选择器直接连接构成。其结果是选中两者各自元素范围的交集。其中，第一个选择器必须是标记选择器，第二个必须是类选择器或id选择器，而且必须连续书写。 6.2 CSS选择器 6.2.6伪类选择器 伪类选择器可以看做是一种特殊的类选择器，伪类用于向某些选择器添加特殊的效果。它可以对链接在不同状态下定义不同的样式效果。 伪类的语法是在原有的语法里加上一个伪类（pseudo-class），如图所示： 伪类选择器 6.2 CSS选择器 6.2.6伪类选择器 伪类选择器主要用来定义链接在不同的状态下显示不同的效果。这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。 将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了。 6.2 CSS选择器 6.2.7 CSS继承 CSS继承是指父元素的样式同样适合于子元素。善于利用CSS继承能够使代码更加简洁。例如定义p {color: red; }，则段落内所有的文字都变成红色。 继承也有其局限性，并非所有的CSS属性都可以继承。文本相关属性、列表相关属性、颜色相关属性是可以继承的。但是，border属性是用来设置元素边框的，不能被继承。边框类属性如border，margin，padding之类都是不能被继承的。 6.2 CSS选择器 6.2.7 CSS继承 继承有时也会引起错误。例如定义body{color: red;}，有些浏览器会使表格之外的颜色变成红色，表格却不会改变，这时，可以定义为body, table, th, td{color:red;}使表格内的文字都会变成红色。 6.2 CSS选择器 6.2.8层叠 CSS全称叫做“层叠样式表”，层叠是CSS中很重要的性质。层叠和继承有本质的区别，不能将两者混淆。可以将层叠理解为遇到样式“冲突”时采用何种样式。 Thank You ! � h1 {color:red; font-size:1