第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和