基本上,我想知道使用@import将样式表导入到现有的样式表中,而不是仅仅添加另一个样式表的优势/目的是什么…
<link rel="stylesheet" type="text/css" href="" />
文件的开头?
基本上,我想知道使用@import将样式表导入到现有的样式表中,而不是仅仅添加另一个样式表的优势/目的是什么…
<link rel="stylesheet" type="text/css" href="" />
文件的开头?
当前回答
如果你使用的是CSS RESET,比如Eric Meyer的RESET CSS v2.0,在你的CSS中使用@import,这样它就能在应用你的CSS之前完成它的工作,从而防止冲突。
其他回答
几乎没有理由使用@import,因为它会分别加载每个导入的CSS文件,并会显著降低网站的速度。如果你对处理CSS的最佳方式感兴趣(当涉及到页面速度时),以下是你应该如何处理所有CSS代码:
打开所有CSS文件,复制每个文件的代码 将所有代码粘贴到页面HTML头中的单个STYLE标记之间 永远不要使用CSS @import或单独的CSS文件来交付CSS,除非你有大量的代码或有特定的需要。
更多详细信息请访问:http://www.giftofspeed.com/optimize-css-delivery/
上面的效果最好的原因是因为它为浏览器创建了更少的请求,它可以立即开始呈现CSS,而不是下载单独的文件。
如果你使用的是CSS RESET,比如Eric Meyer的RESET CSS v2.0,在你的CSS中使用@import,这样它就能在应用你的CSS之前完成它的工作,从而防止冲突。
在头部添加css样式表与使用导入功能并没有太大区别。使用@import通常用于链接样式表,这样可以轻松地扩展样式表。它可以用来轻松地交换不同的颜色布局,例如结合一些一般的css定义。我认为主要的优势/目的是可扩展性。
我也同意xbonez的评论,因为可移植性和可维护性是额外的好处。
出于速度考虑,最好不要使用@import在页面中包含CSS。看看这篇优秀的文章,了解为什么不去:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
此外,通过@import标记来缩小和合并css文件通常更困难,因为缩小脚本不能从其他css文件中“剥离”@import行。当你将它们包含为<link标签时,你可以使用现有的minify php/dotnet/java模块来进行缩小。
所以:使用<link />代替@import。
@Nebo在伊兹纳德米索格古尔
下面是使用@import的正确方法
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
来源:https://developer.mozilla.org/en-US/docs/Web/CSS/@import