第四章 CSS选择器
第4章 CSS样式表
[教学目的]
1、掌握基本选择器的类型
2、理解选择器继承的含义
3、掌握复合选择器的用法
[教学重点]选择器继承的含义、复合选择器的用法
[教学难点]选择器继承的含义
[教学课时]4课时
4.1什么是样式表
CSS(Cascading Style Sheet)_层叠样式表，顾名思义，它是用来定义文档的样式的，具体说就是定义文档的布局、色彩，文本的字型、字体、字号等。前面讲过，通过HTML标记的属性就可以定义文档的样式，为什么还要用CSS呢？这是因为，HTML标记属性功能有局限性。例如文字只能定义7种字号，满足不了网页丰富多彩样式的需求；其次，HTML标记只能在某个具体位置上定义，如果一个网页中有很多地方要进行同样的样式定义，或者不同网页要进行的同样的样式定义就十分麻烦，而且也不便于修改。因此，就需要有一种新的、方便的样式定义的工具，于是CSS就产生了。那么，为什么叫“层叠”样式表呢？这里主要是指CSS样式表可以一层层嵌套定义，内层继承外层的属性，内层属性的优先级高于外层。
当今流行的网站不仅使用CSS来美化（或称表现）网页的内容，更主要的还使用CSS来布局，实现网页结构、表现和行为的分离，这对提高网页设计的灵活性及网页的可维护性都有很大好处。
CSS样式表有广泛的应用，它除了应用在HTML文档中外，还应用于XML文档。所以，CSS 是非常重要的概念。
4.2 基本CSS选择器
定义网页元素的样式，首先要准确定位到该网页元素。一个网页中，同类网页元素一般都不只一个，而且网页元素往往会成嵌套结构。所以，准确定位网页元素就成为定义其样式的先决条件。为此，CSS采用了选择器这样的概念定位网页元素，在选择器的后面用大括号里的内容来定义该网页元素的样式。
CSS样式表的定义格式如下。
格式：
选择器 {样式}
其中：
样式可以由多种属性的值来决定。写的具体一些，即：
选择器 {属性1：值1；属性2：值2；…属性n:值n}
例如：p {font-size: 18px; font-style: italic;}，“p”是选择器，{ }中的内容是p标记所在的段落文字的样式。其含义就是段落中的文字大小为18像素，字体为斜体（意大利体）。
注意，{ }中每一种属性与其值之间用“:”隔开，各种样式属性之间以“；”隔开。
选择器的作用就是帮助你准确地定位到被你选中的、想要设定样式的网页元素上。有些元素比较容易定位，有些元素代码互相嵌套，可能不容易定位。所以选择器就分为简单选择器和复合选择器。容易定位的地方用简单选择器，否则用复合选择器。所谓复合选择器就是若干简单选择器的组合。例如，在同一教室里同学直呼你的名字就可以找到你，这就是简单选择定位，你的名字就是简单选择器；而家里给你写信就必须写清××省××市××区××学院××班×××，这就是复合选择定位，信封上的地址、姓名就可以看成复合选择器。
下面，我们分别介绍一下这两种选择器的定义和使用方法。
4.2.1简单选择器
简单选择器分为：标记选择器、类选择器和ID选择器三种。
4.2.1.1标记选择器：
在HTML网页中，使用HTML的标记本身作为定位选择器，称为标记选择器。HTML标记本来都有自己确定的样式（HTML样式），但在CSS中可以再给这些标记增加新的样式，当新增的样式和原有样式冲突时，以新定义样式为准。例如，p标记用来表示段落，除此以外并无其他意义。但如果我们定义如下CSS样式：
p {font-size: 18px; font-style: italic;}
此时，
标记除了表示一个段落外，文字的字号变成18像素大小，并向右倾斜。并且，同一页面中所有＜ｐ＞标记的地方都会受到影响，变成相同的样式。
由此看来，标记选择器的定义格式为：
标记名{样式}
所有的HTML标记符号都可以作为标记选择器。
例7-1 HTML标记选择器
标记选择器
HTML标记选择器
标记选择器会影响到整个文档
v
效果如图7-1。
图7-1 标记选择器
本例中可见，页面中
标记中的文字不再是原来的1号标题字大小，而是变成了36像素大小、华文楷体，并且是红色的文字。
要注意一点，标记选择器的标记名不可随便起，必须是HTML中已有的标记名，或者说，只能在已有的HTML标记中选择标记选择器。
4.2.1.2类选择器：
上一节讲的标记选择器一旦定义，会影响到整个网页。例如页面中所有的
标记中的文字都会变成红色、36像素大小、华文楷体。那么，如果我们希望其中的某个标记中的文字不是红色而是蓝色，这时仅仅使用标记选择器就不够了，还需要引入类(class)选择器。
类选择器定义的格式如下：
.类名称 {样式}
注意：类选择器一定是以“.”开头，后面跟类名称。类的名称可以随便起，这一点不同于标记选择器。但名字的含义尽量和它的内容接近，这样见到了名字就大概了解了它的样式。
例7-2 页面中有3行文字，都使用
标记。但是每行文字的颜色不同，分别为红、绿、蓝色。代码如下：
类选择器1
类选择器2
类选择器3
运行效果如图7-1。
图7-2 类选择器
本例中定义了3个类选择器，.red、.green、.blue。.red 样式为红色、文字大小为18px；.green样式为绿色、文字大小为24px；.blue样式为蓝色、36px大小文字。这3种样式分别应用到3行
段落中。
7.2.1.3ID选择器：
如果在网页中使用id号来标识元素，则可以使用ID选择器来定位该元素。Id选择器的定义格式如下：
#id号{样式}
注意，id号必须是网页中有的，若无此id号，定义无效。
例7-3 网页内有3行文字，3个
标记的id号分别为hang1、hang2、hang3，实现与例6-2同样的效果。
ID选择器1
ID选择器2
ID选择器3
代码运行效果如图7-3。
图7-3 ID选择器
本例在3个
段落中分别定义了3个ID值id=“hang1”、id=“hang2”、id=“hang3”。然后，在HTML文档头部