@import调用css与link调用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" />

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

 

差别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可以控制的。

 

 

差别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.javaeye.com/blog/579898

 

时间: 2025-01-20 12:44:25

@import调用css与link调用css的区别的相关文章

CSS样式不能调用

问题描述 在代码中写了<linkrel="stylesheet"type="text/css"href="css/niceforms-default.css"/>没有用,调用不到这个css文件,文件已经在目录下,但是把css内容copy到head里面是可以用的,不清楚到底是怎么回事 解决方案 解决方案二:浏览器清下缓存看看.用fiddler看下浏览器有没有请求这个css解决方案三:输出的html帖出来看下解决方案四:<linkr

link中能绕开事件直接调用它对应的函数么?请问怎么调用?不想调用事件。

问题描述 link中能绕开事件直接调用它对应的函数么?请问怎么调用?不想调用事件. link中能绕开事件直接调用它对应的函数么?请问怎么调用?不想调用事件. 解决方案 http://www.cnblogs.com/icyJ/p/Reflection.html

css基础教程之CSS基础语法

 我们学习CSS要明白一个重要的问题,CSS主要是解决与实现表现(CSS)与结构(HTML)的分离.我们编写完HTML之后,如何通过CSS对HTML实现控制呢. 1. 行内样式 2. 内嵌样式 3. 链接样式 4. 导入样式 我们这一节课的示例就先从行内样式开始 行内样式:就是直接在HTML上写样式,就是HTML上加属性style=""这种形式.如<p style="color:#f00">divcss8</p>,但是这种方法并不是被我们推荐

js调用百度地图及调用百度地图的搜索功能_javascript技巧

js调用百度地图的方法 代码如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&

详解DIV+CSS与表格建站的区别

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 现在全国大大小小的网站都在搞一场技术"革命",就是所谓"网站重构"说简单点就是DIV+CSS进行网站制作.用DIV+CSS代替传统的Table制作框架和美化页面.百度搜索优化在重构之前,肯定要了解为什么重构,为什么要用DIV+CSS技术?了解了这个问题,那么大家才有使用此技术重构网站的动力.各大CSS学

CSS工作原理及CSS规则命名介绍

本文为学习笔记,部分内容摘自李晓峰先生的<CSS设计指南>一书 CSS规则 一条CSS规则实际上就是一条CSS指令,这条指令先选择HTML元素,然后设定选择元素的样式 下面是一条简单的CSS规则,它把段落背景色设置为绿色 Example_1 p{background-color: green} CSS规则命名 一条CSS规则由选择符+声明两部分组成 选择符:指出要选择的元素 声明:由属性和值组成,属性指出影响元素哪方面样式,值其实就是属性的一种状态 在上面的例子中可以看出一条规则从左到右依次是

C#调用WebService服务(动态调用)

原文:C#调用WebService服务(动态调用) 1 创建WebService using System; using System.Web.Services; namespace WebService1 { /// <summary> /// Service1 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/", Description="测试服务")] [

异常-rmi通讯部分方法调用成功,部分调用失败

问题描述 rmi通讯部分方法调用成功,部分调用失败 rmi运行一段时间后,可能是几天也可能是几周.突然rmi客户端出现部分rmi方法调用不通.抛异常java.rmi.unmarshalException:error unmarshlling return;nested exception is; java.io.EOFException at sum.rmi.server.UnicastRef.invoke(UnicastRef.java:173)

CSS网页制作教程:CSS书写规范和书写顺序

文章简介:大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. CSS书写顺