zoukankan      html  css  js  c++  java
  • link和@import的有何区别应如何选择

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

    代码如下:
    <style type="text/css" media="screen"> 
    @import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css"); 
    </style> 


    而很多网站使用的都是link: 

    代码如下:
    1 <link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" /> 

    而像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的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。 

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

    差别4:使用DOM控制样式时的差别 
    当使用JavaScript控制DOM去改变样式的时候,只能使用link标签,因为@import不是DOM可以控制的。 

    差别5:@import可以在CSS中再次引入其他样式表 
    比如可以创建一个主样式表,在主样式表中再引入其他的样式表, 
    大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。 

    转自:http://www.jb51.net/web/71573.html

  • 相关阅读:
    [Maid] Write Tasks in Markdown with Maid
    [React] Preview and edit a component live with React Live
    [React] Build a slide deck with mdx-deck using Markdown + React
    [React] Spread Component Props in JSX with React
    重载new delete操作符是怎么调用的
    oracle如何设置show parameter显示隐含参数
    Google用户登录界面 Android实现
    Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库
    消息机4_B
    jQuery中对 input 控件的操作
  • 原文地址:https://www.cnblogs.com/bokebi520/p/4045056.html
Copyright © 2011-2022 走看看