css的link和import的区别

本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。
差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外,还可以做很多其它的事情,定义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-10-18 10:57:52

css的link和import的区别的相关文章

CSS中link和@import的区别

你对CSS中link和@import的区别是否熟悉,这里和大家分享一下,@import  属性用来指定导入的外部样式表及目标设备类型, link除了调用CSS外还可以有其他作用譬如声明页面链接属性,声明目录,rss等等,而@import就只能 调用CSS. CSS中link和@import有什么区别? 定义  ◆link元素 HTML和XHTML都有一个结构,它使网页作者可以增加于HTML文档相关的额外信息.这些额外资源可以是样式化信息(CSS).导航助手.属于另 外形式的信息(RSS).联系信

CSS的link和@import的区别

CSS的link和@import的区别: 标签和@import都可以引入外部样式表,功能看起来类似,但是它们之间还是有不少区别的,由于标签使用比较频繁,这里就不多介绍了,点击CSS的@import的用法可以了解@import的用法.下面就简单介绍一下它们两者的区别. 一[email protected]可以在一个样式表中引入其他样式表,在同一目录下有三个样式表分别是:main.css.one.css和two.css,在main样式表中可以引入one.css和two.css.方法如下: @char

页面引入css用link和import的区别

假设有一个css文件a.css,文件里的内容如下: p { font-size: 18px; } 现在分别使用两种方式引入a.css: 1.使用html的link标签 <link rel="stylesheet" type="text/css" href="a.css"> 2.使用import <style type="text/css"> @import url(a.css); </style&

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

差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了. 差别2:加载顺序的差别.当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载. 差别3:兼容性的差别.由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才

引用外部CSS的link和import方式的分析与比较

很多网页中的 CSS 链接与引用是这样写的: <style type="text/css" media="screen"> @import url("http://www.abaonet.com/abc.css"); </style> 而很多网站使用的都是 link <link rel="stylesheet" rev="stylesheet" href="style

引入CSS方式link和@import的有何区别

外部引用CSS中 link与@import的区别 这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import. 本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 差别1:老祖宗的差别 link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了. 差别2:加载顺序的差别 当一个页面被加载的时候(就是

引入CSS文件的方式,以及link与@import的区别

一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"></div> 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 <html> <head> <style> ..// 此处添加css代码 </style> </head> <

css 样式引入的方法 link 与import的区别

<link> 元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法:1 使用<link>元素链接到外部的样式文件2 在<head>元素中使用"style"元素来指定3 使用CSS "@import"标记来导入样式表单4 在<body>内部的元素中使用"style"属性来定义样式 1 用link进行引用 <link r

前端深入之css篇|link和@import到底有什么区别?

写在前面 在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式. 而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式.那么同样是引入外部样式,这两者有什么区别呢,下面请跟随我来详细了解一下link和@import的区别吧! 区别 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet&