`
icybamboo
  • 浏览: 39902 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

link和@import(转)

阅读更多

  在XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import。
  本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。
  不同1:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。


  不同2:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

  不同3:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
  link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

  不同4:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS 的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。
 
  
  CSS调用link和import的方式大致就以上几种不同了,其它几乎是一样的,但是也有共同的一个缺点:就是在网页编码和css文件的编码不一样的时候可能会导致有些css效果没办法显示的问题,特别是在IE6上面,也是css外部调用的一个缺点吧!但是从上面的分析来看,还是使用link标签比较好。

 

 

我们知道在网页中引用外部CSS有两种方式,即:@import与link,我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗?
link就是把外部CSS与网页连接起来,具体形式
import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件,具体形式

为什么使用@import?
大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.

使用以下代码可以使IE6及以下的浏览器无法解析该CSS(IE6以下的属于年久失修在这里略去方法)

@import url(../style.css) screen;另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.

为什么使用link?

使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

如不明白,请进入这个页面,然后在Firefox中点击”查看-页面风格”.

@import的小毛病

如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.
@import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

到底要用那种方式?
就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.

分享到:
评论

相关推荐

    link和@import引用css文件方法的区别

    link 和 @import 引用 CSS 文件方法的区别 在 HTML 中,-link 和 @import 是两种常用的引用 CSS 文件的方法,但它们之间存在着一些区别。在本文中,我们将详细介绍这两种方法的异同。 一、link 元素 link 元素是 ...

    href和src、link和@import的区别详解

    在HTML和CSS的世界里,`href` 和 `src`、`link` 和 `@import` 是两个关键的概念,它们在创建动态和静态网页时扮演着重要角色。理解这些概念的区别对于优化网页性能和布局至关重要。 首先,让我们来看一下 `href` 和...

    css中link和@import的区别分析详解

    导入CSS文件主要有两种方式: 链接式(link) 代码如下 复制代码代码如下: <link rel=”stylesheet” href=”style.css” type=”text/css”/> 导入式(@impot) 复制代码代码如下: <style type=”text/...

    CSS中link和@import的区别说明

    我们都知道link与@import都可以引入css样式表,那么这两种的区别是什么呢?先说说它们各自的链接方式,然后说说它们的区别~~~ link链入的方式: CSS Code复制内容到剪贴板 <link rel=stylesheet type=text/...

    link和@import的区别深入探讨

    在加载时间和性能方面,link和@import存在显著差异。当HTML文档被加载时,link标签所引入的CSS样式表会与HTML文档同步加载。这意味着用户在页面加载过程中就可以看到被CSS美化过的页面。而@import引入的CSS文件则...

    CSS两种方式link和@import

    CSS有两种主要的引入方式,即`<link>`标签和`@import`规则。这两种方法虽然都能达到同样的效果,即引入外部样式表,但在实际应用中,它们之间存在一些差异。 首先,`<link>`标签是HTML文档的一部分,它被用来定义...

    外部引用CSS中 link与@import的区别

    其中,通过link标签和@import语句导入CSS文件是最主要的两种方法。虽然两者的目的相同,但它们在使用方法、性能表现、兼容性以及JavaScript交互方面存在显著差异。 1. 标签与CSS规则的区别 link是XHTML中用于链接...

    引入CSS的方式有哪些?link和@import的有何区别应如何选择

    综上所述,虽然`<link>`和`@import`在功能上都能实现CSS文件的引入,但从性能和兼容性角度出发,更推荐在大多数情况下使用`<link>`标签进行外部样式表的引入。特别是在网站流量较大、对加载速度和兼容性有较高要求的...

    浅谈css和@import区别及用法

    css和@import都是调用外部样式表的方法。 一、用法 (1)link: <link rel="stylesheet" type="text/css" href="css文件路径"/> (2)@import: 方法一(html中添加): <style type="text/css"> @import ...

    深入理解CSS中的@import

    @import规则也受到特定的限制和使用建议,了解这些规则对于进行网页设计和开发至关重要。 首先,@import语句必须位于CSS文件中的所有其他规则之前,除了可能存在的@charset规则。这是因为浏览器需要先解析导入的...

    CSS @import与link的具体区别

    在CSS中,引用外部样式表主要有两种方法:`@import`和`link`。这两种方法在功能和使用场景上存在一些差异。 首先,`link`元素是HTML的一部分,用于将外部CSS文件链接到HTML文档中。它的基本语法是: ```html <link ...

    web前端优化时为什么不建议使用css @import

    然而,尽管使用@import能够帮助我们更好地组织和管理CSS文件,但在Web前端优化中,它的使用常常被建议避免。为什么呢? 其主要原因在于浏览器加载CSS的方式上。当@import语句被放置在一个外部样式表中时,浏览器...

    CSS什么时候用import什么时候用link 有何区别

    - 当同一个选择器在`@import`和`<link>`中同时出现时,`<link>`中的样式会覆盖`@import`导入的样式。 **动态控制:** - 在使用DOM操作时,`<link>`可以通过JavaScript动态添加和移除,而`@import`则不能。 **结论...

    关于css @import url()总结

    关于CSS中的`@import url()`,这是一个用于引入外部样式表的指令,它的使用与`<link>`标签在某些方面有所不同,且存在一定的兼容性和性能差异。以下是对`@import url()`进行的详细总结: 1. **加载机制**: `@...

Global site tag (gtag.js) - Google Analytics