基本上,我想知道使用@import将样式表导入到现有的样式表中,而不是仅仅添加另一个样式表的优势/目的是什么…
<link rel="stylesheet" type="text/css" href="" />
文件的开头?
基本上,我想知道使用@import将样式表导入到现有的样式表中,而不是仅仅添加另一个样式表的优势/目的是什么…
<link rel="stylesheet" type="text/css" href="" />
文件的开头?
当前回答
在头部添加css样式表与使用导入功能并没有太大区别。使用@import通常用于链接样式表,这样可以轻松地扩展样式表。它可以用来轻松地交换不同的颜色布局,例如结合一些一般的css定义。我认为主要的优势/目的是可扩展性。
我也同意xbonez的评论,因为可移植性和可维护性是额外的好处。
其他回答
几乎没有理由使用@import,因为它会分别加载每个导入的CSS文件,并会显著降低网站的速度。如果你对处理CSS的最佳方式感兴趣(当涉及到页面速度时),以下是你应该如何处理所有CSS代码:
打开所有CSS文件,复制每个文件的代码 将所有代码粘贴到页面HTML头中的单个STYLE标记之间 永远不要使用CSS @import或单独的CSS文件来交付CSS,除非你有大量的代码或有特定的需要。
更多详细信息请访问:http://www.giftofspeed.com/optimize-css-delivery/
上面的效果最好的原因是因为它为浏览器创建了更少的请求,它可以立即开始呈现CSS,而不是下载单独的文件。
我使用@import的一个地方是当我处理一个页面的两个版本时,英语和法语。我将使用main.css用英文构建我的页面。在构建法语版本时,我将链接到一个法语样式表(main_fr.css)。在法语样式表的顶部,我将导入main.css,然后为法语版本中需要不同的部分重新定义特定的规则。
它们非常相似。有些人可能认为@import更易于维护。但是,每个@import都将花费您一个新的HTTP请求,其方式与使用“link”方法相同。所以在速度的背景下,它并不更快。正如“duskwuff”所说,它不能同时加载,这是一个缺点。
使用link方法,样式表可以并行加载(更快更好),而且几乎所有浏览器都支持link
import加载任何额外的css文件一个接一个(较慢),并可以给你Flash的无风格的内容
如果你使用的是CSS RESET,比如Eric Meyer的RESET CSS v2.0,在你的CSS中使用@import,这样它就能在应用你的CSS之前完成它的工作,从而防止冲突。