在html 代码中我们常常用分离的思想引入外部的css文件,常用的方法有2种,@import

语法:

<style type="text/css" media="screen">
@import url("text.css");
</style>

link  语法:

<style type="text/css" >
<link href="text.css"/>
</style>

那么这 两种引入方式有什么区别么?

首先:它们的相同点:从外部引入文件,易于维护,当很多相同标签需要改同一个属性时,在css文件中只需改动一处即可。

区别:

@@@@@@@@@

link 是html的一个标签,而@import是css的一个标签。

1、@import 只是css提供的一种方式,只是加载css,link  除了加载css外,还可以定义rel连接属性,定义rss属性.

2、加载顺序的问题:页面加载时,link的css会同时加载,而@import 的css会在html下载完成后才开始加载(在网速慢的时候,浏览器加载页面可能会出现没有样式的情况)。

3、link标签兼容性问题,而@import是在css2.1以后提出的,对于老版本浏览器,会出现不支持况,对于IE5以后的版本能支持。

4、使用JavaScript控制DOM去改变样式的时候,只能使用link  ,@import 不是DOM可控制的。

5、@import 可以在css中再次引入其他样式表。

css中的@inport 与link的更多相关文章

  1. CSS中a标签样式的“爱恨”原则

    CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: 1 :link 2 :visited 3 :h ...

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

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

  3. 【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序

    以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大 ...

  4. css中import与link用法区别

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

  5. CSS中link和@import的区别是:

    Link属于html标签,而@import是CSS中提供的 在页面加载的时候,link会同时被加载,而@import引用的CSS会在页面加载完成后才会加载引用的CSS @import只有在ie5以上才 ...

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

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

  7. CSS中link与import的区别

    一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/st ...

  8. CSS中@import与link的具体区别

    我们知道在网页中引用外部CSS有两种方式:@import和link 我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 link:link就是把外部CSS与网页连接起 ...

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

    差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加 ...

随机推荐

  1. AsyncSocket的长连接使用

    使用背景:需要跟服务器长期保持连接进行即时通讯:还有在跟智能硬件建立实时链接进行同步智能硬件的状态等,最近我就做项目就碰到需要实时更新智能硬件的状态(比如智能硬件的电量,以及其它工作状态),跟智能硬件 ...

  2. Dojo实现Tabs页报错(一)

    1.在用Dojo写tab页的过程中出现了一些错误 dojo源码如下: <%-- Document : grid Created on : 2013-12-15, 18:05:47 Author ...

  3. xcode6编译cocos2dx项目出现Undefined symbols _fwrite$UNIX2003

    当xcode6编译cocos2dx的时候会出现Undefined symbols _fwrite$UNIX2003 这个问题.google了一篇文章:http://stackoverflow.com/ ...

  4. 6.PHP 教程_PHP数据类型

    PHP数据类型 String(字符串),Integer(整型),Float(浮点型),Boolean(布尔型),Array(数组),Object(对象), NULL(空值). PHP字符串 一个字符串 ...

  5. kali nessus 安装插件失败解决方法

    code码获取: http://www.tenable.com/products/nessus/select-your-operating-system 首先切换到nessus安装目录下: 1.nes ...

  6. GCD 之 同步 异步 并发

    1. dispatch_async(dispatch_get_global_queue(, ), ^{ // 处理耗时操作的代码块... //通知主线程刷新 dispatch_async(dispat ...

  7. (Problem 70)Totient permutation

    Euler's Totient function, φ(n) [sometimes called the phi function], is used to determine the number ...

  8. 射频识别技术漫谈(11)——Mifare系列卡的共性

    Mifare是NXP公司生产的一系列遵守ISO14443A标准的射频卡,包Mifare S50.Mifare S70.Mifare UltraLight.Mifare Pro.Mifare Desfi ...

  9. HDU 1000 A + B Problem

    #include int main() { int a,b; while(scanf("%d%d",&a,&b)!=EOF) printf("%d\n&q ...

  10. Qtwebkit配置,设置交叉编译环境 - croop520的专栏 - 博客频道 - CSDN.NET

    Qtwebkit配置,设置交叉编译环境 - croop520的专栏 - 博客频道 - CSDN.NET Qtwebkit配置,设置交叉编译环境 分类: Qt Webkit 2012-04-12 15: ...