CSS 的导入方式 (link or import ?)
2016-03-11 16:29
567 查看
前言
最常看见的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两行文字超出显示省略号
- css3 media媒体查询器用法总结
- css中元素的水平居中
- css3缩放功能实现0.5px的边框
- CSS网页布局模型
- CI框架整合Smarty模板时包含css,js文件的解决方法
- CSS选择器优先级
- 10030---CSS圆角效果
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
- CSS布局中HTML标签元素分类
- css 动画 transition及animation
- CSS布局属性
- js、css、img等浏览器缓存问题的2种解决方案
- css优化篇
- 使用div+CSS将页脚始终控制在页面最下方的方法
- CSS颜色、长度值、字体
- CSS总结1
- CSS选择器类型
- CSS3--gradient
- 小css