css外部样式加载Link与import的区别
发布时间：2010-06-17 22:25:58 作者：佚名 
我要评论
我要评论我们引用css文件通常有两种方式:link,@import 这两天整理了一下这两种用法的区别，加深认识
第一点:引用方式
首先看link
<link rel="stylesheet" type="text/css" href="https://www.jb51.net/style.css" />
最常见的link引用方式，分别解释一下没一个属性先
rel:告诉浏览器引用的是一个样式表文件
type:文件类型
href:文件地址
@import
<style type="text/css">@import url(https://www.jb51.net/style.css);</style>
只能写引用样式表的名称
第二点:加载顺序
link是页面加载时候的同时加载
@import是在整个页面加载完之后加载css文件的，如果页面加载很慢，会出现一开始无样式
第三点:浏览器的兼容性
@import是css2.1提出的，只在ie5以上才能识别，link不存在这个问题
第四点：使用js的dom控制样式时候，只能用link
基本就这些了，如果还有，欢迎大家提出，谢谢!
如无特殊需求推荐用link
首先看link
<link rel="stylesheet" type="text/css" href="https://www.jb51.net/style.css" />
最常见的link引用方式，分别解释一下没一个属性先
rel:告诉浏览器引用的是一个样式表文件
type:文件类型
href:文件地址
@import
<style type="text/css">@import url(https://www.jb51.net/style.css);</style>
只能写引用样式表的名称
第二点:加载顺序
link是页面加载时候的同时加载
@import是在整个页面加载完之后加载css文件的，如果页面加载很慢，会出现一开始无样式
第三点:浏览器的兼容性
@import是css2.1提出的，只在ie5以上才能识别，link不存在这个问题
第四点：使用js的dom控制样式时候，只能用link
基本就这些了，如果还有，欢迎大家提出，谢谢!
如无特殊需求推荐用link
相关文章
- link与@import这两种方式都是为了加载CSS文件,但还是存在着细微的差别。下面脚本之家小编给大家介绍CSS中link和@import的区别说明，感兴趣的朋友一起看下吧2016-08-12
- 下面小编就为大家带来一篇浅谈CSS 权值 层叠 重要性(!important)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-05
- 这篇文章主要介绍了CSS中的@import,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-07-14
- !important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用.!important提升优先级，下面对它的用法做下总结2014-08-08
- 这篇文章主要介绍了加了important标记css样式的jQuery写法，需要的朋友可以参考下2014-07-16
- 使用!important对于性能并没有什么负面影响。但是从可维护性角度考虑还是少用这个规则。不过这个规则在IE6中有bug2014-06-05
- 一直以来写CSS的时候都没有过多的考虑使用@import的方式,最近又看到有朋友在讨论关于@import的一些好坏，以及要不要使用@import的方式加载样式,需要的朋友可以了解下2012-12-12
- 本文章详细的介绍了关于link和@import的区别，有需要了解的朋友可以参考一下本文章2012-03-31
- 很多人，包括很多网站（我所见过的所有网站，包括国内著名的‘网页设计师’网站），都说important是不被IE所支持和认识的，可是真的是这样吗？看了下边的两个例子，也许你2010-01-05
Webpack 中 css import 使用 alias 相对路径的方法
在 Vue 项目中，我们通常使用 vue-webpack 脚手架生成工程模板，然后配置 @ 为项目根目录下放资源和源码的 /src 目录的别名。这篇文章给大家介绍Webpack 中 css import 使2018-07-24
最新评论