差别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 文件方法的区别 在 HTML 中,-link 和 @import 是两种常用的引用 CSS 文件的方法,但它们之间存在着一些区别。在本文中,我们将详细介绍这两种方法的异同。 一、link 元素 link 元素是 ...
在CSS中,`link` 和 `@import` 都是用来引入外部样式表的两种方法,但它们在使用和效果上存在一些显著的区别。下面将详细阐述这些差异。 1. **功能差异**: - `link` 是一个HTML标签,不仅用于加载CSS文件,还可以...
在CSS中,引入外部样式表主要有两种方法:`<link>`标签和`@import`规则。两者虽然都能实现样式表的引入,但在使用场景、执行顺序、兼容性以及与JavaScript的交互等方面存在显著差异。 首先,`<link>`标签是HTML的一...
在CSS中使用@import时,URL的引用方式会影响其兼容性。一般来说,使用url括号的方式(例如@import url("style.css");)的兼容性最好,且推荐使用无引号(单引号或双引号)的格式。而带单引号或双引号且不使用url的...
`href` 是“Hypertext Reference”的缩写,它主要用于创建超文本链接,例如在 `<a>` 标签中定义链接的目标地址,以及在 `<link>` 标签中引入外部样式表。例如: ```html 访问示例网站 <link href="style.css" rel=...
在CSS中,引用外部样式表主要有两种方法:`@import`和`link`。这两种方法在功能和使用场景上存在一些差异。 首先,`link`元素是HTML的一部分,用于将外部CSS文件链接到HTML文档中。它的基本语法是: ```html <link ...
在Web开发中,尤其是在处理样式表(CSS)时,我们常常会遇到两种引入外部CSS文件的方法:`@import`和`<link>`。这两种方法虽然都能达到引入样式的目的,但在实际应用中却有着不同的特性和适用场景。 #### 二、`@...
两者的第一个区别在于起源:`<link>`是HTML的原生元素,而`@import`是CSS2.1引入的一个特性。这意味着`<link>`有更多的用途,它可以用于非CSS资源,而`@import`只能导入CSS。 其次,加载顺序也是一个关键差异。当...
css和@import都是调用外部样式表的方法。 一、用法 (1)link: <link rel="stylesheet" type="text/css" href="css文件路径"/> (2)@import: 方法一(html中添加): <style type="text/css"> @import ...
它的优势是可以在一个CSS文件中引用其他的CSS,从而组织样式表。 区别和选择建议: - `link`属于HTML标签,而`@import`是CSS规范的一部分。 - `link`在页面加载时同时加载CSS文件,而`@import`则会在页面加载完毕后...
在Web前端优化的讨论中,经常出现的一个建议是避免使用CSS中的@import指令。这一建议背后的理由和原理,是本文的重点内容。 首先,我们需要了解CSS @import是什么,以及它的作用。CSS @import是一个用来导入其他CSS...
最常见的link引用方式,分别解释一下没一个属性先 rel:告诉浏览器引用的是一个样式表文件 type:文件类型 href:文件地址 @import <style type=text/css>@import url(https://www.jb51.net/style.css);<...
关于CSS中的`@import url()`,这是一个用于引入外部样式表的指令,它的使用与`<link>`标签在某些方面有所不同,且存在一定的兼容性和性能差异。以下是对`@import url()`进行的详细总结: 1. **加载机制**: `@...
1. **全局引入**:在`main.css`或`index.css`这样的全局样式表中,可以使用`@import`规则引入外部CSS。例如: ```css @import 'path/to/your/external-css-file.css'; ``` 这将使所有组件都能访问这些样式。 2....