第3章 CSS技术基础 在实际开发中，HTML主要用来显示网页的内容，而网页样式的设计通常交由层叠样式表(Cascading Style Sheet，CSS)来负责。这样做的好处是使得内容与表现分离，便于对网站进行开发与维护，并能提高用户体验。本章主要介绍CSS技术的基础知识，读者重点需要掌握CSS选择器的用法以及如何使用DIV进行网页的布局。 3.1CSS的基本语法 CSS样式表是由若干条样式规则组成，每一条样式规则由三部分组成： 选择器(selector)、属性(property)和值(value)，基本语法如下： selector {property: value} selector的含义为指定选择网页中标签的方式，property表示选择器所指定标签包含的属性，value表示属性的值。例如，可以定义如下一个简单的样式表： p{ color: blue; font-size: 20px; } 其作用在网页中的简单流程为，先选择网页中所有的

标签，然后设置

标签中所有字体的颜色为蓝色，大小为20个像素。 样式规则必须放在一对大括号({})内，可以是一条或多条，属性和值之间用英文冒号(:)分开，每条规则以英文分号(;)结尾。 3.2在HTML中使用CSS 在HTML中引入CSS样式的方法有3种，分别为行内样式、内部样式表和外部样式表，下面分别介绍这3种方式的优缺点和应用场景。 3.2.1行内样式 行内样式是通过在HTML标签中添加style属性来引入CSS。 【例31】添加style属性创建页面31.html。

蓝色字体，大小20像素

绿色字体，大小15像素

图31应用行内样式 例31所示代码的显示效果如图31所示。 由于行内样式将CSS代码直接写在HTML中，不能使得内容与样式分离，因此在实际开发中应用的不多。但是，由于行内样式只对当前的HTML标签起作用，往往在特定的场景中使用。 3.2.2内部样式表 内部样式表就是将CSS代码写在HTML的标签中，与HTML内容位于同一个页面中。 【例32】利用内部样式表创建页面32.html。 内部样式

我是红色标题

3.2.3外部样式表 外部样式表就是将CSS代码保存为一个单独的文件，文件扩展名为.css。例如,可以在Web应用工程中创建out.css文件，该文件存放到css文件夹下，如图33所示。 图32应用内部样式表 图33创建外部样式表文件 在out.css中添加如下代码： p{ font-style: italic; } 【例33】利用外部样式表创建页面33.html。 外部样式表

应用了外部样式表的段落

其中，标签的属性ref=“stylesheet”指在页面中引用外部样式表，type=“text/css”是指链接文件的类型是样式表文本，href属性用来指定css文件所在的路径。上述代码通过引用外部样式表的方式为当前页面设置样式，该方式实现了样式和内容的彻底分离。一个外部样式表可以应用到多个页面。当改变这个外部样式表文件时，所在页面的样式会随之改变。这在制作具有大量相同风格的网站时非常有用。 3.2.43种方式的优先级 CSS名为层叠样式表的原因是允许同时给网页中的元素应用多个样式，页面元素的最终样式即为多个样式的叠加效果。由于相互叠加的样式可能引起冲突，因此首先需要了解样式的优先级。 【例34】利用层叠样式表创建页面34.html。 3种方式优先级

我是什么颜色？

并在out.css文件中添加如下代码： h1{ color: blue; } 例34所示代码分别给页面中的

标签分别应用了行内样式(设置标题为绿色)、内部样式表(设置标题为红色)和外部样式表(设置标题为蓝色)，该页面的

标签最终显示的字体为绿色，这是因为行内样式离该标签最近。又或者将例34所示代码的行内样式去掉，并将内部样式和外部样式交换位置，如例35所示。 【例35】创建页面35.html。 3种方式优先级

我是什么颜色？

这一次，由于

标签离外部样式表最近，因此为蓝色。一般来讲，CSS中设置样式优先级的方式为“就近原则”。 3.3CSS选择器 选择器是CSS中一个非常重要的概念，所有HTML样式都是通过不同的CSS选择器进行控制的。前面学过的选择器，如

、

等都是最简单的标签选择器，接下来介绍更多功能强大的选择器，以帮助我们方便、快速、准确地进行样式设计。 3.3.1基本选择器 CSS的基本选择器主要分为标签选择器、ID选择器和类选择器3种。 1. 标签选择器 每种HTML标签的名称都可以作为相应的标签选择器名称。例如，前面学过的h1选择器用于声明页面中所有

标签的样式风格，p选择器用于声明页面中所有

标签的样式风格。标签选择器可以同时为页面中多个相同标签指定样式。 2. 类选择器 页面中，元素的class属性可以为元素分组。例如下述代码将3个

标签分为一组。

我是属于title组

我是属于title组

我是属于title组

类选择器的作用便是声明同一组元素标签的样式。定义类选择器的方式是在class属性值的前面加一个句点“.”，例如下述代码定义了一个名为.title的样式。 .title{ font-size: 16px; color: #00509F; } 其中，定义的样式(字体大小和颜色)会作用于页面中所有class属性值为title的标签。 3. ID选择器 在页面中，元素的id属性用来唯一标识该元素。同样，ID选择器主要用来对某个特定元素定义样式。与类选择器不同的是，使用ID选择器定义样式时，必须在ID名称前加一个“#”号。 【例36】利用ID选择器创建页面36.html。 ID选择器

ID属性为WZU的段落

ID属性为ZJU的段落

例36所示代码为页面中id属性值为wzu的元素设置样式(字体设置成红色)。 3.3.2高级选择器 本节主要介绍CSS常用的高级选择器，如层次选择器、并集选择器和交集选择器。 1. 层次选择器 HTML中各元素间主要的层次关系包括后代、父子、相邻兄弟和一般兄弟等几种关系。这些关系被抽象为HTML的文档对象模型(Document Object Model，DOM)。下面首先通过一个示例来讲述什么是DOM。 【例37】创建页面37.html。 1 2 3

h1

p

上述代码对应的DOM模型如图34所示。其中1、2、3和