CSS 的导入方式 (link or import ?)
发布日期:2021-07-01 05:40:38 浏览次数:2 分类:技术文章

本文共 982 字,大约阅读时间需要 3 分钟。

前言

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

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

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

New Document
This is Blue.
3. 第三种方式就是把CSS 的定义单独到一个文件中, html  文件中使用link 引入css文件

New Document
This is Blue.

4. 除了以上方式之外, 还有一种方式就是使用 @import

New Document
This is Blue.
前两种方式自不必多说, 这里比较一下 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 却无法控制。

New Document
This is Blue.
5. @import 可以在CSS 中再此引入其他样式表。可以创建一个主样式表, 在主样式表中引入其他的样式表。

这样的好处是便于修改和扩展。

CSS拆分成文件, 虽然对于开发和维护来说比较方便和清晰, 但是有一个缺点是会对网站服务器产生较多的HTTP请求。浏览量大的网站还是谨慎使用,像一些大型访问量大的网站的首页,会直接把CSS或js 直接写在html 中。

如果你想样式表并行载入,以使页面更快,请使用LINK 替代@import。

前言

前言

转载地址:https://oscar.blog.csdn.net/article/details/18726995 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:[过年菜谱之]清蒸鲈鱼
下一篇:[Ext JS 4] 动态加载

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年04月12日 22时04分04秒