从实际使用分析CSS引用方式的异同
2013-05-24 21:32
183 查看
闲来无事,翻看各个门户网站的代码。发现在引用CSS的方式上存在很大的区别,主要表现为使用 import、link以及在当前页面插入。就我个人而言,一般只用到link方式,所以看到超级大站用其他两种方式不免想要探个究竟,多么可贵的学习精神……
淘宝网用的是import方式,代码如下:
直接在页面中写入CSS代码的利弊很清楚了,不方便复用,但利用率高、加载速度快(这也是百度GOOGLE这种对加载速度要求很高的网站选择这种方式的主要原因)。下面主要分析import和link两种方式的异同。
1. 从本质上说:
link方式是一种html标签,而import方式是在CSS代码域中的,因此它是一种CSS的方法,我们也可以说link是为页面提供内容的,而import是为CSS提供内容的。
2. 从加载顺序上说:
link方式引用的CSS会随着该标签所在页面中的位置而被加载,而import所导入的CSS代码则是在整个页面加载完毕之后才载入,这点区别比较重要,在加载速度受到限制时,import方式所影响的页面可能会因为CSS的加载延时而出现页面样式短时不受控制的现象。
3. 从功能上说:
link可以实现很多功能,除了加载CSS,它还可以加载许多其它文件,而import只能加载CSS文件。
4. 从技术结合上说:
link引用的CSS可以通过js寻找DOM进行样式控制,但import由于不在页面的dom中,因此难以被js控制。
5. 从兼容性上说:
link是随着HTML的出现而出现,随着HTML的发展而发展,因此基本上不存在兼容性问题,而import方式是在CSS的2.1版本中才提出来的,因此非常非常非常陈旧的浏览器不支持这一CSS方法。
淘宝网用的是import方式,代码如下:
<style type=”text/css” media=”screen”> @import url(“http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css”); </style>而大多数网站和我一样,用的是link方式,比如 paperrater:
<link rel="stylesheet" href="http://www.paper-rater.com/wp-content/themes/paperrater/style.css" type="text/css" media="screen">百度、google等网站则是直接在网页中书写了许多CSS代码。
直接在页面中写入CSS代码的利弊很清楚了,不方便复用,但利用率高、加载速度快(这也是百度GOOGLE这种对加载速度要求很高的网站选择这种方式的主要原因)。下面主要分析import和link两种方式的异同。
1. 从本质上说:
link方式是一种html标签,而import方式是在CSS代码域中的,因此它是一种CSS的方法,我们也可以说link是为页面提供内容的,而import是为CSS提供内容的。
2. 从加载顺序上说:
link方式引用的CSS会随着该标签所在页面中的位置而被加载,而import所导入的CSS代码则是在整个页面加载完毕之后才载入,这点区别比较重要,在加载速度受到限制时,import方式所影响的页面可能会因为CSS的加载延时而出现页面样式短时不受控制的现象。
3. 从功能上说:
link可以实现很多功能,除了加载CSS,它还可以加载许多其它文件,而import只能加载CSS文件。
4. 从技术结合上说:
link引用的CSS可以通过js寻找DOM进行样式控制,但import由于不在页面的dom中,因此难以被js控制。
5. 从兼容性上说:
link是随着HTML的出现而出现,随着HTML的发展而发展,因此基本上不存在兼容性问题,而import方式是在CSS的2.1版本中才提出来的,因此非常非常非常陈旧的浏览器不支持这一CSS方法。
相关文章推荐
- 从实际使用分析CSS引用方式的异同
- 从实际使用分析CSS引用方式的异同
- 引用外部CSS的link和import方式的分析与比较
- WPF开发学习:资源在内外部定义的不同方式和怎么引用,Style样式的四种使用(对比CSS)
- 引用外部CSS的link和import方式的分析与比较
- 引用外部CSS的link和import方式的分析与比较
- 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
- 引用 MySQL使用基于Parameter方式代码,总是提示:“Column '列名' cannot be null”
- css 伪类::after ::beftor 的使用方式
- linux的信号处理和实际使用(结合redis分析)
- 数据绑定以及Container.DataItem几种方式与使用方法分析
- RTTI、虚函数和虚基类的实现方式、开销分析及使用指导
- linux内核分析第四周-使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
- css三种表示引用方式
- 在JSP中使用JS方式引用ckeditor
- RTTI、虚函数和虚基类的实现方式、开销分析及使用指导
- Redis持久化磁盘IO方式及其带来的问题 有Redis线上运维经验的人会发现Redis在物理内存使用比较多,但还没有超过实际物理内存总容量时就会发生不稳定甚至崩溃的问题,有人认为是基于快照方式持
- CSS的三种使用方式
- 关于使用struts2跳转后css和js失效的解决方式
- CSS中的选择符实际使用指南