我们知道在网页中引用外部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. dev中TreeList的应用(转)

    如果需要在单元格添加时则用TreeList如果只是单纯读取数据或检索数据时则用GridControl 1.如果点击添加 时则添加TreeList的节点: protected internal void ...

  2. PHP 中使用socket

    一.开启socket phpinfo();查看是否开启了socket扩展,否则在php.ini中开启. 二.服务器端代码的写法 <?php error_reporting(E_ALL); set ...

  3. Flash安全的一些总结

    整理了下Flash安全相关的知识,后面会再完善 一.先来说crossdomain.xml这个文件 flash如何跨域通信,全靠crossdomain.xml这个文件.这个文件配置在服务端,一般为根目录 ...

  4. VS生成时复制文件到指定目录

    1.右键项目属性,选择生成事件,再点击"编辑后生成事件",可以直接在编辑框内填写命令行,如图: 2.也可以在弹出的编辑框内,写命令,$(ProjectDir)这种是系统的宏路径,具 ...

  5. 以Tomcat+Mysql为例，实现Docker多容器连接

    Docker提供了多个容器直接访问的方法,最简单的方式是直接使用端口映射-p参数指定映射的端口或者-P映射所有端口,多个容器直接通过网络端口进行访问. 但网络端口映射方式并不是Docker中连接多个容 ...

  6. [CSS3] 学习笔记-CSS3盒子样式

    1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...

  7. <C++Primer>第四版 阅读笔记 第三部分 “类和数据抽象”

    类定义了数据成员和函数成员:数据成员用于存储与该类类型的对象相关联的状态:而函数成员则负责执行赋予数据意义的操作. 第12章 类 一个类可以包含若干公有的.私有的和受保护的部分:在public部分定义 ...

  8. ArcGIS制图表达Representation实战篇4-自由式制图表达

    ArcGIS制图表达Representation实战篇4-自由式制图表达 by 李远祥 上一章节关于制图表达的控制点中已经介绍过制图表达的编辑功能,利用制图表达的编辑功能,可以实现一些规则以外的效果. ...

  9. qmake的配置功能(Configuration Features)

    Configuration Features qmake can be set up with extra configuration features that are specified in f ...

  10. Python之字符串详解1

    1. 查看类型 name = 'allen' print(type(name)) #查看类型 <class 'str'> #类型为str age = 19 print(type(name) ...