link和@import的区别

原文地址:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html

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

XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
XML/HTML代码
<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>

两者都是外部引用CSS的方式,但是存在一定的区别:

  区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

  区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

  区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

  区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

补充:@import最优写法
@import的写法一般有下列几种:

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道,@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

【转载】link和@import的区别的更多相关文章

  1. 引入CSS文件的方式,以及link与@import的区别

    一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"&g ...

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

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

  3. 由link和@import的区别引发的CSS渲染杂谈

    我们都知道,外部引入 CSS 有2种方式,link标签和@import. 它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提起. 如今,很多学者本着知其然不欲知其所以然的学 ...

  4. 【12】link与@import的区别

    [12]link与@import的区别 link是HTML方式, @import是CSS方式 link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUC link可以通过rel=& ...

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

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

  6. link和@import的区别浅析

    我们都知道,外部引入 CSS 有2种方式,link标签和@import.它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提起. 如今,很多学者本着知其然不欲知其所以然的学习 ...

  7. link与@import的区别

    我们都知道link与@import都可以引入css样式表,那么这两种的区别是什么呢?先说说它们各自的链接方式,然后说说它们的区别~~~ link链入的方式: <link rel="st ...

  8. CSS中link与import的区别

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

  9. css引入的两种方法link和@import的区别和用法

    link和@import都是HTML中引入CSS的语法单词. 两者的基本语法 link语法结构 <link href="外部CSS文件的URL路径" rel="st ...

随机推荐

  1. 让TabelView视图中自定义的Toolbar固定(不随cell的移动而移动)

    //在viewDidLoad方法中创建Toolbartoolbar = [[UIView alloc] initWithFrame:CGRectMake(, , , )]; toolbar.backg ...

  2. spring(三)----大概是最简单的面向切面了

    面向切面编程,是spring的一大特点,可以说是spring最独特的特点了(个人认为). 记得当初学习面向切面编程的时候,可能是面向对象思想根深蒂固了,怎么也理解不了什么叫面向切面... 其实对于面向 ...

  3. What Makes a Good Programmer Good?

    I’ve worked with a lot of programmers over the years — some of them super amazing, and some distinct ...

  4. 十三、Android学习笔记_Andorid控件样式汇总

    <!-- 设置activity为透明 --> <style name="translucent"> <item name="android: ...

  5. 解决ASP.NET MVC3与FusionCharts乱码问题

    程序代码  代码如下 复制代码 <script type="text/javascript">    $(document).ready(function () {   ...

  6. SQL Server 2008R2 禁用远程连接

    很多人在开发过程中都会用多数据库(这里仅讨论MSSQL),也都会在服务器上装MSSQL,在你装上MSSQL后,机器上的1433端口就被激活了.如果你的服务器是在内网,也许不用过多的关注,如果你的服务器 ...

  7. cocos2d-x中Node中重要的属性

    Node还有两个非常重要的属性:position和anchorPoint. position(位置)属性是Node对象的实际位置.position属性往往还要配合使用anchorPoint属性,为了将 ...

  8. 数据挖掘:实用机器学习技术P295页:

    数据挖掘:实用机器学习技术P295页: 在weka软件中的实验者界面中,新建好实验项目后,添加相应的实验数据,然后添加对应需要的分类算法 ,需要使用多个算法时候重复操作添加add algorithm. ...

  9. THREE.js代码备份——线框cube、按键、鼠标控制

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  10. Word 录制宏解决粘贴网络上文字格式错乱

        本文将利用Word中的录制宏来解决 复制粘贴网络上文字格式错乱的问题.     本文宏代码取自 : 知乎 李文超,感谢他的提供. Technorati 标签: Word宏 格式修正     1 ...