外部引入css的两种方法对比

首先介绍一下，如何在html中应用css,可分为三种方法：
1，行内样式表，将CSS规则写到style属性中
例如：

       <div style="background-color: brown;color: aliceblue;">hello</div><br>

2，内部样式表，将CSS规则写到style标签内
例如：

<style>
    div {
        background-color: blueviolet;
        border: 20px solid blue;
    }
</style>

3，外部引入
a,将CSS规则写到一个以“.css”为后缀的文件中，使用link标签将.css文件加载到html中
例如：
html代码块：

         <link rel="stylesheet" href="style.css">

css代码块：

   @charset ”utf-8”;
   h1 { color: blue; background-color: yellow; border: 1px solid black; }

b,在style标签的第一行使用@import 'style.css’导入
例如：
html代码块：

<style>
/*放在style的第一行去导入外部样式表*/
@import 'style.css';
</style>

css代码块：

   @charset ”utf-8”;
   h1 { color: blue; background-color: yellow; border: 1px solid black; }

使用两种外部引入css的方式在页面显示效果是一样的，但是还是有一定区别：
1，所属范围：
link是html标签，不仅可以加载css文件，还可以定义rel属性， rel="stylesheet"表示调用外部样式
@import属于css语法，只能导入样式
2，加载顺序：
页面加载的时候，link标签引入的样式同时被加载
@import引入的样式，在页面加载完毕之后被加载
3，兼容性
link不存在兼容性问题
@import需要IE5+