使用link和@import导入css样式有啥区别?

css的导入有三种方式:

  • 行内样式:通过hmtl元素的style属性
<div style="width: 200px;"></div>
  • 内部样式表
    在head元素中添加style元素
<head>
  <style type="text/css">
      div{
        width: 300px;
      }
   </style>
</head>
  • 外部样式表
    1. 通过link元素引入css外部样式表
     <link type="text/css" rel="styleSheet"  href="CSS文件路径" />
    
    1. 通过@import导入
    <style type="text/css">
     @import url("css/style.css");
    </style>
    

其实在css的外部文件中同样还可以使用@import导入其他样式表,同样是外部样式表,link和@import有啥区别呢?

  • 页面载入时加载时机不同
    页面是自上而下进行加载,使用link的方式,页面在加载的同时,link导入的样式表同时被加载,而@import引入的样式表需要在页面被加载完成之后才会加载
  • 兼容性
    link输入xhtml的范畴,没有兼容性问题,而@import时css2.1提出的,所以低版本浏览器不兼容,ie5+
  • javascript控制
    link支持dom控制修改样式,而@import不支持
  • 加载内容不同
    link不仅仅可以加载css文件,还可以定义RSS等其他事务,而@import是css的概念,只能加载css

拓展:@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不识别

综上:
推荐使用link加载css外部文件,使用@import的方式推荐@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • link属于html标签,而@import是css提供的。 页面被加载时,link会同时被加载,而@import引...
    潇潇翔子阅读 1,813评论 0 0
  • 本质上,这两种方式都是为了加载css文件,但还是存在细微的差别。 差别1:老祖宗的差别,link属于XHTML标签...
    KevinLee0424阅读 812评论 0 0
  • 页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种...
    hope7th阅读 806评论 0 0
  • 页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种...
    饥人谷_米弥轮阅读 7,647评论 0 1
  • 页面中使用CSS的方式主要有3种: 行内添加定义style属性值,页面头部内嵌调用和外面链接调用。 其中外面引用有...
    魔_术师阅读 2,801评论 0 3