期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

CSS中link和@import的区别和详解

在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式。

而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式。那么同样是引入外部样式,这两者有什么区别呢,下面请跟随我来详细了解一下link和@import的区别吧!

区别

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		 <link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" >           <style type="text/css" >                 @import url("./tt.css");             </style>   	</head>  	<body>  	</body>  </html>

这就是两种引用方式的常见用法,可以很清晰的看出

1、从属关系:link是html的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等;而@import是css的语法,只有导入样式表的作用。

2、加载顺序:页面被加载时,link会和html同时被加载而;@import引入的 CSS 将在页面加载完毕后被加载。

3、兼容性:@import是 CSS2.1 才有的语法,所以只能在 IE5以上 才能识别;而link是 HTML 标签,所以不存在兼容性问题。

4、DOM:javascript只能控制dom去改变link标签引入的样式,而@import的样式不是dom可以控制的。

5、link方式的样式权重高于@import的权重。(如果对权重不是十分了解,可以看我之前的文章)

@import最优写法

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别

@import url(style.css) //Windows NS4, Macintosh NS4不识别

@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import url("style.css") //Windows NS4, Macintosh NS4不识别

由上分析知道,@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

结论

@import是依赖css的,存在一定的兼容问题,并且根据浏览器渲染机制来说,他在dom树渲染完成后才会渲染,并且不能被js动态修改。

相比之下link兼容性较好,且dom元素的样式可以被js动态修改,又因为link的权重高于@import,所以 @import适用于引入公共基础样式或第三方样式,link适用于自己写的且需要动态修改的样式。

经过实际的运用,相信在你真正书写和调整样式时一定可以如鱼得水。

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册