引入CSS样式表
要想使用CSS修饰网页，就需要在HTML文档中引入CSS样式表。CSS提供了四种引入方式，分别为行内式、内嵌式、外链式、导入式，具体介绍如下。
1. 行内式
行内式也被称为内联样式，是通过标签的style属性来设置标签的样式，其基本语法格式如下。
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
上述语法中，style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。属性和属性值的书写规范与CSS样式规则一样，行内式只对其所在的标签及嵌套在其中的子标签起作用。
通常CSS的书写位置是在<head>头部标签中，但是行内式却是写在<html>根标签中，例如下面的示例代码，即为行内式CSS样式的写法。
<h1 style="font-size:20px; color:blue;">使用CSS行内式修饰一级标题的字体大小和颜色</h1>在上述代码中，使用<h1>标签的style属性设置行内式CSS样式，用来修饰一级标题的字体大小和颜色。示例代码对应效果如图1所示。
图1 行内式效果展示
需要注意的是，行内式是通过标签的属性来控制样式的，这样并没有做到结构与样式分离，所以不推荐使用。
2. 内嵌式
内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中，并且用<style>标签定义，其基本语法格式如下。
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>上述语法中，<style>标签一般位于<title>标签之后，也可以把它放在HTML文档的任何地方。但是由于浏览器是从上到下解析代码的，把CSS代码放在头部有利于提前下载和解析，从而避免网页内容下载后没有样式修饰带来的尴尬。除此之外，需要设置type的属性值为“text/css”，这样浏览器才知道<style>标签包含的是CSS代码。在一些宽松的语法格式中，type属性可以省略。
内嵌式将结构与样式进行了不完全分离。由于内嵌式CSS样式只对其所在的HTML页面有效，因此仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，则不建议使用这种方式，因为内嵌式不能充分发挥CSS代码的重用优势。
3. 外链式
外链式也叫链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文档中，其基本语法格式如下。
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>上述语法中，<link />标签需要放在<head>头部标签中，并且必须指定<link />标签的三个属性，具体如下。
●href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
● type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。在一些宽松的语法格式中，type属性可以省略。
● rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
外链式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link />标签链接多个CSS样式表。在网页设计中，外链式是使用频率最高，也最实用的CSS样式表，因为它将HTML代码与CSS代码分离为两个或多个文件，实现了将结构和样式完全分离，使得网页的前期制作和后期维护都十分方便。
4. 导入式
导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用style标签，并在<style>标签内的开头处使用@import语句，即可导入外部样式表文件，其基本语法格式如下。
<style type="text/css" >
@import url(css文件路径);或 @import "css文件路径";
/* 在此还可以存放其他CSS样式*/
</style> 该语法中，style标签内还可以存放其他的内嵌样式，@import语句需要位于其他内嵌样式的上面。
虽然导入式和链入式功能基本相同，但是大多数网站都是采用链入式引入外部样式表的，主要原因是两者的加载时间和顺序不同。当一个页面被加载时，<link />标签引用的CSS样式表将同时被加载，而@import引用的CSS样式表会等到页面全部下载完后再被加载。因此，当用户的网速比较慢时，会先显示没有CSS修饰的网页，这样会造成不好的用户体验，所以大多数网站采用链入式。
隐藏目录
