css样式引入 及 link与@import使用区别

一.css样式引入

1.行内样式

<p style="color: red;">123</p>

2.内嵌样式
style标签通常写在 head标签内部

    <style>
        .title {
            color: #78a;
        }
    </style>

3.链接样式（ link ）
文件夹中新建一个css文件 ：1.css

* {
    background-color: red;
}

在要引入的文件中 用link标签

<link rel="stylesheet" href="./1.css">

4.导入样式( @import )

    <style>
        @import url(./1.css);
        .title {
            color: #78a;
        }
    </style>

二.link引入和@import引入的区别

同：都是css外部引入的方法
不同：
①link是html标签，没有兼容性问题，@import是css提供，低版本浏览器不支持；
②link在页面加载时同时加载(html和css同时加载)，@import页面加载完后再加载;
③link支持js控制dom从而改变样式，@import不行；
④link引进样式文件，图片资源，@import只能引样式文件

ps：本文纯参考其他文章进行归纳总结。