在前面的几个例子中，所有的 CSS 样式都是通过<style>标签放在 HTML 页面的<head>标 签中，但是在实际制作网页时，这种方式并不是唯一的，还有其他两种方式可应用 CSS 样式。
在 HTML 中引入 CSS 样式的方法有 3 种，分别是：
l 行内样式。
l 内部样式表。
l 外部样式表。
下面依次学习各种应用方式的优缺点及应用场景。
1．行内样式
行内样式就是在 HTML 标签中直接使用 style 属性设置 CSS 样式。style 属性提供了一种 改变所有 HTML 元素样式的通用方法，其用法如下。
<h1 style="color:red;">style 属性的应用</h1>
<p style="fontsize:14px; color:green;">直接在 HTML 标签中设置的样式</p>
这种使用 style 属性设置 CSS 样式的方法仅对当前的 HTML 标签起作用，并且要写在 HTML 标签中。
1 Chapter
行内样式法不能使内容与表现相分离，本质上没有体现出 CSS 的优势，因 此不推荐使用。
2．内部样式表
正如前面的所有示例一样，把 CSS 代码写在<head>的<style>标签中，与 HTML 内容位于 同一个 HTML 文件，这就是内部样式表。
这种方式方便在同页面中修改样式，但不利于在多页面间共享复用代码及维护，对内容 与样式的分离也不够彻底。实际开发时，会在页面开发结束后，将这些样式代码保存到单独的 CSS 文件中，将样式和内容彻底分离开，即下面介绍的外部样式表。
3．外部样式表
外部样式表是把 CSS 代码保存为一个单独的样式表文件，文件扩展名为.css，在页面中引 用外部样式表即可。HTML 文件引用外部样式表有两种方式，分别是链接式和导入式。
l 链接外部样式表
链接外部样式表就是在 HTML 页面中使用<link/>标签链接外部样式表，这个<link/>标签 必须放到页面的<head>标签内，语法如下。
其中，rel="stylesheet"是指在页面中使用这个外部样式表；type="text/css"是指文件的类型 为样式表文本；href="style.css"是文件所在的位置，style.css 是 CSS 样式表文件。
l 导入外部样式表
导入外部样式表就是在 HTML 网页中使用@import 导入外部样式表，导入样式表的语句 必须放在<style>标签中，而<style>标签必须放到页面的<head>标签内，语法如下。
<head lang="en">
……
其中@import 表示导入文件， 前面必须有一个@符号， url("style.css")表示样式表文件位置。
两种引用外部样式表的方式的本质相同，都是将一个独立的 CSS 样式表引用到 HTML 页 面中，但是它们还是有一些差别的，现在看一下两者的不同之处。
（1）<link/>标签属于 XHTML 范畴，而@import 是 CSS 2.1 中特有的。
（2）使用<link/>链接的 CSS 是客户端浏览网页时先将外部 CSS 文件加载到网页当中，
再进行编译显示， 所以这种情况下显示出来的网页与用户预期的效果一样， 即使网速再慢也是 一样的效果。
（3）使用@import 导入 CSS 文件，客户端在浏览网页时先将 HTML 结构呈现出来，再把
1 Chapter
外部 CSS 文件加载到网页当中，当然最终的效果也与使用<link/>链接文件的效果一样，只是 当网速较慢时会先显示没有 CSS 统一布局的 HTML 网页，这样就会给用户很不好的感觉。这 也是目前大多数网站采用链接外部样式表的主要原因。
（4）由于@import 是 CSS 2.1 中特有的，因此对于不兼容 CSS 2.1 的浏览器来说就是无 效的。
打开网页 index.html，显示页面不同的字体样式，如图 1.31 所示。
技能要点
l 新建 HTML 文件 index.html、样式表文件 style.css 文件。
l 设置标签选择器样式、类选择器样式、ID 选择器样式。
1 Chapter
l 在 index.html 中链接外部样式表 style.css。