2.6　引用CSS样式文件

本节介绍引用CSS（层叠样式表）文件的用法，看一看如何在HTML网页头部定义CSS样式文件。

2.6.1　概述

CSS是英文名称Cascading Style Sheets的缩写，一般中文翻译为“层叠样式表”，是一种用来表现HTML网页样式的软件技术。

CSS最初是作为W3C的一项标准推出的，从CSS 1.0版本开始，期间经过CSS 2和CSS 2.1版本的不断完善，目前的CSS3版本已经被广泛认可并使用。事实上，CSS已经成为一种事实上的Web设计标准。

2.6.2　功能用法

使用CSS语言设计网页的优点是能够真正做到将网页内容与表现形式进行分离，这样设计人员的分工更为细化，工作效率也会明显提高。

具体来说，CSS语言能够支持几乎全部字体风格与字号大小，能够对网页中的对象位置进行像素级别的精确定位，能够对网页对象的样式进行动态编辑，能够进行简单的人机交互设计，是目前基于网页内容展示最优秀的表现类设计语言。

在HTML网页上使用CSS语言的方法基本有三种形式，分别为外链式、嵌入式和内联式，下面具体介绍。

1．外链式（Linking）

所谓外链式就是将外部CSS样式表文件链接到HTML网页中。一般如果页面需要很多样式的时候，外链式CSS是最合理的选择，使用外链式CSS可以通过修改一个CSS文件来改变整个页面或网站的样式风格。外链式CSS的基本使用方法如下：

2．嵌入式（Embedding）

所谓嵌入式就是在网页上创建嵌入的样式表。一般如果单个页面需要定制样式时，嵌入式CSS是很好的方法。设计人员可以在HTML网页头部通过<style>标签定义嵌入式CSS。嵌入式CSS的基本使用方法如下：

3．内联式（Inline）

所谓内联式就是在单个页面元素中加入样式表。只有当页面中的个别元素需要单独的样式时，才推荐使用内联式CSS。内联式CSS的基本使用方法如下：

另外，目前应用CSS样式表最为推荐的方式是DIV+CSS布局方式。原因很容易理解，页面结构越简单、通过修改CSS改变页面风格也就越容易。对于大型站点来说，倘若页面中使用的标签元素种类繁多、结构复杂，那维护起来CSS简直就是一场灾难，可能需要手动修改很多页面。而如果整个站点都使用DIV+CSS进行布局，可能仅仅需要修改CSS样式表中的一段代码就可以完成对整个站点页面风格的修改。

2.6.3　简单示例

下面看一段使用CSS样式表创建HTML网页的简单示例代码（参见源代码ch02/ch02-html-css.html文件）。

【代码2-7】

【代码解析】

第04行代码通过link标签元素引用了一个外部CSS样式文件（文件名称style.css），该CSS样式文件的代码见下面的【代码2-8】。

第07～08行代码定义了<body>标签元素的样式，但此处没有定义具体的样式代码，留在【代码2-8】中进行了定义。

第10～14行代码定义了<h1>标签元素的样式，具体包括了外边距、内边距和字体的样式。

第16～19行代码定义了<div>标签元素的样式，具体包括了外边距和内边距的样式。

第21～25行代码定义了<h3>标签元素的样式，具体包括了外边距、内边距和字体的样式。

第27～31行代码定义了<p>标签元素的样式，具体包括了外边距、内边距和字体的样式。

下面是【代码2-8】中定义的CSS样式（参见源代码目录ch02/css/style.css文件）。

【代码2-8】

【代码2-8】的CSS代码中，主要定义了<body>标签元素的外边距数值，其实也就是页面边距的尺寸大小。

运行测试网页，效果如图2.12所示。

图2.12　CSS样式表

上一章目录下一章