代码之家 › 专栏 › 技术社区 › LeJeune

.NET-如何为大型CSS文件生成主题

themes css asp.net

LeJeune · 技术社区 · 16 年前

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

每个CSS元素,除了颜色定义,还有很多其他属性——大小、字体、浮动等等。在各种CSS元素中也会出现特定的颜色。

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

最理想的情况是,我希望有一个单独的CSS文件(用于维护),并且只能更改颜色属性。

这里有什么选择?

6 回复 | 直到 16 年前

JoshBerke 16 年前

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

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

在主题的CSS文件中,您只需要:

a:hover
{
    color:Red;
}

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

Cristian Libardo 16 年前

如果差异较小,则可能采用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 }

TravisO 16 年前

我认为保留一个CSS文件可能是一个坏主意,特别是因为主题的目的是有多个。我建议使用两个CSS文件,一个是基文件(您已经使用的)和当前主题,在基文件之后包含/链接,并覆盖您希望与基文件不同的内容。

Illandril 16 年前

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

这样,您的定位细节都在一个位置,而您的主题只有颜色信息。保存浏览器下载和解释默认颜色以及主题颜色的时间。

Joel Coehoorn 16 年前

记住:元素可以有多个样式类。由于布局仍然是静态的,并且将与颜色分离,因此您希望在完全不同的文件中分别为布局和颜色定义类。

所以你想对主题做的是在一个单独的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文件使这里的按钮与其他所有按钮的颜色不同,因为我们没有为它设置“hook”。但是你可以通过一个简单的编辑改变他们在这里使用的难看的橙色。

knight0323 16 年前

我得同意特拉维斯的想法。

在这种情况下,使用一个文件实际上会比创建单独的CSS文件产生更大的维护开销。你需要的是一个基本的CSS文件,在某个位置应用于所有主题(通常是根/样式文件夹),然后在每个主题中的一个文件用于着色信息(或任何其他特定于主题的CSS)。