Html 如何将多个CSS组合成一个CSS

在一个HTML文件中，我得到了以下css文件

 <link href=style.css rel=stylesheet>
<link href="css/responsive.css" rel=stylesheet>
<link href="css/custom.css" rel=stylesheet>
<link href='css/fonts.css' rel=stylesheet type='text/css'>
<link rel="shortcut icon" href="">
<link href="css/jquery-ui.css" rel=stylesheet>

当我运行gtmetrics工具进行页面优化时，它说

此页面有7个外部样式表。试着把它们合在一起

我试着把它们梳理成一个

<link  type="text/css" href="reset.css,css/style.css,css/responsive.css,css/custom.css,css/fonts.css,css/jquery-ui.css" rel=stylesheet>

但是css没有加载，请告诉我如何将它们合并为一个。

请检查

您可以组合多个CSS/JS文件，而无需实际组合它们

示例：

创建一个新的css文件并将其命名为main.css

将以下内容作为main.css的内容：

最终，您只需将html文件链接到main.css

您提供的结果代码如下所示：

<link href="main.css" rel=stylesheet>
<link rel="shortcut icon" href="">

---

请注意，这是为了添加favicon，与链接css文件有点不同。

我们的想法不是引用一个链接标签中的所有文件，而是将所有内容合并到一个css文件中……要组合它们，请使用node.js modulesGulp、Grunt等，这样人们会讨厌这个答案，因为它不需要大量工具，但是为什么不只是在构建过程中运行cat example1.css example2.css>global.css webpack也会做类似的事情，但它有点沉重，我总是怀疑是否会在代码中添加这么多东西。作为一个例子，我注意到流行的css加载程序/样式加载程序似乎会大大增加文件大小。我看到很多人对这些都很疯狂，最疯狂的是你在看到的和实际运行的之间增加了相当多的复杂性。如果理解正确，即使你正在使用这个工具，你也不能像这样使用它：/css/style.css，css/main.css。它仍然需要是一个有效的URL。您可以将src属性设置为http://example.org/min/f=min/quick-test.js。服务器将在一个文件中返回所有脚本。但是，这并不会加快速度。相反，这会减慢速度。。因为每个css都是串行加载的，而不是并行加载的

<link href="main.css" rel=stylesheet>
<link rel="shortcut icon" href="">