界面引入CSS样式的方式及link和import区别

界面引入CSS样式的方式有4种，它们有什么区别呢？

1. 使用HTML标签的style属性

优点：分散灵活方便,优先级高

缺点：缺乏整体性和规划性，不利于后期的修改和维护

2. 将样式代码写在页面标签之中

优点：标签中的任何位置，也可以多次出现，一个页面内部便于复用和维护

缺点：多个页面之间的CSS代码复用仍然不够

3. 使用 link 标签，引入外部CSS文件

优点：直接引入该文件到页面中，一个页面可以多次使用 link 标签引入多个外部css文件，方便复用和维护

缺点：后引入的CSS文件会覆盖前面引入的CSS文件的相同效果，代码量可能过大，维护不当的话又容易出现混乱

4. 使用@import引入CSS文件

优点：方便维护和规划

缺点：引入一个CSS文件，就会对服务器增加一次连接请求，当访问量较大时，需在维护性和性能上进行权衡

link和import区别

1. 从属关系：link 属于 html 标签，而 @import 是 css 提供的，外层需要添加 标签

2. 加载顺序：页面加载时，link 同时被加载， 而 @import 引用的 css 会等界面加载完成后再加载

3. 权重：link 方式的样式的权重高于 @import 权重

4. 兼容性： link 没有兼容性问题，@import 不兼容 ie5 以下

5. Dom可控性：可以通过 JS 操作 DOM ，是否插入link标签来起到改变样式的作用；由于DOM方法是基于文档的，无法使用@import的方式插入样式