1.3.1 CSS定义及引用
样式表的作用是告诉浏览器如何呈现文档，样式定义是CSS的基础。通常，CSS可以通过三种方式对页面中的元素进行样式定义：内嵌样式、内部样式和外联样式。
下面只简单介绍一下这三种样式定义在网页中的应用。
1.内嵌样式
在标记中直接使用style属性可以对该标记括起的内容应用样式来显示，例如：
<p style="font-family: '宋体';color:green;background-color:yellow;font-size:9px"></p>
使用style属性定义时，内容与值之间用冒号“:”分隔。用户可以定义多项内容，内容之间以分号“;”分隔。由于这种方式在XHTML标记内部引用样式，所以称为内嵌样式或内联样式。
注意：若要在XHTML文件中使用内嵌样式，必须在该文件的头部对整个文档进行单独的样式语言声明，例如：
<meta http-equiv="Content-type"content="text/css;charset=gb2312" />
由于内嵌样式将样式和要展示的内容混在一起，违背了使用样式表的初衷，所以建议尽量不要使用这种方式。
2.内部样式
所谓的内部样式，就是利用style标签来包含本页所需样式定义的代码。它虽然也是将表现样式的代码和组织内容的代码放在同一个页面中，但是由于其单独将表现样式的CSS代码放在style标签之内，故它与内嵌样式有着本质上的区别。
定义内部样式表的格式如下：
.类选择符{规则表}
其中，“类选择符”是引用的样式的类标记，“规则表”是由一个或多个样式属性组成的样式规则，各样式属性间用分号隔开，每个样式属性的定义格式为“样式名:值”。例如：
.style1{font-family:"黑体"; color:green; font-sizex:15px;}
其中，“font-family”表示字体，“color”表示字体颜色，“font-size”表示字体大小。样式表定义时使用<style>标记括起，放在<head>标记范围内，<style>标记内定义的前后可以加上注释符“<!--”、“-->”，它的作用是使不支持CSS的浏览器忽略样式表定义。<style>标记的type属性指明样式的类别，默认值为“text/css”，例如：
<head>
<style type="text/css">
<!--
.style1 {font-size: 20px; font-family: "黑体";}
-->
</style>
</head>
内部样式表主要使用标记的class属性来引用，只要将标记的class属性值设置为样式表中定义的类选择符即可，例如：
<div class="style1">内部样式表的引用</div> <input type="text"name="text"class="style1" />
利用类选择符和标记的class属性，可以使相同的标记使用不同的样式，或使不同的标记使用相同的样式。
【例1.9】内嵌样式与内部样式示例。
输入下列内容，以1_9css1.html作为文件名保存：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS示例</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.heiti {font-size: 20px; font-family: "黑体"; color:red;}
-->
</style>
</head>
<body>
<div>
<p style="font-family: '宋体';color:green;background-color:yellow;font-size:9px">内嵌样式</p>
</div>
<div class="heiti">内部样式</div>
<input type="text"name="text"class="heiti" />
</body>
</html>
运行文件，将显示如图1.21所示的页面。
图1.21 内嵌样式与内部样式
3.外联样式
无论是内嵌样式还是内部样式，都只能由当前的XHTML文档引用，这样一来，只有当前页面中的元素可以重用CSS代码，而其他页面则不能，这对于制作大型网站是极为不利的！因为大网站往往囊括了数量庞大的页面，且众多页面的显示风格是高度一致的，大型网站的这些特点对CSS代码重用提出了更高的要求，需要依靠外联样式。
外联样式表就是把样式存放在单独的CSS文件中。在XHTML中的<head>中采用<link>标记把CSS文件关联起来，例如：
<head> <meta … /> <link href="mystyle.css"type="text/css"rel="stylesheet"rev="stylesheet" /> </head>
其中，mystyle.css是定义的样式表文件，内容形如：
div{
width:300px; /*定义div元素的宽度为300像素*/
height:200px; /*定义div元素的高度为200像素*/
padding:6px;
border:#006600 2px solid;
font-size:16px;
color:#889900;
}
#sty1{
…
}
…
这样，被关联的XHTML中的div均采用该样式，也可以采用class属性引用其他样式。
引用样式文件的XHTML文档在头部用<link>标记链接CSS样式文件，<link>标记的属性主要有rel、href、type和media。rel属性用于定义链接的文件和XHTML文档之间的关系，通常取值为stylesheet；href属性指出CSS样式文件的位置和文件名；type属性指出样式的类别（通常取值为text/css）；media属性用于指定接受样式表的介质，默认值为screen（显示器），还可以是print（打印机）、projection（投影机）等。
【例1.10】XHTML文档链接CSS文件。
（1）定义独立的CSS样式文件
外联样式定义的内容一般放在一个独立的CSS样式文件中，本例取文件名为1_10style1.css，内容如下：
p {font-family: "宋体"; color: green; background-color: yellow; font-size: 12pt; }
h1,h2 {font-family: "隶书", "宋体"; color:#ff8800}
.heti {font-family: "黑体"; font-size: 20pt; color: #000000; }
#id1 {color: blue; }
注意：文件不包含<style>标记，因为<style>是html标记而非css样式。
（2）编辑XHTML文档，链接CSS文件
输入下列内容，以1_10css2.html作为文件名保存：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>链接外部css文件</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="1_10style1.css" media="screen">
</head>
<body topmargin=4>
<h1>内容h1样式显示</h1>
<h2>内容h2样式显示</h2>
<h3 id="id1">内容id1样式显示</h3>
<h4>h4内容默认样式显示</h4>
<p>内容p样式显示</p>
<p class="heti">内容heti样式显示</p>
</body>
</html>
用浏览器打开文档，将显示如图1.22所示的页面。
图1.22 链接CSS文件
细心的读者会注意到本例文件1_10style1.css中p{}、h1,h2{}、#id1{}的用法与前述“.类选择符{规则表}”的格式略有差异，下面的1.3.2节将对此详加说明。