我们知道在网页中引用外部CSS有两种方式：@import和link

我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看

link：
link就是把外部CSS与网页连接起来。

@import
import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件。

为什么使用@import
大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.
另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.

为什么使用link
使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel="alternate stylesheet"属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

@import的小毛病
如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.
更新:  @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

到底要用那种方式
就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.

原文：http://www.w3cfuns.com/forum.php?mod=viewthread&tid=262

CSS中@import与link的具体区别的更多相关文章

  1. css中import与link用法区别

    方式:引入CSS的方法有两种,一种是@import,一种是link @import url('地址');//注意,这种方式可以放在页面也可以放在css文件中<link href="地址 ...

  2. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

  3. 在CSS中定义a:link、a:visited、a:hover、a:active顺序

    摘自:http://blog.snsgou.com/post-2.html     以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现 ...

  4. iOS 中 #import同@class之间的区别

    很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢? 这是 ...

  5. 彻底弄懂css中单位px和em的区别(转)

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了e ...

  6. 【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序

    摘自:http://www.qianyunlai.com/post-2.html     以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料 ...

  7. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  8. css中单位em和rem的区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  9. CSS中定义a:link、a:visited、a:hover、a:active顺序

    a :link.a:hover.a:visited这几个元素,定义CSS时候的顺序不同,也会直接导致链接显示的效果不同. eg:让未访问链接颜色为red,活动链接为yellow,已访问链接为green ...

随机推荐

  1. AFNetWorking 之 Get/Post 请求的使用

    1. Get 与 Post 比较 GET请求:简单业务.明文发送 POST请求:上传文件,重要信息.加密信息,.大数据信息. 2. 序列化 默认是JSon格式. // 请求的序列化 manager.r ...

  2. 【翻译】使用Visual Studio在Azure上部署Asp.Net Core Web应用

    配置运行环境 Install the latest Azure SDK for Visual Studio. The SDK installs Visual Studio if you don't a ...

  3. jQuery选择器，用逗号分隔的时候需要注意范围问题

    jQuery选择器,用逗号分隔的时候需要注意范围问题: <%@ page language="java" import="java.util.*" pag ...

  4. 去除 MyEclipse updating index

    去除 MyEclipse updating index http://zhidao.baidu.com/link?url=OfHjTTxnNRoijnsaweBl3K3UTlnlFGdtHEQIvEW ...

  5. Objective-C处理动态类型函数集

    -(BOOL) isKindOfClass:class-object 对象是不是class-object或其子类的实例-(BOOL) isMemberOfClass:class-object 对象是不 ...

  6. 利用forwardInvocation实现消息重定向

    在obj-c中我们可以向一个实例发送消息,相当于c/c++ java中的方法调用,只不过在这儿是说发送消息,实例收到消息后会进行一些处理.比如我们想调用一个方法,便向这个实例发送一个消息,实例收到消息 ...

  7. [nRF51822] 16、nRF51822的随机数生成器，及随机数生成器的一些知识（可以帮您补补随机数发生器的知识）

    1.前言 随机数生成器在通信.加密.图像传输等领域应用广泛,且一般起到关键性作用.我在最近设计的一个近场射频通信协议的碰撞避退算法的过程中,便对此有深深体会. 2.伪随机数发生器 随机数发生器一般包括 ...

  8. Crontab could not create directory .ssh

    最近在利用 crontab 构建自动备份时,遇到了一个问题.我的脚本中包含了用于服务器用户切换使用的 ssh 命令.当我登录到服务器上时,脚本执行正常:当我没有登录到服务器上时,脚本执行失败,错误提示 ...

  9. yum网络源配置

    [root@xuegod60 ~]# mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak[root@x ...

  10. POJ1753 搜索

    Flip Game Description Flip game is played on a rectangular 4x4 field with two-sided pieces placed on ...