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
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
2
# link 和 @import 的区别
- 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 自身的并行下载。
(完)