CSS引入方式
将CSS作用到HTML主要有四种方式，分别为HTML元素添加内联样式、<style>标签嵌入样式、<link>标签引入外部样式、@import导入外部样式。
内联方式
<div style="color: red"></div>
特点
- 不需要额外的
HTTP请求。 - 适合
HTML电子邮件与富文本编辑器的使用。 - 内联样式比外部样式具有更高的优先级，可以覆盖外部样式。
- 可以在不更改直接主
CSS样式表的情况下更改样式，直接将规则添加到元素。 - 适合于动态样式，对于每个元素的样式都不同的情况可以直接将样式作用到单个元素。
不足
嵌入方式
<style type="text/css">
div {
color: blue;
}
</style>
特点
不足
- 嵌入样式不能被浏览器缓存并重新用于其他页面
链接方式
<link rel="stylesheet" href="Path To stylesheet.css">
特点
不足
导入方式
<style>
@import url("Path To stylesheet.css");
</style>
特点
不足
- 需要额外的
HTTP请求
link与@import差异
-
<link>属于HTML提供的标签，@import属于CSS语句，值得注意的是@import导入语句需要写在CSS样式表的开头，否则无法正确导入外部文件。 -
@import是CSS2.1才出现的概念，所以如果浏览器版本较低例如IE4与IE5等，无法正确导入外部样式文件，当然也可以利用这一点来隐藏对于这些旧版本的浏览器的CSS2规则。 - 当
HTML文件被加载时，<link>引用的文件会同时被加载，而@import引用的文件则会等页面全部下载完毕再被加载，所以有时候浏览@import加载CSS的页面时会没有样式，也就是闪烁现象，网速慢的时候就比较明显。 - 使用
<link>标签可以设定rel属性，当rel为stylesheet时表示将样式表立即应用到文档，为alternate stylesheet时表示为备用样式表，不会立即作用到文档，可以通过JavaScript取得<link>标签对象，通过设置disabled来实现样式表的立即切换，可用作切换主题等功能，而@import不属于DOM无法使用JavaScript来直接控制。 -
<link>与@import混用可能会对网页性能有负面影响，在一些低版本IE中<link>与@import混用会导致样式表文件逐个加载，破坏并行下载的方式导致页面加载变慢。此外无论是哪种浏览器，若在<link>中引入的CSS中继续使用@import加载外部CSS，同样会导致顺序加载而不是并行加载，因为浏览器需要先解析<link>引入的CSS发现@import外部CSS后再次引入外部CSS，这样就导致页面加载变慢。
参考
https://alistapart.com/article/alternate/
https://matthewjamestaylor.com/add-css-to-html
https://www.runoob.com/w3cnote/html-import-css-method.html
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
https://stackoverflow.com/questions/1022695/difference-between-import-and-link-in-css
