3

我负责使用我刚刚继承的大型 CSS 文件（数千个元素）为网站提供主题功能。基本上我们希望允许用户能够改变屏幕上的颜色。

每个 CSS 元素，除了颜色定义之外，还有许多其他属性——大小、字体、浮点数等……以及特定的颜色出现在各种 CSS 元素中。

如果我使用 ASP.NET 的主题功能为每个主题创建不同的 CSS 文件，我必须在所有主题中复制我的 CSS 文件，这将成为维护的噩梦。

理想情况下，我希望有一个 CSS 文件（用于维护）并且只能更改颜色属性。

这里有哪些选择？

4

6 回答 6

4

你只需要复制颜色属性，所以如果你有

a:hover
{
   text-decoration:none;
   color:Black;
   display:block    
}

在您的主题的 css 文件中，您只需要：

a:hover
{
    color:Red;
}

现在在您的页面中，您要确保仍然引用原始 css 文件，并且浏览器将合并所有样式。

于 2008-12-10T20:26:12.397 回答
1

如果差异很小，则可能的方法是 CSS 级联规则，例如：

html:

<body class="dark">
    <a ...>some text</a>
</body>

CSS：

/* default */
body { color:white }
    a { color:blue }

/* dark theme */
body.dark { color:black }
    .dark a { color:white }
于 2008-12-10T20:30:49.673 回答
1

我认为保留一个 CSS 文件可能不是一个好主意，特别是因为主题的目的是拥有多个。我建议使用两个 CSS 文件，一个基本的（你已经使用的）和当前的主题，它们在基本的文件之后被包含/链接，并覆盖你想要的与基本不同的东西。

于 2008-12-10T20:33:44.737 回答
1

像 TravisO 一样，我建议使用两个 CSS 文件……但我不会让你已经使用的基础文件。我将从您的基础数据中提取所有颜色数据并将其添加到新的“默认”主题中。

这样，您的定位细节都在一个位置，并且您的主题只有颜色信息。除了主题颜色之外，还节省了浏览器下载和解释默认颜色的时间。

于 2008-12-10T20:40:38.280 回答
0

记住：元素可以有多个样式类。由于布局保持静态并且将与着色分开，因此您希望在完全不同的文件中分别定义布局和颜色的类。

所以你想要为主题做的是在一个单独的 css 文件中定义一些颜色，如下所示：

.DefaultBackgroundColor { background-color: white; }

.PrimaryColor { background-color: #123456; }
.PrimaryAsForeground  { color: #123456; }

.AccentColor { background-color: #654321; }
.AccentAsForeground { color: #654321; }

.ComplementColor { background-color: #333333; }
.ComplementAsForeground { color: #333333; }

.DefaultTextColor { color:black; }
.HighlightTextColor { color:black; font-style:bold; }
.ComplementTextColor { color:white; }

您可以添加更多颜色，但您明白了。然后，在您的 HTML 中，除了布局类之外，您还可以将这些类添加到元素中。例如，使用这些类，您可以为 StackOverflow 设置导航按钮的样式，如下所示：

<div class="nav ComplementTextColor">
    <ul class="primarynav">
         <li class="PrimaryColor"><a href="/questions">Questions</a></li> <!-- selected -->
         <li class="ComplementColor"><a href="/tags">Tags</a></li>
         <li class="ComplementColor"><a href="/users">Users</a></li> 
         <li class="ComplementColor"><a href="/badges">Badges</a></li>
         <li class="ComplementColor"><a href="/unanswered">Unanswered</a></li>
    </ul>
</div>

显然，这些颜色是合成的，不会一起使用，但这就是这个设置的美妙之处。这使得使用和调整颜色变得非常容易，因为您不必在所有地方都定义相同的颜色。您设置一次，然后只需要进行少量更改即可完全重新着色站点。

缺点是你是有限的。例如，使用我发布的 html，您不能仅仅通过更改 css 文件来使此处的按钮与其他所有按钮颜色不同，因为我们没有为它设置“挂钩”。但是你可以通过一个简单的编辑来改变他们在这里使用的那种难看的橙色。

于 2008-12-10T20:40:12.383 回答
0

我将不得不接受 TravisO 的想法。

在这种情况下，与创建单独的 css 文件相比，保留一个文件实际上会产生更大的维护开销。您需要的是一个适用于所有主题（我通常是根/样式文件夹）的某个位置的基本 css 文件，然后是每个主题中的一个文件，用于着色信息（或任何其他特定于主题的 css）。

于 2008-12-10T22:45:06.563 回答