样式导入方式总结

本文详细对比了HTML中link与CSS中@import的不同之处,包括资源类型、兼容性、加载时机、DOM操作支持及写法多样性等方面,揭示了两者在前端开发中的应用差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

link与import

<link href="index.css" rel="stylesheet"> 

  1. <style type="text/css">  
  2. @import "index.css";  
  3. </style>

不同点

  • link除了引用样式文件,还可以引用图片等资源文件,而import只引用样式文件
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu.svg">
<link rel="search" type="application/opensearchdescription xml" href="/content-search.xml" title="百度搜索" />
    • 兼容性不同,link不存在兼容性的问题,import在IE5以上支持,是css2.1新增的
    • 在样式表文件可以使用import导入其它的样式表文件,而link不可以
    • link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
    • link支持使用Javascript控制DOM去改变样式;而@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(index.css);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值