是否可以在一个链接标记中嵌入 2 个或更多样式表？

Question

Web 开发人员必须使用<link>标签将 CSS 样式表嵌入到网页中。有时，在管理样式时，开发人员会将样式代码分解为多个样式表，以获得最大的代码可重用性和效率。然而，html 文件甚至 css 文件应该尽可能减小其大小，因为较小的文件可以快速加载到用户设备中。当链接多个样式表时，许多教程都是这样显示的。<link rel="stylesheet" href="stylesheet1.css"><link rel="stylesheet" href="stylesheet2.css"><link rel="stylesheet" href="stylesheet3.css">但是，如果所有 3 个样式表都可以使用像这样的一个链接标记来嵌入，则可以减小 html 文件的大小。<link rel="stylesheet" href="stylesheet1.css stylesheet2.css stylesheet3.css">这可能吗？浏览器是否支持在一个链接标记中嵌入多个样式表？

Answer 1

不，一个 标签中不可能包含多个文件<link>。

在 CSS 文件中，您可以将它们菊花链到另一个文件中，但是使用@import.

假设您有这些文件：

style.css

table.css

button.css

然后你可以这样style.css做：

<!-- Including one css file into other -->

@import "table.css";

@import "button.css"; 

在 HTML 中将它们全部导入，如下所示：

<link rel="stylesheet" href="style.css" /> 

但是，您可以使用流行且功能强大的捆绑工具（例如Webpack）来捆绑 Javascript 和 CSS 文件。

Answer 2

简短的回答是：不可以。因为标签href的属性link必须是 URL 字符串，因此您不能引用多个 URL。

但这种优化可以发生在您的构建系统中。在这些构建管道中，您的开发环境中可以有多个css或js文件，但在生产中，每个文件可能只有一个优化（分块或缩小）文件。

Answer 3

不，无法使用一个链接标签添加两个或多个样式表。

Answer 4

我认为不可能在单个“href”属性中定义多个文件。此外，对于每个“href”，“rel”属性中都有其自己的关系定义。