比较css中import与link的区别

看到淘宝网页中这样写使用的是import,而很多网站都是使用link,当然还有一些页面比较简单,流量很大的网站,是直接将css写在html代码中的?他们有什么区别?css用import还是link好?从经典论坛和另外一个网站大概了解了一下

看到一些网站的页中大部分是这样写的

@import url(“http://www.jb51.net/home/css/global/v2.0.css?t=20070518.css”);

  而很多网站使用的都是link

  而像google 百度 163等网站他们都是直接写在网页中

  当然使用链接link和导入import的好处就是易于维护,但当网速比较慢的时候,会出现加载中断的情况,导致页面排版错误

  他俩的作用相同

  唯一的不同是服务对象不一样

  @import 为CSS服务

  link是为当前的页服务

  经典有网友说 @import会优先执行。

  外部引用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可以控制的。

  大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。

以上就是比较css中import与link的区别的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3122191.html

(0)
上一篇 2025年3月29日 18:09:03
下一篇 2025年3月29日 18:09:09

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 使用CSS为图片设置背景图操作

    为图片设置背景图片,是一个非常搞的实例。这句话或许就感觉有点好玩。我们为以img标签引入页面的图片设置背景图片。 CSS的功能是非常强大的,对于元素的表现以及页面的布局,都提供了非常强大的功能,这主要在于我们灵活的运行,在这方面提供了丰富且…

    编程技术 2025年3月29日
    100
  • 解决CSS在浏览器不兼容的问题

    浏览器的不兼容,大家肯定都是深恶痛绝的,往往我们只是去做修补,却忘了更重要的事情,那就是追溯根源,避免类似的不兼容再次出现。 在下不才,归纳几点html编码要素,望能指点各位:1.文字本身的大小不兼容。同样是font-size:14px的宋…

    编程技术 2025年3月29日
    100
  • css中属性值继承介绍

    这篇文章主要介绍了css中属性值继承,介绍了属性的可以继承和不可继承,同时分析了继承的局限性以及是否可以取消等等,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。 继承:html元素可以从父元素那里继承一部分css属性,…

    编程技术 2025年3月29日
    100
  • CSS在网页设计中的使用方法及其特点

      给初学者介绍一下css特点及如何在网页中使用已经设置的css。   W3C(The World Wide Web Consortium)把动态HTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript、V…

    编程技术 2025年3月29日
    100
  • css技巧之链接的标注

          css越来越广泛的被运用,层叠样式表拥有很多表格布局所没有的优势,首先从布局或者页面的设计与出现在页面中的信息中作严格的分离,从而让页面的设计能够很容易被改变,仅用一个css文件更换另一个。随之很多的技巧被应用者所重用,减少一定…

    编程技术 2025年3月29日
    100
  • css实现进行中打点效果代码分享

    这篇文章主要介绍了css进行中打点效果,附上代码让大家更简单易懂得看明白样式设置,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。 代码如下: nbsp;html>进行中…dot { display:inlin…

    编程技术 2025年3月29日
    100
  • CSS3中media媒体查询器使用详解

    最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多。但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器。 那么什么是media媒体查询器呢? Media媒体查询…

    编程技术 2025年3月29日
    100
  • 关于CSS布局技巧的总结分享

    单列布局 水平居中 父元素text-align:center;子元素:inline-block; 优点:兼容性好; 不足:需要同时设置子元素和父元素 nbsp;html>水平居中1 .parent { width: 500px; he…

    编程技术 2025年3月29日
    100
  • 利用html+css3制作心的跳动动画

    nbsp;html>            模拟心的跳动 * { margin: 0; padding: 0;}body { background-color: #D4CECE;}.big { width: 200px; height…

    编程技术 2025年3月29日
    100
  • 总结解决css边距重叠的方法

    本篇文章主要介绍了详解css边距重叠的几种解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 今天整理了一下用css防止边距重叠的几种方法 先假设一组dom结构          登录后复制 通常情况下,如…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论