在母版页上选择性地调用 css答案

【问题标题】：Invoke css selectively on master page在母版页上选择性地调用 css
【发布时间】：2013-06-25 12:43:11
【问题描述】：

我有一个母版页，其中包含所有页面的页眉和页脚。它调用包含页面样式的 css 文件 (master.css)：page1.aspx、page2.aspx、page3.aspx。 em>

但是，我现在有另一个 css 文件 (firstpage.css) 单独用于 page1.aspx。这必须覆盖master.css中page1.aspx的样式（混乱！！）

有没有一种工具可以为我进行这种比较？ - 在给定的 2 个页面中搜索相似的标签并将它们合并

除了page1.aspx之外，我可以为所有其他页面调用master.css吗？

【问题讨论】：

第一个选项是不要在母版页上使用 css 文件，而是使用 page1.aspx ,pag2.aspx css 分别使用他们自己的 css 第二个选项是使用 javascript 并根据页面设置 css

标签： javascript jquery html asp.net css

【解决方案1】：

如果你在 master.css 之后包含 firstpage.css，并且你的 css 结构良好，那么 firstpage.css 的内容将覆盖 master.css 的内容。

如果您在 master.css 中有非常具体的规则，则需要确保 firstpage.css 中相同规则的选择器特异性值更高。你可以在这里阅读更多： http://www.w3.org/TR/css3-selectors/#specificity http://css-tricks.com/specifics-on-css-specificity/

作为最后的手段，您可以在页面特定规则中使用 !important。但是，这可能会给您带来更多的痛苦。

【讨论】：

【解决方案2】：

如果您网站上的页面不多，您可以为 css 文件定义一个内容区域，并在每个页面上指定要引用的样式。但是，如果您有 100 页，这可能会很乏味。

如果此页面非常不同，您可以考虑不使用母版页。

另外，考虑到样式可以被覆盖，因此如果样式定义正确，则将两个 css 文件放在同一页面上可以提供所需的结果。

【讨论】：

【解决方案3】：

级联样式表旨在以级联方式工作。但是，您可以在母版页中使用默认内容创建内容占位符。这可以包含您可以在页面中使用 firstpage.css 覆盖的 master.css。就我个人而言，我会为网站内的所有页面设计一个通用的 css 文件，然后拥有一个或多个“特定于页面”的 css 文件，这些文件可以覆盖和添加新样式。

【讨论】：

【解决方案4】：

如果您不想使用site.css 中的任何样式，您可以这样做。在您拥有当前site.css 引用的Site.master 中，将其替换为：（您需要更改about.aspx）

注意 - 这可能很糟糕，因为如果您完全删除对 site.css 的引用，然后决定您需要一些样式，并且必须将它们添加到新样式表。

<%
    string sPagePath = System.Web.HttpContext.Current.Request.Url.AbsolutePath;
    System.IO.FileInfo oFileInfo = new System.IO.FileInfo(sPagePath);
    string sPageName = oFileInfo.Name.ToLower();

    if (sPageName == "about.aspx") { %>
        <link href="~/Styles/about.css" rel="stylesheet" type="text/css" />
    <% } else { %>
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <% } %>

从-https://stackoverflow.com/a/1833313/2470724获取当前页面名称代码

编辑

这也取决于你想要覆盖什么样的样式，如果是文本等，那么你可以在你的正文内容中添加一个class，然后为每个页面设置相应的样式。

【讨论】：

【解决方案5】：

您有以下选择：

最好的方法是从你想要复制的主 css 中提取样式定义并将它们放在单独的样式表中。然后，您可以在头部执行条件语句以将相关样式表应用于相应的页面。
您还可以将要应用的重复样式表放在头部的主 css 之后或页面本身（显然在头部之后），这样样式将被覆盖。您应该注意，这可能不适用于所有浏览器，尤其是 IE。
您可以在您希望覆盖的每种样式旁边添加 !important，但这需要大量工作，而且您可能会再次遇到一些跨浏览器兼容性（读取 IE）问题。
最后一个选项是在加载文档后使用 javascript/jquery 将样式应用于元素。这肯定会奏效，但这又是一项繁重的工作。
阅读选项 1。

【讨论】：

【解决方案6】：

“StyleSheetTheme”是您正在寻找的。利用 ASP.Net 的主题支持，而不是将样式表单独应用于所有页面。如果您希望某个页面具有不同的样式，请在其页面声明中禁用“主题”。

页面声明中的EnableTheming="true" / "false"

和 styleSheetTheme="theme_folder_name" 在 web.config 的 "pages" 元素内

【讨论】：