css文件加载:@import和link的区别
刚看了一个百度试题:请简述CSS加载方式link和@import的区别?
平时一般都用link,也知道css的加载方式,但还真的没有仔细研究过其之间的差别,查了一些资料,大致总结如下:
@impot使用方法:
<style type="text/css">
<!--
@import url("css/main.css");
@import url("css/base.css");
-->
</style>
link的使用方法:
<link href="css/main.css" rel="stylesheet" type="text/css"/>
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。
- 老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
- 加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
- 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
- @import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:
main.css
———————-
@import “sub1.css”;
@import “sub2.css”; sub1.css
———————-
p {color:red;} sub2.css
———————-
.myclass {color:blue}这样更利于修改和扩展。
从上面的分析来看,还是使用link标签比较好。标准网页制作加载CSS文件时,还应该选定要加载的媒体(media),比如screen,print,或者全部all等。
提示:这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码,他们总会把css或js直接写在html里,而不用外部文件。
css文件加载:@import和link的区别的更多相关文章
- Js判断CSS文件加载完毕的实例教程
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...
- element-ui css 文件加载 失败(https://unpkg.com/element-ui/lib/theme-chalk/index.css,加载失败)
在main.js文件引入 import Vue from 'vue'; import Element from 'element-ui'; import 'element-ui/lib/theme ...
- vue项目build 之后,css文件加载图片或者字体文件时404的解决。
ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,di ...
- 页面无法访问 css文件加载问题
1.青奥项目的web配置: 后缀为.html和.vm的请求会被控制器拦截. 控制器没设置目标资源,所以无法访问到资源! 2.文件不能放在vm文件夹下,因为设置了视图解析,vm文件夹下的文件只有后缀为 ...
- js文件加载优化
在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. ...
- 前端设计中关于外部js文件加载的速度优化
在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...
- 如何判断css是否加载完成
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: // 代码节选至seajs functi ...
- 判断js和css是否加载完成
在通过ajax或者src动态获取js.css文件的时候,我们常常需要判断文件是否加载完成,以便进行进一步的操作,但是在检测js.css文件是否已经加载的策略上各浏览器并不统一,有很多坑,现在在这里总结 ...
- 图片预加载 js css预加载
图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden"> <script type= ...
随机推荐
- [转]SVN的trunk branch tag
Subversion有一个很标准的目录结构,是这样的.比如项目是proj,svn地址为svn://proj/,那么标准的svn布局是 svn://proj/|+-trunk+-branches+-ta ...
- apache的FileUtils方法大全
FileUtils 获取系统的临时目录路径:getTempDirectoryPath() [java] view plaincopyprint? public static String getTem ...
- CodeFirst-数据迁移-Migration
http://www.cnblogs.com/haogj/archive/2012/02/17/2356537.html 1.安装最新NuGet 2.安装EntityFramework:在程序包管理器 ...
- opencv 重用代码块记录
Created on 2013-8-7URL : http://blog.sina.com.cn/s/blog_a502f1a30101mfj4.html@author: zhxfl 转载请说明出处 ...
- ZOJ Problem Set - 1025解题报告
ZOJ Problem Set - 1025 题目分类:基础题 原题地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=10 ...
- openstack liberty 版本按照官方文档手动整合 完成后 基于dashboard-horizon 创建虚拟机报错 用CL却是成功的 网络等验证都是正确的通过启动的虚拟实例测试以成功
- Shell编程笔记
Shell编程笔记与Windows下熟悉的批处理类似,也可以将一些重复性的命令操作写成一个脚本方便处理. 修改别人的脚本,运行后遇到个问题 setenv: command not found 查证 ...
- 天津Uber优步司机奖励政策(2月1日~2月7日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Intellij IDEA调试
这段时间一直在使用Intellij IDEA, 今天把调试区工具的使用方法记录于此. 先编译好要调试的程序. 1.设置断点 选定要设置断点的代码行,在行号的区域后面单击鼠标左键即可. 2.开启调试会话 ...
- PAT 1080. Graduate Admission (30)
It is said that in 2013, there were about 100 graduate schools ready to proceed over 40,000 applicat ...