使用 css 对网站样式进行精细控制答案

【问题标题】：Granular control over site styles with css使用 css 对网站样式进行精细控制
【发布时间】：2012-07-30 03:28:57
【问题描述】：

我一直在尝试找到一个好的方法来做到这一点，但到目前为止还没有找到，需要一些指导。

基本上，我现在拥有的是一个样式选择器，它为网站提供了 10 种预定义样式供用户选择。它们中的大多数都是怪诞的，只是概念的证明。

这是由 PHP 和 mysql 控制的。当用户登录并选择非默认样式时，它会添加到他们在数据库中的用户记录中。然后网站会刷新并加载所选样式。

它确实很好用，但现在我想尝试进行一些精细控制。例如，我希望用户能够选择自己的标题背景颜色、标题文本颜色、子标题颜色和一些字体大小。

这是一件相当琐碎的事情，如果我找不到实现它的方法，那就这样吧。

我最初的想法是有一个表格，其中包含大小的每个可自定义部分的列，例如字体大小、颜色等。在表格中，将是每个用户的记录。然后他们使用一些界面来挑选他们想要的东西，然后将其添加到表格中。

我的问题是如何处理从数据库中检索到的值。我本来希望将它们直接插入到 CSS 文件中，但我认为如果没有一些服务器配置更改，这是不可能的，我无法开始工作。

那么有没有人对最好的方法有任何建议，如果有的话。

问候编辑

【问题讨论】：

标签： php mysql css styles

【解决方案1】：

您可以通过两种方式将 CSS 放入 html 文件中。您可以将代码放在 <style> 标签下的标题中，也可以将 css 放在特定项目上，例如 <body style="background-image:url('file.png')">。两种方式都不需要与 .html 文件分开的 css 文件:)

【讨论】：

我确实考虑过这一点，但是我最终会在页面中的每个元素上使用 PHP，并且必须遍历每个页面并为每个页面添加相同的 php 代码。它会起作用，但如果这是我唯一的选择，我认为不值得花时间，哈哈。
那么我必须真正质疑您项目的结构。如果你在每一页上重复背景和类似的东西，那是没有意义的，你应该正确地重做。重复多次的东西应该在类或文件中，并且只调用/包含一次。因此，您只需要执行我在上面所写的操作一次。
完全正确。除非我误解了您的回答，否则您是说要在每个 HTML 标记中添加内联样式。我的结构目前处于中心位置，而且我的大部分（如果不是全部）样式都由几个 css 文件控制。我想保持这种集中化。
我在我的句子中的任何地方都不是指each。如果您有 css/html 集中式，我的回答完全符合您的需求。只需放置（我说的任何一种方式）自定义的 css（从数据库加载）来覆盖默认值 :)
对不起，一定是误会你的意思了

【解决方案2】：

对我来说最明显的选择是构建一个 PHP 脚本来动态生成样式表。只有当表中存在包含所有用户特定样式的特定用户的记录时，才会调用此方法。

例如，您可以在<head></head> 之间放置：

<?php if($user_has_style): ?><link rel="stylesheet" href="user_style.php" /><? endif; ?>

这会调用user_style.php 脚本并生成所需的样式表。您必须在 PHP 样式表的输出中添加正确的标题，它们是：

<?php header("Content-type: text/css"); ?>

这个网站可能有点用，如果你选择这个方法：http://mou.me.uk/2008/08/03/generating-dynamic-stylesheets-on-the-fly-using-php/

【讨论】：

【解决方案3】：

您有几种方法可以做到这一点。

您可以直接在 HTML 标记的 style 属性中指定 CSS 属性，但这很快就会变得乏味，因为您可能不得不在内容中间的分散区域插入代码，从而使维护更加困难。

您还可以将<style></style> 标记之间的所有样式定义放在<head> 部分中，这部分消除了将内容与演示混合的缺点。

最后，也可以使用 PHP 使用数据库信息生成 CSS 文件。重命名您的样式表 something.php，然后将其放在文件顶部：

<?php header('content-type: text/css'); ?>

这告诉 PHP 它将生成的内容需要作为 CSS 文件发送，以便用户的浏览器知道它是一个样式表。剩下要做的就是在包含您的 HTML 内容的 PHP 脚本中正确引用您的“可变”样式表：

<link href="../layout/css/something.php" 
    rel="stylesheet" type="text/css" media="all" />

这将允许你在你的“CSS”文件中使用这种东西：

body
{
  background-color:
  <?php echo $userstyle['color']; // Retrieved from database somewhere above ?>;
}

但是，如果您关心性能，后一种解决方案可能需要使用 Cache-control 标头进行一些改进，以避免在用户点击您网站中的链接时重新加载 CSS 文件。

【讨论】：

我正要自己添加一个答案，因为我最终找到了更多关于此的信息。这应该完美！我将不得不研究缓存控制。谢谢！