调用css时,用link 和 @import url 有什么区别
加载css link与@import的区别:
其实 link 与 @import 在显示效果上还是有很大区别的,基本上来看 link 的加在会在页面显示之前全部加在完全,而 @import 会是读取完文件之后加在,所以如果网速很好或很快的情况下,会出现先开始无css定义,而后加载css定义。@import加载页面时开始的瞬间会有闪烁(无样式表的页面),然后才恢复正常(加载样式后的页面),Link没有这个问题。
他们从方法上是一样的,只是在浏览器识别上有点差距,link在支持CSS的浏览器上都支持而@import只在5.0以上的版本有效,而且还能用于浏览器过滤也就是hack的使用,兼容一些老版本的浏览器。所以最好还是使用link通用型更强,但是对于高版本的浏览器,也就是现在的浏览器来说,其实都一样,这是个没有太大意义的区分 。
例外一个说明:
@import url(/css/a.css) 很简单但出现了兼容问题,在ff下无法调用样式,大家都以为是@import搞的怪,但用link后问题依然出现。经过一番讨论原来是绝对路径在ff下是不认的。
下面对@import url()做一下总结:
1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。
2,@import 是css2里面的,所以古老的ie5不支持。
3,当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
4,link除了能加载css外还能定义RSS,定义rel连接属性,@import只能加载css
所以我认为结合来使用就最好,比如:<link href="css/main.css" rel="stylesheet" type="text/css">
引用了一个main.css文件,在main.css里面再引用@import url(footer.css);@import url(head.css);
这样达到一个清晰明了的作用.
调用css时,用link 和 @import url 有什么区别的更多相关文章
- 前端深入之css篇|link和@import到底有什么区别?
写在前面 在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式. 而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式 ...
- link和import导入外部样式的区别
1.结构 link语法结构 <link rel="stylesheet" href="CSSurl" type="text/css" ...
- link 和 import 导入外部样式的区别
差别一:link 属于 XHTML 标签,而 @import 完全是 CSS 提供的 一种方式.link标签除了可以加载 CSS 外,还可以做很多事情,比如定义 RSS ,定义 rel 链接属性等. ...
- link和@import引入外部样式的区别
原文: 简书原文:https://www.jianshu.com/p/14f99062f29a 大纲 前言 1.隶属上的差别 2.加载顺序的不同 3.兼容性上的差别 4.使用DOM控制样式时的差别 5 ...
- CSS文件引入link和@import 区别
1.(本质区别)link 属于 HTML 标签,而 @import 完全是 css 提供的一种导入 css 文件的规则. 2.文件加载时机有差别: 当一个页面被加载的时候,link 引用的 css 会 ...
- css中:link和@import的区别
两者都是外部引用css的方式.但是有一定的区别: 1. 从属关系:link是一个xhtml标签,除了加载css外,还可以定义 RSS.rel 连接属性等: @import属于css范畴,只能加载css ...
- css 样式引入的方法 link 与import的区别
<link> 元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法:1 使用<link>元素链接到 ...
- CSS引入的方式有哪些? link和@import的区别是?转载
CSS引入的方式有哪些? link和@import的区别是? HTML 中引入 CSS 的方式 有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS ...
- @import url(../image/css)的用法
1.@import url(../image/css);可以加载css文件2.@import url(../image/css);可以写在html里加载css文件,也可以写在css文件里加载css文件 ...
随机推荐
- search搜索功能
1.html <div class="search"> <form name="formsearch" action=" ...
- day05-java-(循环问题,数组)
day05-java-(循环问题,数组) 1.三种循环结构的更佳适用情况: 1)while: "当..."循环 2)do...while: "直到..."循 ...
- Python-S13作业-day3-之编辑ha.conf配置文件
Python-S13作业-day3-之编辑ha.conf配置文件 需求: 让用户输入字符串类型的字典,实现对配置文件指定,backend www.oldboy.org下的内容进行 * 查询 * 增加 ...
- java中String.valueOf()和toString()方法的区别
http://www.ztyhome.com/android-tostring-string-valueof-diff/
- JavaScript : 基本的处理事件
JavaScript 事件参考手册:属性 当以下情况发生时,出现此事件onabort 图像加载被中断 onblur 元素失去焦点 onchange 用户改变域的内容 o ...
- jboss\server\default\.\tmp 拒绝访问 axis2
下载axis2.war包. 下载jboss-4.2.3.GA.zip和jboss-5.0.1.GA.zip两个包并解压. 配置JDK后要配置JBOSS_HOME的环境变量,在Path中配置%JBOSS ...
- SwipeRefreshLayout实现上拉加载下拉刷新
package com.example.swiperefreshlayoutdemo; import java.util.ArrayList;import java.util.HashMap; imp ...
- Leetcode: Graph Valid Tree && Summary: Detect cycle in undirected graph
Given n nodes labeled from 0 to n - 1 and a list of undirected edges (each edge is a pair of nodes), ...
- 体验Java的封装性
package com.cnblogs.java; //体验Java的封装性 /* * 如下的人类年龄赋值-300岁,显然很不合理,这种直接对类的属性赋值,有时候虽然不合理但却会编译通过. * 所以我 ...
- qsort函数用法
qsort函数用法 qsort 功 能: 使用快速排序例程进行排序 用 法: void qsort(void *base, int nelem, int width, int (*fcmp)(co ...