差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。

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

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

标准网页制作加载CSS文件时,还应该选定要加载的媒体(media),比如screen,print,或者全部all等。

差别5:@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:

main.css
———————-
@import “sub.css”;
@import “sub1.css”;

sub.css
———————-
p {color:red;}

sub1.css
———————-
.myclass {color:blue}

这样更利于修改和扩展.

提示:这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码,他们总会把css或js直接写在html里,而不用外部文件。

外部引用CSS中 link与@import的区别的更多相关文章

  1. CSS中link与import的区别

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

  2. 【对比分析三】CSS中 link 和@import 的区别

    1).  link 是 XHTML 标签,无兼容问题: @import 是在 CSS2.1 提出的,只有IE5以上才能识别. 2).  语法结构不同. link (链接式)只能放入HTML源码中,语法 ...

  3. CSS中link和@import的区别

    1.link属于HTML标签,而@import是CSS提供的 2.页面被加载时link会同时被加载:而@import引用的CSS会等到页面被加载完再加载 3.@import只在IE5以上才能识别,而l ...

  4. 页面引入css用link和import的区别

    假设有一个css文件a.css,文件里的内容如下: p { font-size: 18px; } 现在分别使用两种方式引入a.css: 1.使用html的link标签 <link rel=&qu ...

  5. CSS中link和@import的使用区别

    我们都知道在html中引入外部的CSS 有2种方式,link标签和@import,他们又什么区别呢? 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML ...

  6. HTML网页设计中 link 和 @import 的区别

    页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import.外部引用CSS两种方式link和@import的方式分别是 ...

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

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

  8. 引用外部CSS的link和import方式的分析与比较

    很多网页中的 CSS 链接与引用是这样写的: <style type="text/css" media="screen"> @import url( ...

  9. css 样式引入的方法 link 与import的区别

    <link> 元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法:1 使用<link>元素链接到 ...

随机推荐

  1. python学习笔记——多进程中的锁Lock

    1 进程锁 python编程中,引入了对象互斥锁的概念,来保证共享数据操作的完整性. 每个对象都对应于一个可称为“互斥锁”的标记,这个标记用来保证在任一时刻,只能有一线程访问对象. 在python中我 ...

  2. centos7 搭建go环境

    下载go #cd /home #mkdir app #cd app #wget https://storage.googleapis.com/golang/go1.9.linux-amd64.tar. ...

  3. GraphX实现N度关系

    背景 本文给出了一个简单的计算图中每一个点的N度关系点集合的算法,也就是N跳关系. 之前通过官方文档学习和理解了一下GraphX的计算接口. N度关系 目标: 在N轮里.找到某一个点的N度关系的点集合 ...

  4. hdu 1999 不可摸数 筛选素数 两次打表

    不可摸数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  5. shell 提取mysql指定数据库下表创建语句为单文件

    dbcn="mysql -h172.16.1.194 -uroot -p123456"; db=dsp_ad_center; ii=0; ct=`$dbcn -N -e " ...

  6. 【JUnit4.10源码分析】3.4 Description与測试树

    Description使用组合模式描写叙述一个測试树.组合模式中全部元素都是Composite对象. Description有成员变量private final ArrayList<Descri ...

  7. gradle平级项目引用

    一.准备1. 新建一个gradle项目cc-core2. 新建一个gradle项目cc-util 二.场景项目cc-core引用项目cc-util 三.配置1. 项目cc-util被引用的项目什么都不 ...

  8. springboot http2

    转 Spring Boot With Http2 原文链接 http://www.jianshu.com/p/3d7ac535d6a0 拓展链接 http://www.jianshu.com/p/97 ...

  9. JEECG图表配置说明

    图表配置可以做什么? 图表配置可以通过在线配置,无需编写代码生成图形报表页面.使用highcharts.js实现,可以运行在任何现代浏览器,包括移动终端以及IE6.目前支持曲线图.柱状图等基础报表. ...

  10. 使用国内镜像composer安装laravel

    1.安装 Laravel,创建blog项目 首先先说一下直接安装的方法,要想使用这个方法,首先要FQ(这是我们的基本国情决定的).这样的安装方式有两种: ①.全局安装 使用命令Laravel Inst ...