Question

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

Answer 1

在样式标记中加载默认样式，然后将动态样式放在样式标记中。

当不同样式针对相同元素时使用哪种样式由特异性决定，如果选择器相同，则按顺序确定。使用最后找到的样式。

Answer 2

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

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

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

- theme1.css

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

- theme2.css

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

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

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

新的改进答案：

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

例如，使用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
?>

初学者关于CSS的问题

3 个答案: