使用样式表的方式
使用样式表的方法有四种：
- 链接外部样式表（link external stylesheet）
- 使用内部样式表（use internal stylesheet）
- 导入外部样式表（import external stylesheet）
- 使用行内样式表（use inline stylesheet）
链接外部样式表
当很多页面需要使用相同页面时，可以在这些页面的 <head> 标签中使用 <link> 标签链接到一个外部样式表（external stylesheet）文件。通过 <link> 标签链接的样式表不是 HTML 文档的一部分，却供 HTML 文档使用，改动这个引用的外部样式表文件即可改变整个站点的外观。
为了正确加载外部样式表，<link> 标签必须放在 <head> 标签中，不能放在其他元素中。但 Web 浏览器遇到 <link> 标签时会查找并加载指定的样式表，进而使用样式表渲染 HTML 文档。
当通过 <link> 标签链接外部样式表时，其 rel 属性指定所链接资源与当前文档的关系（relationship），这里一般为 stylesheet，其 type 属性值指定链接资源的 MIME 类型，这里固定为 text/css，href 属性值为外部样式表文件的路径，可以是当前网站中的相对路径，也可以是完整的绝对路径。这里还可以为 <link> 标签指定可选的 meida 属性，该属性值是一个或多个媒体描述符（media descriptor），指明媒体的类型和具有的功能，多个媒体描述符以逗号隔开。如下面的示例：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" media="screen,projection">
</head>
外部样式表文件是一个纯文本文件，其中仅包含了一系列样式规则（可能还有一些 CSS 注释），不能包含 HTML 标签，否则可能导致部分或全部样式失效。外部样式表文件应该以 .css 为扩展名进行保存。虽然文件扩展名不是必须的，但如果文件扩展名不以 .css 结尾，即使在 <link> 标签中把 type 属性值设置为 text/css，有些旧浏览器也不会将其识别为包含样式表的文件。
下面是一个样式表文件的例子：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("/images/back40.gif");}
注意：不要在属性值与单位之间留有空格。例如，在
margin-left: 20 px中，20 和 px 之间不要留有空格，正确的写法是margin-left: 20px。
当在某个 HTML 文档的 <head> 标签中使用多个 <link> 标签链接到多个外部样式表文件时，浏览器会加载指定的多个外部样式表，合并规则后再应用到文档上。
使用内部样式表
<style> 标签可以导入外部样式表文件，其 type 属性目前唯一可能的值是 text/css，在 HTML5 中，type 属性不再是必须的，默认值为 text/css。值 text/css 指示内容是标准的 CSS。开始和结束 style 标签之间的样式称为文档样式表（document stylesheet）或嵌入式样式表（embedded stylesheet）。
<style> 标签的 scoped 属性是 HTML5 为 <style> 标签新增的属性。如果使用该属性，则样式仅仅应用到 <style> 标签的父元素及其子元素，而不是整个文档。如果没有使用 <style> 标签的 scoped 属性，则每一个 <style> 标签必须位于 <head> 头部区域。
与 <link> 标签类似， <style> 标签也支持相同功能的 media 属性。
<style> 标签可以直接包含应用到文档的样式，也可以通过 @import 指令引入外部样式样式表。
当单个文档的整个页面需要特殊的样式时，可以将 CSS 放在 HTML 文件 <head> 标签里的 <style> 标签中。如下面的实例：
<head>
<style>
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
导入外部样式表
导入外部样式表的功能与链接外部样式表的功能差不多，只是语法上存在差别。导入外部样式表需要使用 @import 指令来执行导入。@import 指令语法如下：
@import url(样式表地址);
@import 样式表地址;
@import url(样式表地址) list-of-media-queries;
@import 样式表地址 list-of-media-queries;
-
url是一个表示要引入资源的绝对路径或相对路径，可以省略，因此，使用@import导入样式表只要指定样式表地址即可。该地址不需要指明一个文件，可以只指明包名，然后合适的文件会被自动选择（比如 chrome://communicator/skin/） - 媒体查询列表用于指定该样式表仅对某种显示设备有效。在没有任何媒体查询的情况下，导入是无条件的，与指定所有的媒体具有相同的效果。
-
@import指令可以看作整个样式表定义的一部分，且必须放在所有样式表的最前方（但是在任何@charset声明之后），否则遵守规范的用户代理会忽略放在样式规则后面的@import指令。 - 可以连续指定多个
@import指令。 -
@import指令既可以直接在样式表中使用，也可以在<style>标签中使用。
示例如下
<!-- 可以连续指定多个 @import 指令 -->
<style type="text/css">
/* @import 指令必须放在所有样式表的最前方 */
@import url(样式表地址1) list-of-media-queries;
@import url(样式表地址2);
@import url(样式表地址n);
h1 {color: gray;}
</style>
/* 直接在样式中使用 @import 指令 */
/* @import 指令必须放在所有样式表的最前方 */
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
h1 {color: gray;}
既然链接外部样式表与导入外部样式表的功能差不多，为何还要支持两种语法？这是因为以前的很多浏览器都不支持 @import 导入，因此一些 CSS 开发人员会把一些浏览器可能不支持的高级 CSS 属性放在外部样式表中导入，这样保证只有支持 @import 导入的浏览器才会导入这些高级 CSS 属性。但实际上，由于某些浏览器（例如经常提到的 Internet Explorer）会在导入外部样式表时导致“屏闪”。IE7 及更早浏览器不支持 @import 指定媒体类型和媒体查询。IE8 不支持 @import 指定媒体查询。因此开发者应该尽量避免使用 @import 导入外部样式表，而是应该尽量考虑使用链接外部样式表方式。使用 @import 影响页面性能的地方还体现在如下方面：
- 影响浏览器的并行下载；
- 多个
@import导致下载顺序紊乱。
使用行内样式表
行内（inline）样式，又叫内联样式，可以通过某个具体的 HTML 标签的 style 属性来定义仅对该 HTML 标签对象有效的样式。如下面的实例：
<p style="color:sienna; margin-left:20px">This is a paragraph.</p>
注意：由于要将表现和内容混杂在一起，行内样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
除 <body> 元素以外的所有 HTML 标签都可以设定 style 属性。
注意，style 属性的值只能是一系列规则声明，而不能包含整个样式表。因此，不能在 style 属性中使用 @import 指令，也不能有完整的规则。style 属性的值只能是样式规则花括号之间的那一部分。
一般来说，不建议使用内部 CSS 样式。这种内部 CSS 样式主要有以下劣势：
-
行内样式难以维护。无法通过集中式管理来更新，在需要更新时，必须修改文档的多处地方，不利于软件工程化管理。如果将不同类型的代码分开存放在不同的文档中，会让我们的工作更加清晰。
-
行内样式的写法将文档结构和文档表现混合起来了，这使得代码变得难以阅读和理解。
-
大量 CSS 嵌套在 HTML 文档中，必将导致 HTML 文档过大，大量的重复下载，导致网络负载加重。
但内部样式定义也并非一无是处，在某些地方，行内样式更常见，甚至更可取。如果想让某些 CSS 样式仅对某个页面有效，而不会影响整个站点，则应该选择使用内部 CSS 样式定义。如果您的工作环境确实很严格，也许网站内容管理系统仅允许您编辑 HTML 正文，则可能不得不使用它们。此外，行内样式很长时间被应用在 HTML 电子邮件中，以便与尽可能多的电子邮件客户端兼容。
网友评论