link和@import的用法及区别

3 篇文章 0 订阅

本质上,这两种方式都是为了加载css文件,但还是存在细微的差别。

区别:

1、从属关系区别

@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

2、加载顺序区别

加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

3、兼容性区别

@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

4、DOM可控性区别

可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。

用法:

 <head>
    <!-- link是标签,引入外部样式表 -->
    <link rel="stylesheet" href="./a.css">
    <style>
        /* @import 在css环境中 导入外部css */
        @import url('./b.css');
        .box{
          width: 100px;
          height: 100px;
          background: green;
        }
    </style>
</head>

@import可以在css中再次引入其他样式表,比如创建一个主样式表,在主样式表中再引入其他的样式表,如:

@import “sub1.css”;
  @import “sub2.css”;
  sub1.css
  ———————-
  p {color:red;}
  sub2.css
  ———————-
  .myclass {color:blue}

这样有利于修改和扩展。

但是:这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在确实两个或更多的文件了,服务器压力增大,浏览量大的网站还是谨慎使用。

CSS 权重优先级顺序简单表示为:

!important > 行内样式 > ID >类、伪类、属性 >标签名 > 继承>通配符

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值