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

@import调用css和link href调用有什么区别?(转)

    博客分类:
  • css
阅读更多

大家去分析一些大站的css代码时,都会发现调用css有以下两种方法:

方法一:

<style type="text/css">
<!--
@import url("css/main.css");
@import url("css/font.css");
@import url("css/layout.css");
-->
</style>

方法二: 

<link href="css/tianyi.css" rel="stylesheet" type="text/css" />

那么这两各方法有什么区别和优缺点呢?

本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。
差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同 时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁), 网速慢的时候还挺明显(梦之都加载CSS的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。
差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
/*
大致就这几种差别了,其它的都一样,从上面的分析来看,还是使用link标签比较好。
标准网页制作加载CSS文件时,还应该选定要加载的媒体(media),比如screen,print,或者全部all等。
*/
差别5:@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:

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

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

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

这样更利于修改和扩展.

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

原文:http://wintershan.iteye.com/blog/579898
分享到:
评论

相关推荐

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

    link 除了可以调用 CSS 外,还可以有其他作用,如声明页面链接属性、声明目录、RSS 等等,而 @import 只能调用 CSS。 在使用上,link 和 @import 都可以用来引用外部的样式文件,但它们的应用场景不同。link 通常...

    浅谈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 调用其它css

    总结来说,CSS调用其他CSS是通过外部引用(`&lt;link&gt;`标签)或内部引用(`@import`规则)实现的,可以有效地管理和复用样式,提高代码组织性。同时,利用CSS预处理器,如Sass和Less,可以进一步提升开发效率和代码质量...

    unigui_调用外部js与css

    本主题聚焦于如何在Unigui项目中调用外部JavaScript(js)和样式表(css)资源,这对于扩展功能、引入第三方库或者实现自定义样式是必要的。 首先,理解Unigui的基础架构是关键。Unigui基于Vue.js,Vue.js是一个...

    关于css @import url()总结

    一开始是由于一个兼容问题: @import url(/css/a.css) 很简单但出现了兼容问题,在ff下无法调用样式,大家都以为是@import搞的怪,但用link后问题依然出现。经过一番讨论原来是绝对路径在ff下是不认的。 对@...

    css及js调用方法详细汇总

    需要注意的是,使用@import可能会比使用&lt;link&gt;有轻微的性能影响,因为浏览器必须下载并解析CSS文件才能发现@import指令。 接下来看JavaScript的调用方法: 1. 标签 在HTML中使用标签调用JavaScript代码。可以将...

    CSS层叠样式表

    &lt;link rel="stylesheet" href="styles.css" type="text/css"&gt; ``` 4. 输入样式表:使用`@import`语句在CSS文件中导入其他CSS文件,可以合并多个样式表,但应谨慎使用,因为它会增加页面加载时间。 ```css @import ...

    CSS定义问题.docx

    引入 CSS 样式有四种方法:使用 `&lt;link&gt;` 标签、使用 `@import` 语句、使用内联样式块和使用外部样式表。例如 `&lt;link rel="stylesheet" type="text/css" href="a.css"&gt;`、`@import url("a.css");`、`&lt;style&gt;&lt;!–h1{...

    学习使用CSS/十分钟学会CSS

    - **双表法调用**:同时使用`&lt;link&gt;`标签和`@import`规则,引入多个外部样式表。 4. **CSS基本语法**: - **选择符(selector)**:选取需要应用样式的HTML元素,可以是元素名、类名、ID名或其他更复杂的组合。 ...

    javascript实现动态导入js与css等静态资源文件的方法.docx

    我们可以这样调用 `$import` 函数: ```javascript // 加载 CSS 文件 $import(null, 'style.css', function() { console.log('CSS loaded'); }); // 加载 JS 文件 $import(null, 'functions.js', function() { ...

    媒体查询资料整理

    &lt;link rel="stylesheet" type="text/css" href="style.css" media="screen" /&gt; &lt;link rel="stylesheet" type="text/css" href="style.css" media="print" /&gt; ``` 这里,“screen”通常用于桌面浏览器和大多数现代...

    Less详解.pdf 电子书文档

    客户端安装:可以在 HTML 中添加 `&lt;link rel="stylesheet/less" type="text/css" href="styles.less" /&gt;`,然后下载 less.js 并将其引入 `&lt;head&gt;` 元素内,例如 `&lt;script src="less.js" type="text/javascript"&gt;&lt;/...

    同级情况下CSS的优先级探讨

    3. **link链接式**:通过`&lt;link rel="stylesheet" href="styles.css"&gt;`标签引入外部CSS文件,这些样式通常放在`&lt;head&gt;`中,优先级与内嵌式相同,但会受到引入顺序的影响。 4. **@import导入式**:在内嵌样式表中...

    js css优化工具Web20Tool2010

    在IT行业中,优化JavaScript(JS)和CSS代码对于提高网页性能和用户体验至关重要。"Web20Tool2010"可能是一个早期的工具集,旨在帮助开发者优化他们的JS和CSS代码,以适应2010年左右的技术环境。尽管这个工具可能...

    CSS笔记-011

    外部样式则是把CSS放在单独的.css文件中,然后通过&lt;link&gt;标签或@import指令引入到HTML文档。 选择器是CSS的核心之一,分为基础选择器和复杂选择器。基础选择器包括标签选择器、类选择器和ID选择器。标签选择器按...

    CSS基础教程

    4. **双表法调用样式表**:同时使用`&lt;link&gt;`标签和`@import`规则,允许在一个页面中引入多个CSS文件,提高样式管理的灵活性。 **CSS基本语法** CSS的定义由三部分构成:选择符(selector),属性(properties)和...

    清理无用的CSS样式比较有用的几个工具

    Dust-Me是一个很有用也很好用的Firefox插件,它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。 支持本地和远程样式文件,包括使用link标签、&lt; ?xml-stylesheet?&gt;处理指令、@import语句...

    javascript实现动态加载CSS.docx

    在Web开发中,动态加载CSS是一项重要的技术,它允许我们在页面加载时只加载必要的样式,提高页面的性能和用户体验。JavaScript提供了一种方式,让我们能够在运行时根据需要异步加载CSS文件。以下将详细解释如何使用...

    require-css-respond:require-css 兼容IE Respond

    (原项目的respond.js必须在所有CSS加载完后再调用,这不符合require-css的意义)respond.js 源项目在require-css 源项目在css.min.jsrequire-css 使用此文件,兼容IE respond.js因respond.js只认link标签,所以修改...

    Web前端优化最佳实践及工具集锦

    &lt;link rel="stylesheet" href="style.css" type="text/css"&gt; ``` ##### 3. 避免使用document.write **问题描述:** 在JavaScript中使用`document.write` 来插入内容或调用外部资源时,浏览器需要额外的步骤来处理...

Global site tag (gtag.js) - Google Analytics