关于CSS的初学者问题

Question

我正在创建一个网站，我想要允许个性化的个人用户在某种程度上像改变字体系列，背景颜色等。问题是，我加载的默认css文件已经有了所有的默认类。现在，当我从我的数据库获取背景颜色时，如果背景颜色有空值，那么应该加载mystylesheet.css的默认css类，如果值不是null，那么我想用我的默认css覆盖它。这怎么可能呢？提前感谢:)

Answer 1

将默认的样式热加载到style标签中，然后将动态样式放入style标签中。

当不同的样式以相同的元素为目标时，使用哪种样式是由特异性决定的，如果选择器相同，则由顺序决定。使用最后找到的样式。

Answer 2

zaf提到的方法需要在您想要切换样式表时重新加载页面。如果您可以选择使用javascript，我发现一个更好的方法是在主体中添加一个类名

<body class="theme-1">
  <div class="main"><div>
</body>

然后，每个样式表都应该在声明中包含主题名称：

--teme1.css

.theme-1 div.main {
  background-color: #eee
}

--teme2.css

.theme-2 div.main {
  background-color: #f30
}

要切换样式表，只需删除旧的主题名称并添加要使用的主题即可。

然后，如果您为用户提供一个界面来自定义页面的外观，您甚至可以动态添加样式表。

新的改进答案：

我刚刚在extjs找到了一个很好的解决方案。它涉及到使用标签加载您想要的所有样式表。诀窍在于，您可以在link元素上设置disabled属性，这将导致它不能应用。

例如，使用firebug并查看

http://www.extjs.com/deploy/dev/examples/themes/index.html

查找styleswitcher.js并查看函数setActiveStyleSheet

function setActiveStyleSheet(title) {
  var i,
     a,
     links = document.getElementsByTagName("link"),
     len = links.length;

  for (i = 0; i < len; i++) {
    a = links[i];
    if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if (a.getAttribute("title") == title) a.disabled = false;
    }
  }
} 

Answer 3

编辑：Reason for CSS property precedence?

一种方法是从php脚本动态生成css文件。

您将包含如下文件：

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

css.php文件将如下所示：

<?php
header('Content-type: text/css');
// whatever you want to ouput depending on the user
?>