`
jickcai
  • 浏览: 246836 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • css
阅读更多

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

差别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里,而不用外部文件。

分享到:
评论

相关推荐

    link和@import引用css文件方法的区别

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

    CSS中link和@import的区别说明

    在CSS中,`link` 和 `@import` 都是用来引入外部样式表的两种方法,但它们在使用和效果上存在一些显著的区别。下面将详细阐述这些差异。 1. **功能差异**: - `link` 是一个HTML标签,不仅用于加载CSS文件,还可以...

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

    在CSS中,引入外部样式表主要有两种方法:`<link>`标签和`@import`规则。两者虽然都能实现样式表的引入,但在使用场景、执行顺序、兼容性以及与JavaScript的交互等方面存在显著差异。 首先,`<link>`标签是HTML的一...

    link和@import的区别深入探讨

    在CSS中使用@import时,URL的引用方式会影响其兼容性。一般来说,使用url括号的方式(例如@import url("style.css");)的兼容性最好,且推荐使用无引号(单引号或双引号)的格式。而带单引号或双引号且不使用url的...

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

    `href` 是“Hypertext Reference”的缩写,它主要用于创建超文本链接,例如在 `<a>` 标签中定义链接的目标地址,以及在 `<link>` 标签中引入外部样式表。例如: ```html 访问示例网站 <link href="style.css" rel=...

    CSS @import与link的具体区别

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

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

    在Web开发中,尤其是在处理样式表(CSS)时,我们常常会遇到两种引入外部CSS文件的方法:`@import`和`<link>`。这两种方法虽然都能达到引入样式的目的,但在实际应用中却有着不同的特性和适用场景。 #### 二、`@...

    CSS两种方式link和@import

    两者的第一个区别在于起源:`<link>`是HTML的原生元素,而`@import`是CSS2.1引入的一个特性。这意味着`<link>`有更多的用途,它可以用于非CSS资源,而`@import`只能导入CSS。 其次,加载顺序也是一个关键差异。当...

    浅谈css和@import区别及用法

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

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

    它的优势是可以在一个CSS文件中引用其他的CSS,从而组织样式表。 区别和选择建议: - `link`属于HTML标签,而`@import`是CSS规范的一部分。 - `link`在页面加载时同时加载CSS文件,而`@import`则会在页面加载完毕后...

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

    在Web前端优化的讨论中,经常出现的一个建议是避免使用CSS中的@import指令。这一建议背后的理由和原理,是本文的重点内容。 首先,我们需要了解CSS @import是什么,以及它的作用。CSS @import是一个用来导入其他CSS...

    css外部样式加载Link与import的区别

    最常见的link引用方式,分别解释一下没一个属性先 rel:告诉浏览器引用的是一个样式表文件 type:文件类型 href:文件地址 @import <style type=text/css>@import url(https://www.jb51.net/style.css);<...

    关于css @import url()总结

    关于CSS中的`@import url()`,这是一个用于引入外部样式表的指令,它的使用与`<link>`标签在某些方面有所不同,且存在一定的兼容性和性能差异。以下是对`@import url()`进行的详细总结: 1. **加载机制**: `@...

    unigui_调用外部js与css

    1. **全局引入**:在`main.css`或`index.css`这样的全局样式表中,可以使用`@import`规则引入外部CSS。例如: ```css @import 'path/to/your/external-css-file.css'; ``` 这将使所有组件都能访问这些样式。 2....

Global site tag (gtag.js) - Google Analytics