1.4 初识CSS
CSS（层叠样式表）用来规定HTML文档的呈现形式和格式编排，本节会向读者简要介绍CSS。此部分不是我们开发的重点，讲解如何创建和应用CSS样式等以为将来的开发打下基础。把样式添加到HTML中是为了解决内容与表现分离的问题。
HTML标签原本被设计用于定义文档内容，同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于HTML标签与属性不断被添加到HTML的规范中，创建文档内容使其清晰地独立于文档表现层的站点会变得越来越困难，所以W3C在HTML 4.0之外创造出样式。
1.4.1 CSS简介
样式表定义如何显示HTML元素，样式通常保存在外部的．CSS文件中。通过编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于它允许同时控制多重页面的样式和布局，所以CSS可以称得上Web设计领域的一个突破。
作为开发者可以为每个元素定义好样式，并将其应用到不同的页面中。也可以进行全局布置，只需要简单地改变样式，然后网站中的所有元素均会自动更新。这样的工作方式大大减少了开发时间，提高了开发效率。
h1 {color:red; font-size:14px; }
上述代码为CSS的基本定义，并且代码中定义了多种样式信息。样式规定可以在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中，甚至可以在同一个HTML文档内部引用多个外部样式表。
注意
一般而言，所有样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高优先权。
1．浏览器默认设置。
2．外部样式表。
3．内部样式表（位于<head>标签内部）。
4．内联样式（在HTML元素内部）。
内联样式（在HTML元素内部）拥有最高优先权，这意味着它将优先于以下的样式声明：<head>标签中的样式声明，外部样式表中的样式声明，浏览器中的样式声明（默认值）。
1.4.2 CSS基础语法
CSS规则由两个主要的部分构成，分别是选择器和一条或多条声明。选择器通常是需要改变样式的HTML元素，每条声明由一个属性与一个值构成，如果有多条属性即有多条声明，那么就用分号分开。声明中的属性为我们需要改变的样式属性，在下面的小节中我们会重点讲述它们。
声明样式时需要用大括号（花括号）包围声明，我们来看一下图1-16，所示代码为上一节介绍的那行代码，以此为例我们来看一下选择器部分为h1元素并且后面花括号中为两条声明，它们分别包含着属性与各自需要的值。
图1-16 CSS样式表声明
如果要定义多个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，平时有经验的人都会在每条声明的末尾加上分号，这样的好处是，当从现有的规则中增减声明时，会尽可能地减少出错的可能性。
由于大多数样式表中不止有一条声明，所以在编辑时适时使用空格会使样式表更容易编辑。是否包含空格不会影响CSS在浏览器中的工作效果，但是加上空格后不论是自己还是其他人都会比较容易理解代码的结构。
h1, h2, h3, h4, h5, h6 { color: green; }
上述代码演示的为选择器的分组，在开发过程常会遇到多个选择器需要的样式是一样的，此时我们便会像上述代码一样编写而不是每个选择器写一遍。用逗号将选择器分开，这样这些选择器便会享有同样的声明。
在CSS中子元素继承父元素的属性，但是它并不总按照此方式工作。我们来看一下下面一行代码，根据继承原则来看，站点的body元素将使用Verdana字体。通过继承规则所有的子元素都会继承父元素（body）的属性，事实上也是这么回事。
body {font-family: Verdana, sans-serif; }
在浏览器大战的年代里，这种情况则未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4就不支持继承，它不仅忽略继承，而且也忽略应用于body元素的规则。从IE/Windows直到IE6还存在相关的问题，表格内的字体样式会被忽略。
那么此时我们该怎么办呢？幸运的是，可以使用名为"Be Kind to Netscape 4"的冗余法则来处理旧式浏览器无法理解的继承问题。IE4浏览器无法理解继承，不过它们可以理解组选择器。这么做虽然会浪费一些用户的带宽，但是如果需要对Netscape 4用户进行支持，就不必这么做。
1 body {font-family: Verdana, sans-serif; }
2 p, td, ul, ol, li, dl, dt, dd {font-family: Verdana, sans-serif; }
如果希望父元素中的某些元素不继承父类的属性，这时也可以像上述代码一样在声明完body元素的样式以后，单独声明一下与父类元素不同的元素样式，这样也就巧妙地避开了所有的子元素都必须继承父元素的问题。
1.4.3 如何插入样式表
当读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有3种，外部样式表、内部样式表、内联样式。
当样式需要应用于很多页面时，外部样式表为首选。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部。下面代码就是如何引入外部样式表的示例。
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
浏览器会从文件mystyle.css中读到样式声明，并根据它来格式化文档。外部样式表可以在任何文本编辑器中进行编辑，文件不能包含任何的html标签，样式表应该以．css扩展名进行保存。下面是一个样式表文件的例子。
1 hr {color: sienna; }
2 p {margin-left: 20px; }
3 body {background-image: url("images/back40.gif"); }
上述内容为一个简单的外部样式表文件，该文件以．css扩展名结尾。在编写这部分文件时需要注意，不要在属性值与单位之间留有空格。例如使用“margin-left: 20 px”而不是“margin-left:20px”，它仅在IE 6中有效，但是在Firefox或Netscape中却无法正常工作。
有时候会遇到单独的某个界面需要特殊的样式，这时候外部样式表不再方便，我们会用其他的方法代替外部样式表，它就是内部样式表。内部样式表中使用<style>标签在文档头部定义内部样式表，其用法与其余标签并无多大差别，我们来看一下下面这个例子。
1 <html><head>
2 <style type="text/css">
3 h1 {color: red}
4 p {color: blue}
5 </style></head>
6 <body><h1>header 1</h1>
7 <p>A paragraph.</p>
8 </body></html>
说明
本段代码单纯表示了<style>标签的用法，在style中，可以规定在浏览器中如何呈现HTML文档。type属性是必需的，它定义style元素的内容。唯一可能的值是"text/css"。style元素位于head部分中。
除了上述两种插入样式表的方法外，还有内联样式，由于要将表现和内容混杂在一起，所以内联样式会损失掉样式表的许多优势。请慎用这种方法，要想使用内联样式，你需要在相关的标签内使用样式的style属性。style属性可以包含任何CSS属性。
1 <p style="color: sienna; margin-left: 20px">
2 This is a paragraph</p>
上述代码展示了如何改变段落的颜色和左外边距，在段落标签中使用了<style>属性。使用<style>属性比起前两种方法来说，当页面需要的样式比较多时，这会相当麻烦，这便损失了样式表的优势。
1.4.4 使用CSS样式
本节我们会就CSS的某些样式（比如背景、文本、字体、链接等）来详细讲解其用法，会有翔实的代码与运行效果图来帮助我们理解这些样式。本节介绍的都是CSS的基础样式，许多CSS的高级应用我们并没有讲述由于篇幅限制，有兴趣读者可以自己查找资料学习。
1．CSS背景应用
CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS在这方面的能力远在HTML之上。本节在应用各种背景案例时也会将CSS背景的属性介绍给大家，读者在学习的同时也应注意这方面内容。
图1-17所示为CSS背景属性应用。本案例中的背景图片是放置在中间并且当滚动条被拖动时背景图片不会改变位置，始终在center位置。本部分内容除了书中讲述的以外，读者还需注意代码内容，段落标签与注释中的很多内容说明了该属性的注意事项，现在看一下案例的开发过程。
图1-17 Sample1_15背景属性应用案例效果
代码位置：随书源代码/第1章目录下的HTML5/Sample1_15.html。
1 <! DOCTYPE html>
2 <html><head><title>Sample1_15</title>
3 <style type="text/css">
4 body {background-image:url(pic/background1.png);
5 background-repeat: no-repeat;
6 background-attachment:fixed;
7 background-position:center; }
8 <! --背景图片的重复方式，此时为在不设置重复方式。x为在水平方向上重复，
9 不加x或者y时为水平方向与垂直方向上都重复。no-repeat为不重复只显示一张图片。
10 attachment属性设置为fixed才能保证position属性在Firefox与Opera中正常工作。
11 对于设置位置，除了规定的几个值之外，我们还可以自定%与像素值，并用两个百分数
12 代替center。-->
13 h1 {background-color: #00ff00}
14 h2 {background-color: transparent}
15 p.no1{background-color: rgb(250,0,255)}
16 p.no2 {background-color: gray; padding: 20px; }
17 span.highlight{
18 background-color:blue}
19 <! --background-color后跟的颜色值为设置的背景颜色，因为本例设置了背
20 景图片，所以就没有设置背景颜色，若想设置主体的背景颜色，则直接将
21 background-image改为color即可。若想在具体的某些元素中应用背景，那么直接在
22 样式表中相应元素的位置下设置background color或者image即可，这里演示了设置背景颜色
23 的方式，背景图片与其类似，不再演示。-->
24 </style></head>
25 <body>
26 <h1>这是标题 1</h1><h2>这是标题 2</h2>
27 <p class="no1">这是段落</p>
28 <p class="no2">这个段落设置了内边距。</p>
29 <p><span class="highlight">这是文本。</span> 这是文本。 这是文本。 这是文本。
30 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。
31 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。
32 <span class="highlight">这是文本。</span></p>
33 <p>如此编写代码是为了演示在这样设置背景图片时，图像不会随页面的其余部分滚动。</p>
34 <p>我们除了可以在style部分逐条设置属性之外，还可以这样设置，其与上面那样设置效果一样，</br>
35 但是不容易分辨。background: #ff0000 url(pic/background1.png) no-repeat fixed center</p>
36 <p>现在介绍一下CSS背景中的属性：</p>
37 <p>background为简写属性，其作用是将背景属性设置在一个声明中。</p>
38 <p>background-attachment为背景图片是否固定或随页面其余部分移动，</br>
39 除了上面的fixed之外还有scroll，它为默认值图像会随着页面移动。
40 inherit规定从父元素继承本属性的设置。</p>
41 <p>background-color设置背景颜色</p>
42 <p>background-image设置背景图片</p>
43 <p>background-position设置图片的起始位置</p>
44 <p>设置起始位置的值，不论用固定的几个值还是自定义的%或者像素</p>
45 <p>都为两个值，如果只规定了一个值那么第二个值默认会为50%或者center</p>
46 <p>top、bottom、center会与left、right、center搭配。</p>
47 <p>background-repeat设置背景图片的重复方式</p>
48 <p>其值有no-repeat（不重复）, repeat-x（水平方向重复）</p>
49 <p>repeat-y（垂直方向重复）, repeat（水平方向与垂直方向都重复）默认值</p>
50 <p>inherit为继承父元素本属性的值。</p>
51 <p>图像不会随页面的其余部分滚动。</p>
52 ……//此处省略一些同类代码，读者可以自行查阅随书源代码。
53 </body></html>
❑ 第4～12行为设置背景图片的各个属性的样式表，在一般开发中如果不设置重复方式，则默认重复方式为纵向与横向重复，如果不设置background-attachment属性，那么在一些浏览器中position无法工作。
❑ 第13～24行为给页面中的文本标签设置的样式表。一般情况下背景图片与背景颜色可以互相顶替。由于现在的页面越来越精美，所以图片的应用越来越多，但是背景颜色也是不可或缺的一部分，在日后的开发中读者应该根据需求来选择。
❑ 第25～40行为前面设置的样式表的相应文本标签的应用。在此部分中设置了class值，读者可以根据相应的class值来对应样式表来学习样式表的开发。CSS部分的代码主要在上面的部分，body中的标签应用我们在之前已经讲过。
❑ 第41～53行主要讲述了设置位置的方法。一般在HTML开发中涉及位置的应用时都会有用像素设置或者用百分数设置，两种方式都可以，百分数设置可以使位置更加形象以让开发者改变。
CSS背景应用基础属性的讲解到这里已经结束，虽然案例中的讲述十分简单，但是我们可以看到页面背景的一大部分。结合本节所学用的一些技巧，我们可以开发出很多精美的页面，读者学到这些基本内容后应该勤加练习才能掌握开发精美界面的技巧。
2．CSS文本应用
在日常浏览网页时不难发现，页面中的大部分内容是各种文本，所以文本的排版应用在HTML开发中占有很重要的地位。比起在每段文本标签中都加入文本样式，用统一的样式表来设置这些文本会更加简便。
图1-18所示为CSS文本案例应用效果，CSS文本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距，以及对齐文本、装饰文本和对文本进行缩进等。在本案例中这些属性全部应用了，现在来看一下开发过程。
图1-18 Sample1_16全局属性应用案例效果
代码位置：随书源代码/第1章目录下的HTML5/Sample1_16.html。
1 <! DOCTYPE html>
2 <html><head><title>Sample1_16</title>
3 <style type="text/css">
4 body {color:red}
5 h1 {color:#00ff00}
6 p.ex {color:rgb(0,0,255)}
7 h2 {letter-spacing: -0.5em}
8 h4 {letter-spacing: 20px}
9 p.small {line-height: 90%}
10 p.big {line-height: 200%}
11 p.small1{line-height: 0.5}
12 p.big1{line-height: 2}
13 h3 {text-align: center}
14 h5 {text-align: left}
15 h6 {text-align: right}
16 p.a{text-decoration: overline}
17 p.b{text-decoration: line-through}
18 p.c{text-decoration: underline}
19 p.d{text-decoration: blink}
20 p.e{text-indent: 1cm}
21 p.s{word-spacing: 90px; }
22 p.t{word-spacing: -0.5em; }
23 </style></head>
24 <body>
25 <h1>这是标题1</h1>
26 <p>这是一段普通的段落。请注意，该段落的文本颜色是红色的。在body
27 选择器中定义了本页面默认的文本颜色。</p>
28 <p class="ex">该段落定义class的值为ex。所以该段落中的文本是蓝色的。</p>
29 <p>下面为设置字符之间的间距与行间距：</p>
30 <h2>这里为标题2</h2><h4>这里为标题4</h4>
31 <p>这是拥有标准行高的段落。</br>
32 在大多数浏览器中默认行高是110%～120%。</br></p>
33 <p class="small">这个段落拥有更小的行高。</br>这个段落拥有更小的行高。</p>
34 <p class="big">这个段落拥有更大的行高。</br>这个段落拥有更大的行高。</p>
35 <p>现在的行高是像素规定的，这是拥有标准行高的段落。</br>默认行高大约是1。</p>
36 <p class="small1">这个段落拥有更小的行高。</br>这个段落拥有更小的行高。</p>
37 <p class="big1">这个段落拥有更大的行高。</br>这个段落拥有更大的行高。</p>
38 <p>接下来演示如何对齐文本：</p>
39 <h3>这是标题 3</h3><h5>这是标题 5</h5><h6>这是标题 6</h6>
40 <p class="a">这里的文本修饰是overline</p>
41 <p class="b">这里的文本修饰是line-through</p>
42 <p class="c">这里的文本修饰是underline</p>
43 <p class="d">这里的文本修饰是blink</p>
44 <p class="e">现在我们来看缩进文本，这里就是缩进文本示例。</p>
45 <p class="e">现在我们来看缩进文本，这里就是缩进文本示例。</p>
46 <p class="e">现在我们来看缩进文本，这里就是缩进文本示例。</p>
47 <p class="e">现在我们来看缩进文本，这里就是缩进文本示例。</p>
48 <p class="e">现在我们来看缩进文本，这里就是缩进文本示例。</p>
49 <p class="e">现在我们来看缩进文本，这里就是缩进文本示例。</p>
50 <p class="s">This is some text.</p><p class="t">This is some text.</p>
51 </body></html>
❑ 第4～23行为文本标签的样式表设置。样式表中各个属性已在相应的文本标签内容与注释中进行了介绍，并也有用法，本部分的样式表依然沿用了上个案例中的标签设置方法，即使用class属性来设置样式。
❑ 第25～35行为应用上面的样式表。由于body中设置的文本颜色为红色，所以本案例主体中的文本颜色都为红色，除非有特殊设置，即有的样式表用声明class值的方法改变了自己的样式。
❑ 第36～51行为行高属性、文本修饰、缩进文本属性的应用。在案例中使用两种方式来设置行高。读者对照着段落标签声明的class值去学习文本修饰即可，最后我们还演示了在增加单词之间的间距时应注意为单词之间添加空格。
页面中的文本是HTML开发中有多种变化的一部分。由于在开发时需要每部分文本设置不同的文本样式，所以本部分介绍的属性读者应该熟练掌握，并且勤加练习。在练习的时候可以更改不同的值以达到学以致用的目的。
3．CSS字体应用
上一节介绍了页面中文本样式表的设置方法，本节我们来细化这个问题。设置好文本样式后，我们来设置一下组成文本的字体样式，CSS字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
图1-19所示为CSS字体案例应用效果。在平时生活中我们会经常接触Word文档，在文档里面会经常设置字体的大小、类型、颜色、加粗、倾斜等一系列形式。这就是我们现在所讲述的问题，即如何开发CSS字体，现在来看一下开发代码。
图1-19 Sample1_17全局属性应用案例效果
代码位置：随书源代码/第1章目录下的HTML5/Sample1_17.html。
1 <! DOCTYPE html><html><head><title>Sample1_17</title>
2 <style type="text/css">
3 p.serif{font-family:"Times New Roman", Georgia, Serif}
4 p.sansserif{font-family:Arial, Verdana, Sans-serif}
5 p.normal {font-style:normal}
6 p.italic {font-style:italic}
7 p.oblique {font-style:oblique}
8 p.varnormal {font-variant: normal}
9 p.varsmall {font-variant: small-caps}
10 p.wenormal {font-weight: normal}
11 p.wethick {font-weight: bold}
12 p.wethicker {font-weight: 900}
13 h1.px {font-size:60px; }
14 h2.px {font-size:40px; }
15 p.px {font-size:14px; }
16 h1.em {font-size:3.75em; }h2.em {font-size:2.5em; }
17 p.em {font-size:0.875em; }</style></head>
18 <body>
19 <p>现在演示的是指定字体系列：</p>
20 <p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
21 <p class="sansserif">This is a paragraph, shown in the Arial font.</p>
22 <! --建议在所有font-family 规则中都提供一个通用字体系列，这样就提供了一个候选
23 在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。需要
24 注意的是，只有当字体名中有一个或多个空格（比如New York），或者字体名包括
25 # 或 $ 之类的符号，才需要在font-family声明中加引号。-->
26 <p>现在来看一下font-style属性，该属性最常用于规定斜体文本。</p>
27 <p class="normal">本段示例规定为font-style属性中的normal值。</p>
28 <p class="italic">本段示例规定为font-style属性中的italic值。</p>
29 <p class="oblique">本段示例规定为font-style属性中的oblique值。</p>
30 <! --font-style的值为上面演示的3个，斜体（italic）是一种简单的字体风格，
31 它对每个字母结构有一些小改动以反映变化的外观。与此不同，倾斜（oblique）
32 文本则是正常竖直文本的一个倾斜版本。在浏览器中我们看到两者没有差别。-->
33 <p>这里演示的是font-variant属性，该属性可以设定大小写字母。</p>
34 <p class="varnormal">This is a paragraph</p>
35 <p class="varsmall">This is a paragraph</p>
36 <p>现在来看一下字体加粗属性font-weight:</p>
37 <p class="wenormal">This is a paragraph</p>
38 <p class="wethick">This is a paragraph</p>
39 <p class="wethicker">This is a paragraph</p>
40 <! --100 ~ 900为字体指定了9级加粗度，100对应最细的字体变形，900对应
41 最粗的字体变形。数字400等价于normal，而700等价于bold。-->
42 <p>现在来演示一下如何设置字体大小：</p>
43 <h1 class="px">这是标题1，用像素设置字体大小</h1>
44 <h2 class="px">这是标题2，用像素设置字体大小</h2>
45 <p class="px">这是一个段落，用像素设置字体大小</p>
46 <! --有管理文本大小的能力在Web设计领域很重要。但是，不应当通过调整文
47 本大小使段落看上去像标题，或者使标题看上去像段落。请始终使用正确的HTML
48 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。如果没有规
49 定字体大小，则普通文本（比如段落）的默认大小是16像素-->
50 <p>现在来看一下用em来设置字体大小：</p>
51 <h1 class="em">这是标题1，用em设置字体大小</h1>
52 <h2 class="em">这是标题2，用em设置字体大小</h2>
53 <p class="em">这是一个段落，用em设置字体大小</p>
54 <! --16px=1em px表示像素。除了IE之外其余浏览器均可支持用像素
55 调整字体大小，但是为了在IE上也能调整W3C也推荐使用em尺寸单位。-->
56 </body></html>
❑ 第2～18行为样式表的声明。在CSS中，有两种不同类型的字体系列名称：通用字体系列（拥有相似外观的字体系统组合）和特定字体系列（具体的字体系列）。除了各种特定的字体系列外，CSS还定义了5种通用字体系列：Serif、Sans-serif、Monospace、Cursive、Fantasy字体。
❑ 第19～32行演示了指定字体与规定斜体文本。如果用户代理上没有安装指定字体，就只能使用用户代理默认的字体来显示本元素。除此之外可以选择一个候选字体，本案例就是这么操作的。斜体文本的区别在注释中已经介绍，这里便不在介绍了。
❑ 第33～56行为字体加粗与设置文本的字体大小。HTML中的粗度有9级，分别是100～900,100为最细粗度，900为最粗粗度，400等价于font-weight值中的normal,700等价于bold。在设置文本字体大小时W3C推荐使用em尺寸单位，因为有些浏览器不支持像素大小。
CSS字体样式表的本质就是通过font-family、size、stretch、style、variant、weight这些属性来设置字体的系列、尺寸、拉伸、字体风格、小型大写字体或者正常字体以显示文本、字体粗细。通过设置一系列的字体属性达到与文本样式表的匹配进而实现精美界面。
4．CSS链接与表格应用
本节为CSS部分的最后一节，将要讲述CSS链接与表格的属性应用。由于篇幅限制这里省略了列表属性的应用，尽管不是描述性文本中的任何内容都可以认为是列表，但是CSS中列表样式不太丰富而且应用比较简单，所以便没有介绍它。
图1-20所示为CSS链接和表格案例应用效果。介绍链接属性之前我们来介绍一下链接的4种状态：link、visited、hover、active，它们分别代表未访问的链接、用户已经访问、鼠标直接位于链接上方、链接被单击的时刻，现在来看一下开发过程。
图1-20 Sample1_18全局属性应用案例效果
代码位置：随书源代码/第1章目录下的HTML5/Sample1_18.html。
1 <! DOCTYPE html>
2 <html><head><title>Sample1_18</title>
3 <style type="text/css">
4 a:link {color:#FF0000; }<! --未被访问的链接-->
5 a:visited {color:#00FF00; }<! --已被访问的链接-->
6 a:hover {color:#FF00FF; }<! --鼠标移动到链接上-->
7 a:active {color:#0000FF; }<! --正在被单击的链接-->
8 a.one:link {color:#ff0000; }
9 a.one:visited {color:#0000ff; }
10 a.one:hover {font-size:150%; }
11 a.two:link {color:#ff0000; }
12 a.two:visited {color:#0000ff; }
13 a.two:hover {font-family:’微软雅黑’; }
14 #customers{
15 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
16 width:100%; border-collapse:collapse; }
17 #customers td, #customers th{
18 font-size:1em; border:1px solid #98bf21;
19 padding:3px 7px 2px 7px; }
20 #customers th {
21 font-size:1.1em; text-align:left; padding-top:5px;
22 padding-bottom:4px; background-color:#A7C942; color:#ffffff; }
23 #customers tr.alt td {
24 color:#000000; background-color:#EAF2D3; }
25 </style></head>
26 <body>
27 <p><b><a href="Sample1_1.html" target="_blank">
28 这是一个链接</a></b></p>
29 <! --为了使定义生效，a:hover必须位于a:link和a:visited之后，
30 a:active必须位于a:hover之后-->
31 <p>链接除了设置color之外还可以设置背景颜色，
32 就是在样式表中将color换为background-color。</p>
33 <p>除了基本改变链接的颜色外，还可以改变链接字体、尺寸等，
34 这些实现起来并不困难，用到的方法全是之前讲述过的：</p>
35 <p><b><a class="one" href="Sample1_1.html" target="_blank">
36 这个链接可以改变字体尺寸</a></b></p>
37 <p><b><a class="two" href="Sample1_1.html" target="_blank">
38 这个链接可以改变字体</a></b></p>
39 <p>现在介绍一下表格的样式表，首先制作一个精美的表格。</p>
40 <table id="customers"><tr>
41 <th>Company</th><th>Contact</th><th>Country</th></tr>
42 <tr><td>Apple</td><td>Steven Jobs</td><td>USA</td></tr>
43 <tr class="alt"><td>Baidu</td><td>Li YanHong</td><td>China</td></tr>
44 <tr><td>Google</td><td>Larry Page</td><td>USA</td></tr>
45 <tr class="alt"><td>Lenovo</td><td>Liu Chuanzhi</td><td>China</td></tr>
46 <tr><td>Microsoft</td><td>Bill Gates</td><td>USA</td></tr>
47 <tr class="alt"><td>Nokia</td><td>Stephen Elop</td><td>Finland</td></tr></table>
48 </body></html>
❑ 第4～24行声明了样式表。需要注意的是，在设置连接部分时为了使定义生效，a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后。读者需要自己体验一下4种链接方式的区别。
❑ 第27～38行为设置链接标签属性示例。我们在将鼠标移动到链接部分时会发现链接的字体大小、粗细、字体、颜色都会有不同程度的变化，这就是不同链接属性起到的作用。读者对应内容提示可以自行实验一下。
❑ 第39～48行制作了一个表格。通过声明表格的样式表我们在主体部分只构建了一个表格，但计算机通过样式表绘制出来的表格是一个全新的表格。这个表格的样式表属性用法比较全面而且会经常使用，所以在此介绍了。
在案例中只开发了一个表格，没有应用全部的表格属性，剩余的部分在之前讲述表格标签时已介绍过，但是应用到CSS时会有点差别。若有读者想了解这方面的知识，那么可以上网查询CSS表格应用属性，里面会有比较详细的介绍。
到此为止已将CSS介绍完毕，短短十几页的内容肯定不能将CSS的全部内容介绍完毕，但是已尽力将最常用与精髓部分进行介绍了。读者在应用时应该自己多查阅一些资料，勤加练习，多改一些内容，这样会学得更加充实。