差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。
差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
补充:
@import url(xxx.css); 有最大次数的限制,经测试IE6的最大次数是31次,第32个import及以后的都不能生效
而很多网站使用的都是link
<link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />
而像google 百度 163等网站他们都是直接写在网页中
当然使用链接link和导入import的好处就是易于维护,但当网速比较慢的时候,会出现加载中断的情况,导致页面排版错误.
import 的用法
<style type="text/css">
@import url(xxx.css);
</style>
分享到:
相关推荐
link 和 @import 引用 CSS 文件方法的区别 在 HTML 中,-link 和 @import 是两种常用的引用 CSS 文件的方法,但它们之间存在着一些区别。在本文中,我们将详细介绍这两种方法的异同。 一、link 元素 link 元素是 ...
* 加载顺序的差别:link 引用的 CSS 会同时被加载,而@import 引用的 CSS 会等到页面全部被下载完再被加载 * 兼容性的差别:@import 只有在 IE5 以上的浏览器才能识别 * 使用 dom 控制样式时的差别:只能使用 link ...
使用link标签导入外部css样式表 <link rel="stylesheet" href="css/demo01.css"> 在样式表中import(导入)外部样式表 @import url("/crazy-html5/06css/css/demo01.css"); 使用内部样式表 内部样式表只能作用于...
* 导入样式:`@import url("/css/global.css");` 5. CSS 优先级 CSS 优先级包括: * id 优先级高于 class * 后面的样式覆盖前面的 * 指定的高于继承 * 行内样式高于外部样式和内部样式 通过本节课的学习,我们...
链接方式是使用<link>标签来链接外部的 CSS 文件,例如:<link href="style.css" type="text/css" rel="stylesheet" /> 这种方式将 HTML 文件和 CSS 文件彻底分成两个或多个文件,实现了页面框架 HTML 代码与美工 ...
外部連接套用(External Link) 外部连接套用(External Link) 匯入套用(Import) 汇入套用(Import) 行內套用行内套用 我們可以在HTML 文件內直接宣告樣式。我们可以在HTML文件内直接宣告样式。 舉例來說,举例来说, ...
一般而言,网页传统方式的导入外部JS和CSS等资源文件的方法是直接在模板文件使用: [removed] <link rel="stylesheet" type="text/css" href="/App/Tpl/default/Public/css/style.css" /> ThinkPHP的模板...
46前端开发基础视频-引用外部CSS文件和嵌入CSS样式.avi 47前端开发基础视频-import导入CSS样式详解.avi 48前端开发基础视频-CSS语法及简单CSS属性.avi 49前端开发基础视频-CSS语法案例.avi 50前端开发基础视频-...
一个功能齐全的甘特图组件,完全用Javascript,CSS和AJAX构建... link href =" jsgantt.css " rel =" stylesheet " type =" text/css "/>< script src =" jsgantt.js " type =" text/javascript " > </ scr
<import resource="jeecms-servlet-front-action.xml"/>代码 找到jeecms-servlet-front-action.xml,在此配置文件中有 <bean id="dynamicAct" class="com.jeecms.cms.action.front.DynamicPageAct"/> 可以找到类...