CSS三种引入方式：内联、页级、外联
1. 内联 CSS
内联 CSS 也可称为行内 CSS 或者行级 CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联 CSS 作为测试使用，可以查找代码中 bug。
1 <body> 2 <div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div> 3 </body>
2. 页级 CSS
页级 CSS 也可称为内部 CSS，整体是放在 head 标签里边的，在 style 标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。
1 <head> 2 <meta charset="utf-8" /> 3 <title>测试</title> 4 <style type="text/css"> 5 div { 6 width: 65px; 7 height: 20px; 8 border: 1px solid; 9 background: greenyellow; 10 } 11 </style> 12 </head>
3. 外联 CSS
外联 CSS 也可称为外部 CSS，在实际的项目中通常使用此种方式，它只在页面中使用 link 或者 @import 引入即可，可维护性好；并且外联 CSS 是一个单独的文件，可以作用于多个页面，在修改的时候可以针对性地修改某一块区域，达到多个页面样式同时变更，相较于内联 CSS 和页级 CSS，省去了到每个页面修改的步骤，提高了开发效率，同时一定程度提高了性能。
接下来具体说说 link 和 @import 的区别：
(1)link:<link rel="stylesheet" type="text/css" href="*.css" />
link 语法格式中，rel 指的是关联 (relation)，type 指的是类型，href 指的是链接文件路径。
link 的作用主要用来引入 CSS 和网页图标，指示告知搜索引擎，网页之间的关系等。
(2)@import:<style>@import url("*.css");</style>
@import 语法格式务必写在 style 标签中，后直接加文件路径即可。
@import 作用在 CSS 文件和页面中，可以在一个 CSS 文件中引入其他的 CSS 文件，例如在 index.css 文件中引入其他 CSS 文件的样式，整合在一起后，再在 index.html 中调用一次即可，在实际项目中经常使用，方便管理和维护。
(3) 二者加载顺序影响
HTML 加载过程：1) 加载 HTML-DOM 结构
2)CSS 和 JS
3) 图片和多媒体
4) 加载事件触发
link 和 @import 都没有放置顺序的要求，但是不同的放置位置可能会造成效果显示的差异。对于 link，无论放到哪个位置，都是一边加载数据，一边进行优化，视觉感受很好；而对于 @import，放置到哪里，才从哪里开始加载 CSS 样式，即先加载数据，然后加载样式，如果网速不佳，可能会造成只有数据出来，而样式一点点加载的效果。并且在同一个页面中，调用两种方式，link 永远比 @import 优先级高。
在项目中使用的时候，一般在页面中调用方式为 link，并且放在 head 标签中；使用 @import 除了在 CSS 文件中，在页面调用时，一般加载第三方的样式会使用到，并且需要放置在页面的底部，不会影响自己的网站。