Question

例如，我的网站有5个这样的CSS文件......

bar.Bar

该网站的每个页面都将属于其中一个“类别”（即营销，gps，车队，服务或公司）。这由HTML标记上的类指示。所以在每个页面的顶部都是这样的......

  <link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
  <link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
  <link rel="stylesheet" href="/templates/purity_iii/css/custom_fleet.css" type="text/css" />
  <link rel="stylesheet" href="/templates/purity_iii/css/custom_service.css" type="text/css" />
  <link rel="stylesheet" href="/templates/purity_iii/css/custom_corporate.css" type="text/css" />

我目前每个页面都调用上面列出的所有5个样式表，但它只需要相应的样式表，所以我希望尽可能高效。

有没有办法使用PHP（或任何有意义的东西）基本上搜索标签的类“gps”或“fleet”（等），如果，例如，它找到“gps”，我只能回应样式表，即..

<html class="gps">

Answer 1

这完全取决于PHP如何生成HTML。另一种可能性是使用JavaScript执行此操作。你可以这样做：

<script type="text/javascript">
var file = 'templates/purity_iii/css/custom_' + document.documentElement.className + '.css';

var link = document.createElement('link');
link.href = file;
link.type = 'text/css';
link.rel = 'stylesheet';

document.getElementsByTagName('head')[0].appendChild(link);
</script>

您可以将上面的代码置于<head>和</head>之间。对你的问题（PHP解决方案）不是一个真正有效的答案，但你可以将其视为另一种选择。

Answer 2

这似乎是一个糟糕的策略，虽然我不知道你的CSS文件和其他参数的大小。

这些页面的风格有多么不同？从上面的文件名看起来你可能在每个文件中有很多冗余（重复）CSS选择器。每个文件中有多少CSS实际上是唯一的？是5k吗？ 10K？ 50K？如果它相当小，请将其全部放在一个文件中。通过将其放在一个文件中，您网站所有页面的所有CSS都将缓存在用户的浏览器中，后续页面不需要其他请求。

如果组合所有文件并且您有一个500k文件而250k用于单个页面，那么拆分它会更有意义。

PHP解决方案

我猜你用PHP在<html>标签上设置CSS类。如果是这样，为什么不在PHP脚本中检查该变量的值并添加适当的CSS文件。

这样的事情：

<html class="<?php echo $page_class; ?>">
<head>
    <link href="custom_<?php echo $page_class; ?>.css">
</head>

这是一个相当普遍的建议，但希望它指出你正确的方向。

Answer 3

try something like

     <?php
     if($page_type = 'gps')
     {
     ?>
     <link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
     <?php
     }
     elseif($page_type = 'marketing')
     {
     ?>
     <link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
     <?php
     }
      ?>

如何根据页面上的特定HTML类调用特定的CSS文件？

3 个答案: