`

CSS link和@import的区别

    博客分类:
  • CSS
 
阅读更多
页面中使用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:link支持使用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引用css文件方法的区别

    link 和 @import 引用 CSS 文件方法的区别 在 HTML 中,-link 和 @import 是两种常用的引用 CSS 文件的方法,但它们之间存在着一些区别。在本文中,我们将详细介绍这两种方法的异同。 一、link 元素 link 元素是 ...

    CSS中link和@import的区别说明

    我们都知道link与@import都可以引入css样式表,那么这两种的区别是什么呢?先说说它们各自的链接方式,然后说说它们的区别~~~ link链入的方式: CSS Code复制内容到剪贴板 &lt;link rel=stylesheet type=text/...

    css中link和@import的区别分析详解

    导入CSS文件主要有两种方式: 链接式(link) 代码如下 复制代码代码如下: &lt;link rel=”stylesheet” href=”style.css” type=”text/css”/&gt; 导入式(@impot) 复制代码代码如下: &lt;style type=”text/...

    href和src、link和@import的区别详解

    在HTML和CSS的世界里,`href` 和 `src`、`link` 和 `@import` 是两个关键的概念,它们在创建动态和静态网页时扮演着重要角色。理解这些概念的区别对于优化网页性能和布局至关重要。 首先,让我们来看一下 `href` 和...

    link和@import的区别深入探讨

    link和@import是Web开发中用于将CSS样式表链接到HTML文档的两种常用方法,它们虽然在功能上有相似之处,但是在使用上有明显的不同点。 首先,link是HTML/XHTML中定义的一个标签,它不仅可以用于引入CSS文件,还可以...

    深入理解CSS中的@import

    link rel=stylesheet href=style.css /&gt;  2.CSS中@import CSS Code复制内容到剪贴板 @import style.css;  第一种方式最为常见最为主流,第二种方式则很少见到有人这么写,因而也常被开发工程师所忽略。这...

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

    其中,通过link标签和@import语句导入CSS文件是最主要的两种方法。虽然两者的目的相同,但它们在使用方法、性能表现、兼容性以及JavaScript交互方面存在显著差异。 1. 标签与CSS规则的区别 link是XHTML中用于链接...

    css link与@import区别详解

    导入式-link 导入式-@import 1.行内式。即在html标签中的style属性中设置css,值得注意的是css代码的名值对儿用冒号:来连接,用分号分离不同的css样式。这种方式虽然便于观看与调试,但是它违背了结构与表现相分离...

    浅谈css和@import区别及用法

    css和@import都是调用外部样式表的方法。 一、用法 (1)link: &lt;link rel="stylesheet" type="text/css" href="css文件路径"/&gt; (2)@import: 方法一(html中添加): &lt;style type="text/css"&gt; @import ...

    CSS两种方式link和@import

    CSS有两种主要的引入方式,即`&lt;link&gt;`标签和`@import`规则。这两种方法虽然都能达到同样的效果,即引入外部样式表,但在实际应用中,它们之间存在一些差异。 首先,`&lt;link&gt;`标签是HTML文档的一部分,它被用来定义...

    CSS什么时候用import什么时候用link 有何区别

    ### CSS中的`@import`与`&lt;link&gt;`的区别及应用场景 #### 一、概述 在Web开发中,尤其是在处理样式表(CSS)时,我们常常会遇到两种引入外部CSS文件的方法:`@import`和`&lt;link&gt;`。这两种方法虽然都能达到引入样式的...

    引入CSS的方式有哪些?link和@import的有何区别应如何选择

    综上所述,虽然`&lt;link&gt;`和`@import`在功能上都能实现CSS文件的引入,但从性能和兼容性角度出发,更推荐在大多数情况下使用`&lt;link&gt;`标签进行外部样式表的引入。特别是在网站流量较大、对加载速度和兼容性有较高要求的...

    web前端优化时为什么不建议使用css @import

    然而,尽管使用@import能够帮助我们更好地组织和管理CSS文件,但在Web前端优化中,它的使用常常被建议避免。为什么呢? 其主要原因在于浏览器加载CSS的方式上。当@import语句被放置在一个外部样式表中时,浏览器...

    CSS @import与link的具体区别

    在CSS中,引用外部样式表主要有两种方法:`@import`和`link`。这两种方法在功能和使用场景上存在一些差异。 首先,`link`元素是HTML的一部分,用于将外部CSS文件链接到HTML文档中。它的基本语法是: ```html &lt;link ...

Global site tag (gtag.js) - Google Analytics