link与@import在外部引用CSS中的区别

开发 前端
本质上,CSS中link与@import这两种方式都是为了加载CSS文件,但还是存在着细微的差别,这里就向大家描述一下外部引用CSS中link与@import的区别。

本节主要从五个方面来向大家介绍一下外部引用CSS中link与@import的区别,比如link属于XHTML标签,而@import完全是CSS提供的一种方式,link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

外部引用CSS中link与@import的区别

这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import。本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。

差别1:老祖宗的差别。

link属于XHTML标签,而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

差别2:加载顺序的差别。

当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。

差别3:兼容性的差别。

由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

差别4:使用dom控制样式时的差别。

当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

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

  1. main.css  
  2. ———————-  
  3. @import“sub1.css”;  
  4. @import“sub2.css”;  
  5.  
  6. sub1.css  
  7. ———————-  
  8. p{color:red;}  
  9.  
  10. sub2.css  
  11. ———————-  
  12. .myclass{color:blue}  

这样更利于修改和扩展.

大致就这几种差别了,其它的都一样,从上面的分析来看,还是使用link标签比较好。

标准网页制作加载CSS文件时,还应该选定要加载的媒体(media),比如screen,print,或者全部all等。这个我到CSS高级教程中再给大家介绍。

【编辑推荐】

  1. DIV CSS表单布局五个小技巧使用秘笈
  2. CSS中link和@import的区别
  3. 术语汇编 基本CSS滤镜概述
  4. 完美实现丰富的CSS文字效果
  5. 鼠标经过时改变DIV背景颜色的三种途径


 

责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-09-01 15:11:09

linkimportCSS

2010-09-08 09:33:09

CSSlink@import

2010-09-07 16:21:37

CSSDisplayVisibility

2010-09-16 10:29:47

DisplayVisibilityCSS

2010-08-30 10:52:39

CSSclassid

2010-09-08 14:46:36

CSSborder

2010-09-06 16:27:06

CSSabsoluterelative

2010-09-06 16:00:41

CSSborder

2010-09-09 14:16:24

pxemCSS

2010-08-23 10:57:14

CSSclassid

2017-03-20 19:18:00

Android符号引用

2010-08-30 10:32:38

SPANDIV

2022-03-30 14:34:21

鸿蒙HarmonyOScss

2020-07-01 07:23:36

物联网教育技术

2011-11-23 10:59:18

Javafinal

2023-10-17 08:13:41

C++链接

2009-08-21 09:28:23

this与$(this

2010-08-27 15:56:52

IEFirefoxCSS

2010-08-20 14:47:02

IEFirefoxCSS

2013-05-23 17:21:16

C#
点赞
收藏

51CTO技术栈公众号