前言
最常看见的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。