CSS 引入方式


# CSS 引入方式

# 引入方式

css 引入页面的方式有四种:

  • 内联样式:即行内样式,通过标签的 style 属性,在标签上直接写样式。
<div style="width:100px; height:100px; background:red "></div>
1
  • 嵌入样式:通过 style 标签,在网页上创建嵌入的样式表。
<style type="text/css">
div { 
  width:100px; 
  height:100px; 
  background:red;
}
</style>
1
2
3
4
5
6
7
  • 外链样式:通过 link 标签,链接外部样式文件到页面中。
<link rel="stylesheet" type="text/css" href="index.css">
1
  • 导入样式:通过 CSS 提供的 @import 语法,在样式表中链接其他样式表。
/* 必须出现在样式表中其他的样式之前,否则 @import 引用的样式表不会生效 */
@import url("index.css")
1
2
  • link 是 HTML 提供的标签;@import 是 CSS 提供的语法规则。
  • 加载页面时,link 标签引入的 CSS 被同时加载;@import 引入的 CSS 将在页面加载完毕后被加载。
  • 浏览器对 link 的兼容性更高,@import 只可以在 IE5+ 才能识别。

注意:网上常说的「link 引入的样式权重大于 @import 引入的样式权重」是不太合理的。

# @import 引入 CSS 的弊端

  • 使用 @import 引入 CSS 会影响浏览器的并行下载
    使用 @import 引用的 CSS 文件只有在引用它的那个 css 文件被下载、解析之后,浏览器才会知道还有另外一个 css 需要下载,这时才去下载,然后下载后开始解析、构建 render tree 等一系列操作。这就导致了浏览器无法并行下载所需的样式文件。

  • 多个 @import 会导致下载顺序紊乱
    在 IE 中,@import 会引发资源文件的下载顺序被打乱,即排列在 @import 后面的 js 文件先于 @import下 载,并且打乱甚至破坏 @import 自身的并行下载。

(完)