@import与link方式的区别

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

2. 加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。

3. 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

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

时间: 2024-11-05 21:57:11

@import与link方式的区别的相关文章

CSS中@import与link的具体区别

我们知道在网页中引用外部CSS有两种方式:@import和link 我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 link:link就是把外部CSS与网页连接起来. @importimport文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件. 为什么使用@import大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.另一个主要的原因

引入css ,使用@import和link的方式

我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 linklink就是把外部CSS与网页连接起来. @importimport文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件. 为什么使用@import大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个

web前端入门到实战:@import和link引入样式的区别

关于@import和link引入样式的区别网上有很多种说法.大致有如下几种,不过这其中会有我存疑的地方,我们可以一起来探讨一下. 区别 1.从属关系区别 @import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS.rel 连接属性等. 2.加载顺序区别 加载页面时,link标签引入的 CSS 被同时加载: @import 引入的 CSS 将在页面加载完毕后被加载. 3.兼容性区别 @import是 CSS2.1 才

@import和link的区别

@import和link的区别 1.link语法结构    <link href="CSSurl路径" rel="stylesheet" type="text/css" />    此标签是引入CSS文件link标签,只要设置好路径即可. 2.@import语法结构    @import + 空格+ url(CSS文件路径地址);    1).在html中        <style type="text/css&qu

HTML页面引入CSS的几种方式及区别

1. 使用HTML标签的style属性 如:<p style="font-size:12px; color: blue"> 这种方式的优点:分散灵活方便: 缺点:缺乏整体性和规划性,不利于维护,维护成本高: 这种方式的CSS渲染的优先级要高于其它三种. 2. 将样式代码写在<style></style>标签中 通常将style标签放到HTML文件<head></head>标签里 如:<html><head&g

CSS里的引用@import、link

引入CSS的方法有两种,一种是@import,一种是link @import url('地址');<link href="地址" rel="stylesheet" type="text/css" />现在绝大部分的网站都采用后一种link方式,原因在于@import先加载HTML,后加载CSSlink先加载CSS,后加载HTML. 所以前者加载网页会出现令浏览者以外的格式,后者则是带格式的加载网页.

引入CSS文件的@import与link的权重分析

我很少在CSS用到@import这个标签,最近看到一句话“link方式的样式的权重 高于@import的权重”,感觉不太对,@import只是一个引入外部文件而已,怎么会有高于link的权重呢?于是我比较懒,直接在一个静态页面里面测试了一下,分别把@import的样式放置在link的前面和后面测试,结果发现前面的被后面的link所覆盖,也就是说这个说法是错误的. 因而得出结论(只考虑html中样式文件的优先级): 当@import与内联样式一起时,内联样式>导入样式 除了第一种情况,其它时候以样

【转】使用@import和link导入样式

Translate From:stevesouders原文:高性能网站设计:不要使用@import 在高性能网站设计的第五章,我简要的提到@import 对于网站的性能有某些负面的影响,然后我在 Web 2.0 Expo 的演讲上深入探讨了这个问题,并创建了一些测试页面和HTTP瀑布状图表,这些在下面将会用到.对于这个问题的底线是:如果你想样式表并行载入,以使页面更快,请使用LINK 替代@import. LINK vs. @import 大家都知道,有两种方法可以在你的页面中导入样式文件.你可

VUE引入模块之import xxx from &#39;xxx&#39; 和 import {xxx} from &#39;xxx&#39;的区别

import FunName from ‘../xxx’ export defualt function FunName() { return fetch({ url: '/article/list', method: 'get' }); } import {xxx} from ‘../xxx’ export function FunName() { return fetch({ url: '/article/list', method: 'get' }); } ES中的模块导出导入 expor