CSS中 link 和@import 的区别是?
博客专区 > dong23 的博客 > 博客详情
CSS中 link 和@import 的区别是?
dong23 发表于1个月前
CSS中 link 和@import 的区别是?
  • 发表于 1个月前
  • 阅读 0
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

1.导入的语法不相同

link (链接式)语法为:

<link rel="stylesheet" href="style.css" type="text/css"/>

@import (导入式)语法为:

<style type="text/css">

@import url("style.css");

</style>

2.  link 和 import 语法结构不同,前者 <link> 是 html 标签,只能放入 html 源代码中使用, link 标签除了可以加载 CSS 外,还可以做很多其它的事情,比如定义 RSS ,定义 rel 连接属性等, @import 看作为 css 的样式,就只能加载 CSS 了;

3.使用 link 方式,浏览器将 CSS 文件和 HTML 的主体部分一同装载,所以显示出来的页面从开始就是带样式效果的;而采用 @import 方式,浏览器则会先装载完整个 HTML 文件后再装载 CSS 文件;

4.当使用 Javascript 控制 DOM 去改变样式的时候,只能使用 link 方式,因为 @import 眼里只有 CSS ,不是 DOM 可以控制的;

5link 是 XHTML 标签,无兼容问题; @import 是在 CSS2.1 提出的,低版本的浏览器不支持


实验得出,@import一定要放在样式表的前面,不管是内部样式还是外部样式,都要放在前面,而且这个在css权威指南上也明确指出了。如果放在末尾就会被浏览器忽略。而如果正确使用这三种类型的样式,只是会产生样式覆盖问题,而没有权重优先问题,测试浏览器Chrome

共有 人打赏支持
粉丝 0
博文 10
码字总数 1763
×
dong23
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: