Appearance
样式引入
html 结构和 css 样式既然是分离的，那就是两个独立的文件，我们需要想办法将他们结合到一起，那么怎样将两者结合到一起呢？
行内式
将 css 属性名和属性值通过 style 这个标签属性直接写在 html 标签中的形式，就是行内样式。例如
html
<p style="width: 100px;height: 100px;background-color: red;"></p>
// 这段代码是描述一个宽度高度为 100 像素，背景颜色是红色的一个 p 标签。
1
2
2
内嵌式（嵌入式）
使用 style 标签将 css 属性名和属性值引入到 html 页面中，通常 style 标签放置在 head 标签中。为什么 css 样式要放置在 head 标签中呢，因为代码从上到下执行，如果先加载结构，那么用户看到的就将是干巴巴的内容，而没有通过美化，而先加载样式后加载结构，就相当于孩子出生就是穿着衣服的。
html
<head>
<style type="text/css">
p{ width: 100px; height: 100px; background-color: red; }
</style>
</head>
// 这段代码也是描述一个宽度高度为100像素，背景颜色是红色的一个p标签，只不过是通过内嵌式的方法引入。
1
2
3
4
5
6
2
3
4
5
6
外联式（外链式）
通过 link 标签，将一个单独的 css 文件引入到这个 html 文件中，也是要放置在 head 标签中。
html
<link rel="stylesheet" type="text/css" href="../css/prism.js"/>
1
- rel="stylesheet" 描述了当前页面与 href 所指定文档的关系。即说明的是，href 连接的文档是一个新式表。
- type="text/css" 是指定 MIME 类型，也就是 css 文档。
- href="css/prism.js" 规定被链接文档的位置。
导入式
通过 @import 引用外部 css 文件，但需要写入 css 文件或 style 标签中。
link 和 @import 的区别
- link 是 html 标签，@import 完全是 css 提供的方式，要写在 css 文件或者 style 标签中。
- 他们的加载顺序也是有区别的，当一个页面被夹在的时候，link 引用的 css 文件会被同时加载，而 @import 引入的 css 文件会等页面全部下载完后再加载。
- 兼容性的差别。由于 @import 是 CSS2.1 提出的所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。
- 当使用 javascript 控制 DOM 去改变 css 样式的时候，只能使用 link 标签，因为 import 是不能被 DOM 控制的。