在前端网站的开发过程中，我们都是要用到css样式的，css样式可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。那么这些css样式的文件或者代码是如何导入到html中的？本章就给大家带来html中是如何引入CSS样式文件？以及link与@import的区别(代码实例)，让大家了解css样式是如何导入的，重点描述css样式文件的导入。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、HTML导入css样式的方法
HTML主要负责网页的内容展现，而CSS文件负责网页内容的样式，在HTML中使用css样式的方法有：行内式、内嵌式、外联式，
而外联式又分：链接式(link)和导入式(@import)。那么下面就给大家介绍一下：
1. 行内式----HTML标签中使用CSS
代码实例：行内式
行内式行内式行内式行内式行内式行内式行内式行内式行内式
效果图：
css引用的行内式也可称为内联式或者行级式，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。
2.内嵌式---将CSS内容通过style标签写在head标签中
代码实例：内嵌式
内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式
效果图：
链接式
链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式
css样式文件--style.css代码：p{
font-size: 20px;
color: #fff;
background-color: #70DBDB;
}
效果图：
代码实例：
HTML代码：导入式
导入式导入式导入式导入式导入式导入式导入式导入式导入式
效果图：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。
二、链接式(link)与导入式(@import)的区别link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；而@import属于CSS范畴，只能加载CSS；
link引用CSS时，在页面载入时同时加载；而@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；而@import是在CSS2.1提出的，低版本的浏览器不支持。
ink支持使用Javascript控制DOM去改变样式；而@import不支持。
@import可以在CSS文件中再次引入其他样式表；而link不支持。
