Question

是否可以在html中同时包含多个css？或者确切地说，是否可以一次性包含放在目录中的所有CSS？像目前我们所做的是： -

<link type="text/css" rel="stylesheet" href="./tabs_css/navigation.css">

我需要这样的东西： -

<link type="text/css" rel="stylesheet" href="./tabs_css/*.css">

有可能吗？或者有其他选择吗？

Answer 1

您可以创建一个包含在每个页面中的主样式表，并且在该css文件中，您可以使用@import来包含其他页面。

这并没有解决必须手动包含每个css文件的问题，但至少它将其封装在主样式表中，因此您不必重复每个html文件中的所有引用。如果你添加额外的css文件，你只需要在master css中添加一个引用，所有页面都可以访问它。

示例HTML CSS参考：

<link href="master.css" type="text/css" />

示例Master CSS（master.css）：

@import url(style1.css);
@import url(style2.css);
@import url(style3.css);

详细了解when to use @import and it's compatibility with older browsers。

Answer 2

您需要在服务器端执行此操作。如果您使用的是PHP，请查看glob。

例如：

foreach (glob("path/to/css/*.css") as $css) {
    echo "<link type='text/css' rel='stylesheet' href='$css'>\n";
}

Answer 3

不可以在href中使用通配符。您需要为每个需要包含的css文件指定链接标记。

Answer 4

您可以编写一个服务器端脚本，该脚本连接目录中的所有文件并将其发送到客户端，然后将脚本放在<link>标记中。

但是，请注意语法错误。

Answer 5

客户端无法做到这一点。可以借助服务器端技术来实现。但是，最好的方法是将所有CSS合并到一个文件中并包含它如果您仍然希望将css拆分为文件，请执行许多操作并使用构建工具将所有css合并到一个文件中，仅用于生产/测试服务器

Answer 6

您可以使用php列出该目录中具有css扩展名的所有文件...

$fp = opendir($dir);
while ($file = readdir($fp)) {
        if (strpos($file, '.css',1))
            $results[] = $file;
    }
closedir($fp);

......而不是做一个foreach构造来包含css的

Answer 7

除非我弄错了，否则可以像JavaScript一样非常好（尽管仍然是手动完成）。

./styles/
   ./layouts/
      all.css      <-- Each subfolder has this
      header.css
      footer.css
      nav.css
   ./main.css      <-- Main CSS file

在./styles/layouts/all.css内是否导入：

@import 'layouts/header.css';
@import 'layouts/footer.css';
@import 'layouts/nav.css';

好的，这将CSS组织化（这是很好的恕我直言）中的次要逻辑分开了。

然后，子文件夹中有尽可能多的“ all.css”文件，只需将它们包括在内（示例）：

main.css

@import 'variables/all.css';
@import 'layouts/all.css';

我认为那还不错...

Answer 8

可能有一些可行的解决方法：

考虑导入PHP页面（例如./tabs_css/allcss.php）的想法，该页面连接并返回目录中的所有css。这可能会占用大量CPU资源。
考虑创建一个combo css文件，它是所有CSS文件的串联。这可以通过向版本控制系统添加特殊挂钩来自动创建。

如何将所有css保存在目录中？

8 个答案: