作为网站设计和开发的专业设计和开发人员，您可能会注意到一件事，即不同的站点或者同一个站点在不同的地方，以不同的方式引用外部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更满意，那就去用吧！两种方法都符合标准，除非您打算支持真正的旧浏览器，否则没有充分的理由使用这两种方法。