原文出处:http://www.divcss5.com/rumen/r431.shtml
这里link与@import介绍的是html引入css的语法单词。两者均是引入css到html的单词。
一、了解基本
1、link语法结构
<link href="CSSurl路径" rel="stylesheet" type="text/css" />
实际应用截图:
2、@import语法结构
1)、在html中
<style type="text/css">
@import url(CSS文件路径地址);
</style>
@import在html中使用截图
2)、在css中
直接使用
@import url(CSS文件路径地址);
import在CSS代码或CSS文件中使用截图
在css和html中均可以使用@import
二、link与@import区别与选择
首页link和import语法结构不同,前者<link>是html标签,只能放入html源代码中使用,后者可看作为css样式,作用是引入css样式功能。import在html使用时候需要<style type="text/css">标签,同时可以直接“@import url(CSS文件路径地址);”放如css文件或css代码里引入其它css文件。
本质上两者使用选择区别不大,但为了软件中编辑布局网页html代码,一般使用link较多,也推荐使用link。
补充:
但凡事不能绝对,见《Css小笔记-不要使用@import》的摘抄
不要使用@import
这。。坑爹呢,看了一大堆,结果告诉我不要使用! 这也只是个建议,因为import的确会带来一些问题,所以网络上会有各种「抵制@import」的文章,既然设计了@import,总有它的有用之处,不能过于绝对。
使用@import影响页面性能的地方主要体现在两个方面:
1. 影响浏览器的并行下载
2. 多个@import导致下载顺序紊乱
3. 只有程序解析到@import才会解析
在实际项目中,使用css时候,顶部写了多个@import,同时页面引入十几个组件,每个组件都同时又引入css,多个css中都使用类@import。
最后导致打开页面的时候,会出现页面报错无法显示的情况。
解决办法
使用scss将多个css合并为一个文件导出,或者多次使用import导入css,由于webpack抽象树过滤的特性,会自动处理掉相同导入文件;