CSS样式单可以控制HTML文档的显示。但在控制文档的显示之前，首先应在需要显示的HTML文档中导入CSS样式单。为了在HTML文档中使用CSS样式单，有如下3种使用样式单的方式。
使用CSS样式单的三种方式
➢ 链接外部样式文件：这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。在这种方式下，一批样式可控制多份文档。
➢ 使用内部样式定义：这种方式是通过在HTML文档头定义样式单部分来实现的。在这种方式下，每批CSS样式只控制一份文档。
➢ 使用内联样式：这种方式将样式内联定义到具体的HTML元素，通常用于精确控制一个HTML元素的表现。在这种方式下，每份CSS样式只控制单个HTML元素。
引入外部样式文件
HTML文档中使用<link.../>元素来引入外部样式文件，引入外部样式文件应在<head.../>元素中增加如下<link.../>子元素：
<link type="text/css" rel="stylesheet" href="CSS样式文件的URL"/>
在上面的语法格式中，type和rel表明该页面使用了CSS样式单，对于引入CSS样式单情形，这两个属性的值无须改变。href属性的值则指向CSS样式单文件的地址，此处的地址既可以是相对地址，也可以是互联网上的绝对地址。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 链接外部CSS样式单 </title>
<!-- 引入outer.css样式单文件 -->
<link href="outer.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<tr>
<td>疯狂Java讲义</td>
</tr>
<tr>
<td>轻量级Java EE企业开发实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
</tr>
</table>
</body>
</html>
上面页面中仅仅包含了一个简单的表格，并指定了表格宽度，没有其他任何显示格式。为了让该页面更富表现力，可以为该页面指定外部的CSS样式单文件，引入外部CSS样式单文档的语法格式见上面介绍。outer.css样式单文件的代码如下。
/* 设置整个表格的背景色 */
table {
background-color: #003366;
width: 400px;
}
/* 设置单元格的背景色、字体等*/
td {
background-color: #fff;
font-family: "楷体_GB2312";
font-size: 20pt;
text-shadow: -8px 6px 2px #333;
}
正如在上面CSS样式单文件中见到的，CSS样式单总是由一个或多个样式定义组成，每个样式通常有如下语法格式：
Selector {property: value}
其中Selector是应用样式的选择器，Selector决定对哪些HTML元素起作用；而花括号里的属性名、属性值则指定字体、大小、背景、颜色等，也就是决定对HTML元素起怎样的作用。
使用内部CSS样式
一般来说，我们不建议使用内部CSS样式，因为这种做法需要在HTML文档内嵌入CSS样式定义，这种内部CSS样式主要有三大劣势。
➢ 如果此CSS样式需要被其他HTML文档使用，那么这些CSS样式必须在其他HTML文档中重复定义。
➢ 大量CSS嵌套在HTML文档中，必将导致HTML文档过大，大量的重复下载，导致网络负载加重。
➢ 如果需要修改整站风格时，必须依次打开每个页面重复修改，不利于软件工程化管理。
但内部样式定义也并非一无是处，如果想让某些CSS样式仅对某个页面有效，而不会影响整个站点，则应该选择使用内部CSS样式定义，对于上面的HTML页面，可以使用内部CSS样式单。
内部CSS样式需要放在<style.../>元素中定义，每个CSS样式定义与外部CSS样式文件的内容完全相同。<style.../>元素应该放在<head.../>元素内，作为它的子元素。
使用内部CSS样式定义的语法格式如下：
<style type="text/css">
样式单文件定义
</style>
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 内部样式单 </title>
<style type="text/css">
table {
background-color: #003366;
}
td {
background-color: #FFFFFF;
font-family: "楷体_GB2312";
font-size: 20pt;
text-shadow: -8px 6px 2px #333;
}
.title {
font-size: 18px;
color: #60C;
height: 30px;
width: 200px;
border-top: 3px solid #CCCCCC;
border-left: 3px solid #CCCCCC;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;
}
</style>
</head>
<body>
<div class="title">
疯狂Java体系图书：
</div><hr />
<table>
<tr>
<td>疯狂Java讲义</td><td>轻量级Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Android讲义</td><td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td><td>疯狂XML讲义</td>
</tr>
</table>
</body>
</html>
使用内联样式
内联CSS样式只对单个标签有效，它甚至不会影响整个文件。内联样式定义可以精确控制某个HTML元素的外观表现，并且允许通过JavaScript动态修改XHTML元素的CSS样式，从而改变该元素的外观。
为了使用内联样式，CSS扩展了HTML元素，几乎所有的HTML元素都增加了一个style通用属性，该属性值是一个或多个CSS样式定义，多个CSS样式定义之间以英文逗号隔开。简单地说，使用内联样式定义时，style属性值就是由一个或多个property:value组成的，此处的property:value与前面CSS样式单文件中的完全相同。
定义内联CSS样式的语法格式如下：
style="property1: value1; proterty2: value2..."
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 内联CSS样式 </title>
</head>
<body>
<div style="font-size: 18px;
color: #60C;
height: 30px;
width: 200px;
border-top: 3px solid #CCCCCC;
border-left: 3px solid #CCCCCC;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;">
疯狂Java体系图书：
</div><hr />
<table style="background-color: #0099bb;">
<tr>
<td style="background-color: #FFFFFF;
font-family: '楷体_GB2312';
font-size: 20pt;
text-shadow: -8px 6px 2px #333;">疯狂Java讲义</td>
<td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td style="background-color: #FFFFFF;
font-family: '楷体_GB2312';
font-size: 20pt;
text-shadow: -8px 6px 2px #333;">轻量级Java EE企业应用实战</td>
<td>疯狂XML讲义</td>
</tr>
<tr>
<td style="background-color: #FFFFFF;
font-family: '楷体_GB2312';
font-size: 20pt;
text-shadow: -8px 6px 2px #333;">疯狂Ajax讲义</td>
<td>疯狂Workflow讲义</td>
</tr>
</table>
</body>
</html>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。