最佳实践：ASP.NET 中的 CSS 或主题？

Posted 2023-03-06

【中文标题】最佳实践：ASP.NET 中的 CSS 或主题？

【英文标题】：Best Practices: CSS or Themes in ASP.NET?

【发布时间】：2010-10-04 23:52:13

【问题描述】：

什么时候应该使用 ASP.NET 主题，什么时候应该使用 CSS？使用一个比另一个有什么优点或缺点？

【参考方案1】：

一起更好！

但主题不是 CSS 的替代品，或者它们不是为与 CSS 相同的目的而构建的。它的目的是在您的应用程序上定义不同的主题并用一行来更改它们。主题可以包括 CSS 文件、图像文件和皮肤。

使用皮肤，您可以为asp.net 控件定义样式，因此它包含复杂而完整的解决方案。例如，您可以定义一个 gridview 并定义它的样式和属性。您可以在应用程序范围内定义它。

所以你我认为他们在一起更好，但不等于比较。

【讨论】：

您也可以使用大多数 ASP.Net 控件的 CssClass 标记属性来执行此操作。

所以主题仅适用于 Web 服务器控件？

好点。主题也可用于应用程序编程，但就本文而言，它参考了用于 Web 的 ASP.Net。

@loxp - 你的意思是主题也可以在桌面应用程序上使用？我上一条评论的意思是，如果您只能将主题应用于以 <.. element>

【参考方案2】：

我建议在主题上使用 CSS。这样做的原因是在 CSS 中，您可以修改样式以使其适用于所有浏览器。你可以对主题做同样的事情，但微软的设计师因修复你修复的东西而臭名昭著，以使它们在所有浏览器上都能工作，因此适得其反。坚持使用 CSS，你会花更少的时间在胡闹上。

【讨论】：

主题只有在您实现“换肤”类型功能或不熟悉浏览器客户端技术时才真正有意义。

Ishmael，CSS 也非常适合用于蒙皮。只需加载一个不同的 CSS 文件即可。甚至更好。由于 CSS 代表“级联 ...”，您可以覆盖现有的样式定义或将它们组合起来 :)

【参考方案3】：

如果您使用会员、个人资料和个性化，主题会非常方便。除此之外，是的，Visual Studio 设计器是臭名昭著的。如果您考虑到浏览器兼容性，您应该广泛使用 CSS。

【讨论】：

为什么它们在这种情况下很方便？因为现有的控件集成？

@Igor = 基于主题和控件的个性化架构，可以根据成员资格和个人资料非常适合。 codeidol.com/asp/asp.net-illustrated/… 是一个简单的例子

【参考方案4】：

如前所述，它们并不相互排斥。我有机会拥有多个主题，它们本身包含自己的一组 CSS/Media/Skin 文件，这些文件根据站点配置是适当的。

【参考方案5】：

如果您正在考虑聘请外部设计机构或设计师，那么使用 CSS 会更好，因为 CSS 对他们来说是众所周知的 - 因为主题更加以开发人员/VS 为中心。

【参考方案6】：

你应该把它们结合起来。将主题文件夹中的 css 文件用于网站中所有 html 元素的正常样式（包括所有生成的元素）。

在控件的皮肤文件中，可以设置默认的css类。其他属性，例如元素的布局和默认行为（示例：日历控件）也可以在此处进行编辑。

皮肤文件适用于所有您无法使用 css 轻松完成的布局特定配置，但使用控件的 .net 属性。

【讨论】：

一个特定于皮肤的示例是 Calendar.DayNameFormat

【参考方案7】：

我建议同时使用两者，我使用主题在控件上设置 css 类，然后在 css 文件中设置它们的样式。 示例：

皮肤：

<asp:CompareValidator runat="server" Text="*" CssClass="Validator" Display="Dynamic" />
<asp:RangeValidator runat="server" Text="*" CssClass="Validator" Display="Dynamic" />
<asp:CustomValidator runat="server" Text="*" CssClass="Validator" Display="Dynamic" />
<asp:RegularExpressionValidator runat="server" Text="*" CssClass="Validator" Display="Dynamic" />
<asp:RequiredFieldValidator runat="server" Text="*" CssClass="Validator" Display="Dynamic" />
<asp:ValidationSummary runat="server" CssClass="ValidationSummary" />

CSS：

.Validator

    color: Red;   


.ValidationSummary

    font-size: 0.8em;


.ValidationSummary > ul

    list-style-type: disc;
    padding: 0 0 0 15px; 
    margin: 0;


.ValidationSummary > ul > li

    padding: 0;
    margin: 0;
    color: Red;