css调用外部样式表link与@import的区别介绍

标签: csscss引用外部样式表   时间:2016-08-21
css调用/导入外部样式有两种方法,第一种方法是使用link标签方法,第二种方法是使用@import方法,本文章向大家介绍这两个方法导入外部样式表的实例以及二者之间的区别,需要的朋友可以参考一下。

css 引用外部样式表有两种方法:

 

link引入外部样式表

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /> 

 

@import引入外部样式表

<style type="text/css" media="screen">     
@import url("CSS文件");   /* http://www.manongjc.com/article/1382.html */  
</style> 

 

二者区别:

使用link方式,浏览器会先装载完CSS文件再装载HTML的主体部分,所以显示出来的页面从开始就是带样式效果的。 
而采用@import方式,浏览器则会先装载完整个HTML文件后再装载CSS文件。 
为什么会这样呢,究其根本: 
link属于XHTML标签(功能不局限于导入CSS),而@import则是CSS提供的一种规则(CSS2.1以后,要考虑兼容)。 
从用户体验上来说,前者会更友好一些,特别是当网页文件比较大而网速比较慢的时候,后者页面就会出现明显的闪烁(开始会没有样式效果,当CSS加载完成后,忽然呈现出样式效果)。 
另外,当使用Javascript控制DOM去改变样式的时候,只能使用link方式,因为@import眼里只有CSS,不是DOM可以控制的。 

总结

  • 区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
  • 区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
  • 区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
  • 区别4:ink支持使用JavaScript控制DOM去改变样式;而@import不支持。

原文地址:http://www.manongjc.com/article/1382.html