175 6191 5976

添加官方微信

领创时代关于网站建设、青岛画册设计、青岛网站设计的观点和相关新闻 将我们的想法与焦点与你共享

CSS中@import和Link什么区别

2019-10-17 来源:小领

作为网站设计和开发的专业设计和开发人员,您可能会注意到一件事,即不同的站点或者同一个站点在不同的地方,以不同的方式引用外部CSS文件。通过使用@import方法或通过Link该文件CSS文件。@import和CSS链接之间有何区别?您如何确定哪个更适合您?让我们来看看!

@import和<link>之间的区别是什么?

在决定使用哪种方法引入样式表之前,您应该了解这两种方法的意图。<link> -链接是在网页上包含外部样式表的第一种方法。它旨在将您的网页与样式表链接在一起。像这样将其添加到HTML文档的<head>中:<link href =“ styles.css” rel =“ stylesheet”>。

@import-导入允许您将一个样式表导入另一个样式表。这与链接方案稍有不同,因为您可以在链接的样式表中导入样式表。如果在HTML文档的开头包含@import,则其格式如下:<style type =“ text / css”> @ import url(“ styles.css”); </ style>
从标准的角度来看,链接到外部样式表或导入它之间没有区别。任一种方法都是正确的,并且任一种方法都将同样有效(大多数情况下)。但是,出于某些原因,您可能要使用一种方法。


为什么要使用@import?
许多年前,使用@import代替(或与它一起使用)<link>的最常见原因是,较旧的浏览器无法识别@import,因此您可以从中隐藏样式。通过导入样式表,从本质上讲,您将使样式表可用于更现代,符合标准的浏览器,同时将其隐藏在较旧的浏览器版本中。

@import方法的另一种用法是在页面上使用多个样式表,而仅在文档的<head>中包含单个链接。例如,一家公司可能对站点上的每个页面都有一个全局样式表,而子部分具有仅适用于该子部分的其他样式。通过链接到子节样式表并在该样式表的顶部导入全局样式,您不必维护一个巨大的样式表,其中包含站点和每个子节的所有样式。唯一的要求是,任何@import规则都必须位于其余样式规则之前。另外,请务必记住继承仍然是一个问题。

为什么使用<link>?
使用link的样式表的首要原因是为您的用户提供备用样式表。Firefox,Safari和Opera等浏览器均支持rel =“ alternate stylesheet”属性,当属性可用时,浏览器即可在它们之间进行切换。您还可以使用JavaScript切换器在IE中的样式表之间进行切换。出于可访问性目的,这通常与“ 缩放布局”一起使用。

使用@import的缺点之一是,如果您有一个非常简单的<head>,其中仅包含@import规则,则页面在加载时可能会显示“未样式化内容的闪烁”(FOUC)。这可能会使您的观众感到不安。一个简单的解决方法是确保<head>中至少有一个附加的<link>或<script>元素。

许多作者声明您可以使用媒体类型来隐藏旧版浏览器中的样式表。通常,他们提到这是使用@import或<link>的好处,但事实是您可以使用任一方法设置媒体类型,并且不支持媒体类型的旧版浏览器在任何情况下都不会查看它们。 

那么您应该使用哪种方法?
我们更喜欢使用<link>,然后将样式表导入外部样式表,就像当今大多数网站设计人员一样。这样,您在HTML文档中只需要调整一两行代码即可。但最重要的是,这取决于您。如果您对@import更满意,那就去用吧!两种方法都符合标准,除非您打算支持真正的旧浏览器,否则没有充分的理由使用这两种方法。

版权声明:转载此文章须经 领创时代 同意,并请附上 领创时代 及本页链接http://www.leadnov.com/newsItem.aspx?id=288
创造品牌视觉体验 X 创新IT技术赋能企业
领创帮助您创新品牌战略,让品牌成为最具价值的资产。
中国·山东 青岛市市北区郑州路43号橡胶谷A栋
热线:175 6191 5976
微信:leadnov
Copyright © 2018-2020 leadnov All Rights Reserved
鲁ICP备18056479号-1站点地图

关注领创公众平台

添加官方微信

175 6191 5976