引入css样式的三种方法 link style @import及三者的区别

通常我们想引入css样式，有很多方法，这令刚做项目时的我感到困惑。通过自己的查询，终于得到了答案，在此记个笔记，与前端小伙伴们分享一下。

让我们一起来看一下，他们有什么不同呢？

1. style 引入

style标签是放到html的head标签内部的，它是定义在当前页面的样式

    <style>
        #outer {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
    </style>

2. link 标签

link引入外部独立css文件

  <link rel="stylesheet" type="text/css" href="./base.css" />

3. @import

@import 只能加载css，或者less

<style>
   @import url('./base.css');
</style>
    
<style lang="less">
    @import "./styles/layoutStyles/button.less";
</style>

@import 和 link 的区别

1. link 在载入页面的同时，加载css样式。而@import在页面载入完成后才加载css
2. link的兼容性比css要好
3. @import只能导入样式文件，link不仅可以同href导入样式，还可以定义rel属性（规定当前文档与被链接文档之间的关系）。

有问题可以给我留言，如果对你有了帮助，顺手点个赞，谢谢。