1.内联CSS
内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。
1 <body> 2 <div style=" 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文件中，在页面调用时，一般加载第三方的样式会使用到，并且需要放置在页面的底部，不会影响自己的网站。