CSS外部样式的两种引入方式

• HTML&CSS入门学习笔记

两种方法

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

<style>
@import url('style.css');
</style>

区别

1.从属关系区别

  link是HTML提供的标签，不仅可以加载CSS文件，还可以定义其它属性；@import是CSS提供的语法规则，只有导入样式表的作用。

2.加载顺序区别

  加载页面时，link标签引入的CSS会当浏览器加载到这行代码的时候进行加载；@import引入的CSS将在页面加载完毕后被加载。

  两者加载顺序虽然不同，但其引入的样式遵从 CSS 的层叠性，即就近原则（后来居上）。

3.兼容性区别

  link作为HTML元素，不存在兼容性问题；@import是 CSS 2.1 才有的语法，故只可在 IE5+ 才能识别。

4.DOM可控性区别

  可以通过 JS 操作 DOM，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.渲染区别

  亦即回答为什么@import引入的样式后被加载反而会被link引入的样式覆盖的 "矛盾"。

  首先，加载和渲染是两个不同的概念，虽然link先于@import加载，但并不意味着其也先于其渲染。实际上，渲染的动作一般都会执行多次，最后一次渲染，一定是依据之前加载过的所有样式整合后的渲染树进行绘制页面的。已经被渲染过的页面元素，也会被重新渲染。

  所以，虽然@import后被加载，但却会在加载完毕后置于样式表顶部，最终渲染时自然会被下面的重复样式层叠。

《CSS权威指南》：
“@import一定要写在除@charset外的其他任何CSS规则之前，如果置于其他位置将会被浏览器忽略，而且，在@import之后如果存在其它样式，则@import之后的分号是必须书写，不可省略的。”

参考：

• https://www.cnblogs.com/my--sunshine/p/6872224.html