1.3 定义CSS样式表为网页排版
一个网页仅有内容是不够的，还需要进行排版，使用户看起来更舒服。CSS样式表的目的就是为网页排版，美化网页。
1.3.1 CSS样式表概述
CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML网页样式的技术。CSS最初是作为W3C的一项标准推出的，从CSS 1版本开始，经过CSS 2版本的完善，目前的CSS 3版本已经被广泛使用，并成为一种事实上的设计标准。
使用CSS设计网页的优点是能够真正做到将网页内容与表现形式进行分离，这样设计人员的分工可以更为细化，工作效率也会明显提高。具体来说，CSS能够支持几乎全部字体风格与字号大小，能够对网页中的对象位置进行像素级别的精确定位，能够对网页对象的样式进行动态编辑，能够进行简单的人机交互设计，是目前基于网页内容展示最优秀的表现类设计语言。
在网页上使用CSS基本有3种形式，分别为外链式、嵌入式和内联式（可能不同教材上的名称有所区别），具体说明如下。
（1）外链式（Linking）：具体方法是将网页链接到外部样式表。一般页面需要很多样式的时候，外链式CSS是最合理的选择，使用外链式CSS可以通过修改一个CSS文件来改变整个页面或网站的样式风格。外链式CSS的基本使用方法如下：
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
（2）嵌入式（Embedding）：具体方法是在网页上创建嵌入的样式表。一般单个页面需要定制的样式时，嵌入式CSS是很好的方法，设计人员可以在HTML网页头部通过<style>标签定义嵌入式CSS。嵌入式CSS的基本使用方法如下：
<head>
<style type="text/css">
body {background-color: yellow}
p {margin: 32px}
</style>
</head>
（3）内联式（Inline）：具体方法是在单个页面元素中加入样式表。只有当页面中的个别元素需要单独的样式时，才推荐使用内联式CSS。内联式CSS的基本使用方法如下：
<p style="color:black; margin:16px"> This is a inline-css paragraph. </p>
HTML网页在解析CSS时是有优先级的，其顺序为：内联式CSS > 嵌入式CSS > 外联式CSS，因此设计CSS时要考虑优先级顺序，否则可能无法显示出预想的样式效果。
另外，目前应用CSS样式表推荐的方式是DIV+CSS布局方式，其原因很容易理解，页面结构越简单，通过修改CSS改变页面风格就越容易。对于大型站点来说，倘若页面中使用的标签种类繁多、结构复杂，维护CSS简直就是一场灾难，可能需要手动修改很多页面；而如果整个站点都使用DIV+CSS进行布局，可能仅仅需要修改CSS样式表中的一段代码就可以完成对整个站点页面风格的修改。
1.3.2 定义外链式CSS样式表
外链式CSS是大型站点首选的定义方式。下面我们使用外链式CSS方式创建一个页面，体会一下通过修改CSS文件中的几行代码就可以改变整个页面样式风格的效果。
下面是一个外链了两个CSS样式文件的简单HTML网页页面（参见源代码chapter01/ch01-htmlcomp-css-link.html文件）。
【示例1-9】外链式CSS样式表之HTML网页
01 <!DOCTYPE html> 02 <html lang="zh-cn"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <link rel="stylesheet" type="text/css" href="css/position.css" > 06 <link rel="stylesheet" type="text/css" href="css/font.css" > 07 <title>HTML之外链式CSS</title> 08 </head> 09 <body> 10 <!-- 添加文档主体内容 --> 11 <h1>HTML之外链式CSS</h1> 12 <div> 13 <h3>HTML之外链式CSS</h3> 14 <p>HTML之外链式CSS</p> 15 </div> 16 <!-- 添加文档主体内容 --> 17 </body> 18 </html>
在这段HTML代码中，第05行与第06行通过link标签引用了两个CSS样式文件，第一个样式文件（文件名称为position.css）用于定义定位、边距等样式，第二个样式文件（文件名称为font.css）用于定义字体大小、风格等样式。设计时将CSS样式按照不同的类别放置于不同的CSS样式文件中是比较合理的编程习惯，便于后期的修改与维护操作。
下面是第一个CSS样式文件（参见源代码chapter01/css/position.css文件），用于定义标签的定位、边距等样式。
【示例1-10】外链式CSS样式表之边距定义
01 /**
02 * CSS - position.css
03 */
04 body {
05 margin: 32px; /** 设置页面边距 */
06 }
07 /** h1 */
08 h1 {
09 margin: 16px; /** 设置外边距 */
10 padding: 8px; /** 设置内边距 */
11 }
12 /** div */
13 div {
14 margin: 32px; /** 设置外边距 */
15 padding: 2px; /** 设置内边距 */
16 }
17 /** h3 */
18 h3 {
19 margin: 8px; /** 设置外边距 */
20 padding: 4px; /** 设置内边距 */
21 }
22 /** p */
23 p {
24 margin: 4px; /** 设置外边距 */
25 padding: 2px; /** 设置内边距 */
26 }
在这段CSS代码中，主要使用CSS的margin属性和padding属性定义了标签的外边距与内边距数值。
下面是第二个CSS样式文件（参见源代码chapter01/css/font.css文件），用于定义文本字体等样式。
【示例1-11】外链式CSS样式表之字体定义
01 /**
02 * CSS - font.css
03 */
04 body {
05 font: normal 12px/1.0em arial,verdana; /** 设置页面字体 */
06 }
07 /** h1 */
08 h1 {
09 font: bold 24px/2.4em arial,verdana; /** 设置字体 */
10 letter-spacing: 2px; /** 设置字符间距 */
11 }
12 /** h3 */
13 h3 {
14 font: italic 18px/1.8em arial,verdana; /** 设置字体 */
15 letter-spacing: -0.2em; /** 设置字符间距 */
16 }
17 /** p */
18 p {
19 font: bold 12px/1.2em arial,verdana; /** 设置字体 */
20 letter-spacing: 16px; /** 设置字符间距 */
21 }
在这段CSS代码中，主要使用CSS的font属性和letter-spacing属性定义了字体样式与字符间距数值。
下面我们运行测试这个页面，效果如图1.14所示。我们看到了使用letter-spacing字符间距属性的效果，在第15行中定义了一个负值的字符间距，图1.14中的第二行文本被有效压缩了。
最后，我们向读者演示如何通过修改外链式CSS文件中的一行或几行达到改变页面整体风格的效果。我们在chapter01/css/font.css样式文件中的第05行后添加一行样式定义，具体如下：
text-decoration: underline; /** 设置字体下画线 */
重新刷新chapter01/ch01-htmlcomp-css-link.html页面文件，运行后的效果如图1.15所示。我们看到页面中的全部文本被添加了下画线，这是因为上面添加的样式代码作用于body标签，所以页面主体中的全部文本均会被添加该样式效果。
图1.14 外链式CSS样式表效果图（1）
图1.15 外链式CSS样式表效果图（2）
1.3.3 定义CSS样式style标签
外链式CSS固然是建设大型站点所推荐的定义样式方法，但如果仅仅需要在某个单独的页面加入一些特别的样式风格，那么使用style标签是相对快捷的方法，维护起来也比较方便，毕竟所定义的CSS样式代码仅仅对本页面的内容才有效。
下面是一个通过style标签定义CSS样式风格的HTML网页页面（参见源代码chapter01/ch01-htmlcomp-css-style.html文件）。
【示例1-12】 CSS样式style标签
01 <!DOCTYPE html>
02 <html lang="zh-cn">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <style type="text/css">
06 body {
07 margin: 32px; /** 设置页面边距 */
08 font: normal 12px/1.0em arial,verdana; /** 设置页面字体 */
09 text-decoration: underline; /** 设置字体下画线 */
10 }
11 /** h1 */
12 h1 {
13 margin: 16px; /** 设置外边距 */
14 padding: 8px; /** 设置内边距 */
15 font: bold 24px/2.4em arial,verdana; /** 设置字体 */
16 letter-spacing: 2px; /** 设置字符间距 */
17 }
18 /** div */
19 div {
20 margin: 32px; /** 设置外边距 */
21 padding: 2px; /** 设置内边距 */
22 }
23 /** h3 */
24 h3 {
25 margin: 8px; /** 设置外边距 */
26 padding: 4px; /** 设置内边距 */
27 font: italic 18px/1.8em arial,verdana; /** 设置字体 */
28 letter-spacing: -0.2em; /** 设置字符间距 */
29 }
30 /** p */
31 p {
32 margin: 4px; /** 设置外边距 */
33 padding: 2px; /** 设置内边距 */
34 font: bold 12px/1.2em arial,verdana; /** 设置字体 */
35 letter-spacing: 2px; /** 设置字符间距 */
36 }
37 </style>
38 <title>HTML之CSS样式style标签</title>
39 </head>
40 <body>
41 <!-- 添加文档主体内容 -->
42 <h1>HTML之CSS样式style标签</h1>
43 <div>
44 <h3>HTML之CSS样式style标签</h3>
45 <p>HTML之CSS样式style标签</p>
46 </div>
47 <!-- 添加文档主体内容 -->
48 </body>
49 </html>
在这段HTML代码中，第05～37行通过style标签定义了CSS样式代码，读者可以将这段样式代码与【示例1-10】和【示例1-11】的样式代码进行比较，会发现【示例1-12】将定位、边距等样式和字体大小、风格等样式合并在一起了，这是通过style标签定义样式代码的特点。因此，通过style标签定义样式代码只适合单个HTML网页页面的场景，这样在后期修改与维护操作时还是比较方便的，同时可以满足对单个页面定义特殊风格的CSS样式代码的需求。
下面我们运行测试这个页面，页面打开后的效果如图1.16所示。
图1.16 定义CSS样式style标签效果图
1.3.4 定义内联式CSS样式表
除了外链式CSS样式表和嵌入式CSS样式表外，还有一种常用的方式就是内联式CSS样式表。该方式非常适合在具体的标签内部加入一段很短的样式代码，是最为快捷方便的定义方法。但对于大型站点，内联式CSS维护起来是比较费时费力的，毕竟设计人员需要在HTML页面通篇代码中定位到具体的标签后才能修改其CSS样式代码。当然，目前流行的集成开发工具的功能都十分强大，可以协助设计人员快速定位，不过还是建议不要在大型站点的开发中大量使用内联式CSS样式表。
下面是一个使用内联式CSS定义样式代码的HTML网页页面（参见源代码chapter01/ch01-htmlcomp-css-inline.html文件）。
【示例1-13】内联式CSS样式表
01 <!DOCTYPE html>
02 <html lang="zh-cn">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>HTML之内联式CSS</title>
06 </head>
07 <body style="margin:32px;font:12px/1.0em arial,verdana;text-
decoration:underline;">
08 <!-- 添加文档主体内容 -->
09 <h1 style="margin:16px;padding:8px;font:bold 24px/2.4em
arial,verdana;">HTML之 内联式CSS</h1>
10 <div style="margin:32px;padding:2px;">
11 <h3 style="margin:8px;padding:4px;font:italic 18px/1.8em
arial,verdana;">HTML之内联式CSS</h3>
12 <p style="margin:4px;padding:2px;font:bold 12px/1.2em
arial,verdana;">HTML16 之内联式CSS</p>
13 </div>
14 <!-- 添加文档主体内容 -->
15 </body>
16 </html>
在这段HTML代码中，CSS样式代码是嵌入每一个具体的标签内部的。例如，第07行对body标签使用style属性定义了外边距、字体和下画线3个样式，第09、11和12行分别对h1、h3和p这3个标签使用style属性定义了外边距、内边距和字体3个样式，第10行对div标签使用style属性定义了外边距和内边距两个样式。
下面我们运行测试这个页面，打开后的效果如图1.17所示。
图1.17 内联式CSS样式表效果图
在图1.17中，我们看到定义的CSS样式效果全部显示出来了，再回过头去看【示例1-13】中的代码，由于在每一个标签中均加入了CSS样式代码，整段代码显得臃肿纷乱，远没有使用外链式CSS样式和style标签的CSS样式那样层次分明。可以想象，当HTML网页页面中包含成百上千个标签且样式风格极为复杂时，使用内联式CSS样式简直是一场灾难，维护的难度可想而知。因此，使用内联式CSS样式表时务必要简短精悍，只在最需要的时候使用该方式。