（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）
1.简介
说了这么久的html，大家都快以为这个系列是主讲html的了。好了，初步了解了你的身体构造，是时候学些拳脚功夫了。仗着硬胳膊硬腿当然能打人，但那不过是莽夫，css就是我们的武学招式，让我们的身体更灵活，招式更多变。
那么该如何引入css呢？主要有四种方法：
- 内联样式（标签内）
- 内部样式（style）
- 外部链接样式（link）—— 推荐的外部样式引入方法
- 导入样式（import）—— 不推荐的外部样式引入方法
2. 方法详解
2.1 内联样式
作用：为单个元素指定样式。
用法示例：
<div style="background-color: blue; width: 100px; height: 60px;">
</div>
特点：不会干扰其他元素的样式，但是缺乏灵活性，不推荐。
注意：一个元素内同时使用多个style，只能识别第一个style。
2.2 内部样式
作用：指定页面的样式。
用法示例：
<head>
<style type="text/css">
body {
background-color: blue;
}
</style>
</head>
特点：页面样式集中，不会影响其他页面样式。但是缺乏灵活性，出现网站整体样式修改时会非常麻烦。
2.3 外部链接样式
作用：为页面引入外部链接样式。
用法示例：
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
特点：最常用的样式引入方法。复用性强，便于管理，推荐使用。
2.4 外部导入样式
作用：为页面引入外部链接样式
用法示例：
<head>
<style type="text/css">
@import "style.css";
</style>
</head>
特点：不推荐使用。下面会讲到原因。
3. link和@import的区别
这个章节，参考了由link和@import的区别引发的CSS渲染杂谈，若要看详细解读，可以转自该篇文章。由于现在的章节是入门探讨，所以在此我不做深入分析。就像我开始说的，现在还是了解交通规则考驾照的时候，不要贪多去知道发动机是怎么工作的。
-
从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 -
加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。 -
兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。 -
DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。 -
权重区别(有争议，参考文章中有详细解读)
link引入的样式权重大于@import引入的样式。
建议：
- 在网页中不要使用@import
- 如果非要使用，不要同时使用@import和link
参考
引入CSS
CSS的四种引入方式
CSS的四种引入方式
由link和@import的区别引发的CSS渲染杂谈
don’t use @import | High Performance Web Sites
HTML_link与@import区别
网友评论