第四章CSS选择器题库.doc

第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选择器三种。 标记选择器： 在HTML网页中，使用HTML的标记本身作为定位选择器，称为标记选择器。HTML标记本来都有自己确定的样式（HTML样式），但在CSS中可以再给这些标记增加新的样式，当新增的样式和原有样式冲突时，以新定义样式为准。例如，p标记用来表示段落，除此以外并无其他意义。但如果我们定义如下CSS样式： p {font-size: 18px; font-style: italic;} 此时，p标记除了表示一个段落外，文字的字号变成18像素大小，并向右倾斜。并且，同一页面中所有＜ｐ＞标记的地方都会受到影响，变成相同的样式。 由此看来，标记选择器的定义格式为： 标记名{样式} 所有的HTML标记符号都可以作为标记选择器。 例7-1 HTML标记选择器 html head title标记选择器/title style type=text/css !-- h1 { font-family: 华文楷体; font-size: 36px; color: #FF0000; } p { font-family: 隶书; font-size: 24px; color: #0000FF; } -- /style /head body h1标记选择器/h1 pHTML标记选择器/p p标记选择器会影响到整个文档/p /body /htmlv 效果如图7-1。 图7-1 标记选择器 本例中可见，页面中h1标记中的文字不再是原来的1号标题字大小，而是变成了36像素大小、华文楷体，并且是红色的文字。 要注意一点，标记选择器的标记名不可