CSS 的导入方式 (link or import ?)

前言

最常看见的CSS的使用方式有三种

1. 在span, div 等标签上直接使用 style 属性定义CSS

<span style="color:blue">This is Blue.</span>

2. 在当前的html 文件里定义class, 在html 标签中用class 的属性设置。

<!--Add by oscar999-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Author" CONTENT="oscar999">

<style type="text/css">

.blue{

   color:blue

}

</style>

</HEAD>

<BODY>

<span class="blue">This is Blue.</span>

</BODY>

</HTML>

3. 第三种方式就是把CSS 的定义单独到一个文件里。 html 文件里使用link 引入css文件

<!--Add by oscar999-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Author" CONTENT="oscar999">

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

</HEAD>

<BODY>

<span class="blue">This is Blue.</span>

</BODY>

</HTML>

4. 除了以上方式之外，另一种方式就是使用 @import

<!--Add by oscar999-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Author" CONTENT="oscar999">

<style type="text/css">

@import url(blue.css);

</style>

</HEAD>

<BODY>

<span class="blue">This is Blue.</span>

</BODY>

</HTML>

前两种方式自不必多说。这里比較一下 link 和 @import 的方式？

Link 与 @import 差异

1. 来源与作用。 link 属于 XHTML 标签，除了能够载入CSS外，还能够定义RSS, 定义rel 连接属性等其它作用。

而@import 全然是CSS提供的一种方式，仅仅能载入CSS。

2. 载入顺序不同。 link 引用的CSS会在页面被载入的时候同一时候载入；

而@import 引用的CSS会等到页面所有被下载完再被载入，所以有时候会出现開始没有样式，之后页面闪烁一下出现样式（在网速慢的时候会更明显）。

3. 兼容性的区别。

@import 是CSS2.1 提出的，老的浏览器不支持。IE5 以上的才干识别（只是如今来说，已经不是问题了，应该非常少有使用IE5及下面的浏览器了）。

link 浏览器都支持。

4. 使用javascript 能够控制到 link, 但@import 却无法控制。

<!--Add by oscar999-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Author" CONTENT="oscar999">

<link id="linkId" href="" rel="stylesheet" type="text/css" />

</HEAD>

<BODY>

<span class="blue">This is Blue.</span>

<script>

document.getElementById("linkId").href = "blue.css";

</script>

</BODY>

</HTML>

5. @import 能够在CSS 中再此引入其它样式表。

能够创建一个主样式表。在主样式表中引入其它的样式表。

这种优点是便于改动和扩展。

CSS拆分成文件, 尽管对于开发和维护来说比較方便和清晰。可是有一个缺点是会对站点server产生较多的HTTP请求。

浏览量大的站点还是慎重使用，像一些大型訪问量大的站点的首页，会直接把CSS或js 直接写在html 中。

假设你想样式表并行载入，以使页面更快。请使用LINK 替代@import。

巴特西

CSS 的导入方式 (link or import ?)

前言

Link 与 @import 差异

前言

前言

最新文章

热门文章