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

【问题标题】：Is is possible to embed 2 or more style sheets in one link tag?是否可以在一个链接标签中嵌入 2 个或更多样式表？
【发布时间】：2020-03-24 08:17:52
【问题描述】：

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">

这可能吗？浏览器是否支持在一个链接标签中嵌入多个样式表？

【问题讨论】：

否，但您可以将所有文件连接到一个文件中。
补充@AmauryHanser 所说的内容。连接文件是一个好主意。您可以一次性手动完成，但如果项目增长，您可以使用称为packager/bundler 的东西。这几乎是大多数现代网络应用程序使用的。根据您的项目，Webpack、parceljs、gulp、bower 等都适合您。
@RohanBüchner 我同意。在我的工作流程中，我使用 gulp 来连接和缩小我的文件。这样一来，您就可以保持其来源不变，并在服务器上上传最小的文件。

标签： html css

【解决方案1】：

不，不可能在 one <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 文件。

【讨论】：

当然，@import 有 7 个字符长，而部分则更长。然而，正如 Amaury Hanser 在 cmets 中的回答一样，在最终代码中将所有样式表连接到一个文件中效率更高。因为它甚至不需要“@import”。

【解决方案2】：

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

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

查看 Parcel 作为初学者友好的 Web 应用程序捆绑器

还可以使用更多高级选项 https://gulpjs.com 或者 https://webpack.js.org

【讨论】：

【解决方案3】：

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

您可以在以下链接中阅读有关链接属性的更多信息： https://www.w3schools.com/jsref/dom_obj_link.asp

【讨论】：

【解决方案4】：

不，不可能用一个链接标签添加两个或多个样式表。

【讨论】：

【解决方案5】：

不，这是不可能的，如果这样做，您将收到一个链接错误，您可以在 chrome 的网络选项卡中看到它 chrome screenshot

【讨论】：