如何在母版页中包含CSS？

How do I include CSS reference in only certain pages on my asp.net website? If I include the reference in my master page, all pages of the website share the CSS reference.

如何在我的asp.net网站上的某些页面中包含CSS引用？如果我在我的母版页中包含该引用，则该网站的所有页面都共享CSS引用。

3 个解决方案

#1

Just add a CSS ContentPlaceHolder with a default value in it.

只需添加一个CSS ContentPlaceHolder，其中包含默认值。

Basically, the CSS file you specify as default will be included unless you override that placeholder with an <asp:Content /> tag from a child page.

基本上，除非您使用子页面中的标记覆盖该占位符，否则将包含您指定为默认值的CSS文件。

Your Master Page should look something like this.

您的母版页看起来应该是这样的。

<head>
    <asp:ContentPlaceHolder ID="Stylesheets" runat="server">
        <link rel="stylesheet" href="/css/master.css" type="text/css" />
    </asp:ContentPlaceHolder>
</head>

Then from any pages using that Master Page, you can simply override that with a different stylesheet.

然后，从使用该母版页的任何页面，您只需使用不同的样式表覆盖它。

On (example) AboutUs.aspx

在（例子）AboutUs.aspx

<asp:Content ID="Content1" ContentPlaceHolderID="Stylesheets" runat="server">
    <link rel="stylesheet" href="/css/form.css" type="text/css" />
</asp:Content>

#2

You can use more than one Master page on your site.

您可以在您的网站上使用多个母版页。

You can also use nested master pages. The Top level might have the general site structure, and then one Master nested master page for each of your different areas.

您还可以使用嵌套母版页。*可能具有常规站点结构，然后是每个不同区域的一个主嵌套母版页。

When you right click your project and select Add, you choose the option WebContentForm, instead of WebForm. Then you can select the appropriate masterpage.

右键单击项目并选择“添加”时，选择WebContentForm选项，而不是WebForm。然后，您可以选择适当的母版页。

In your nested masterpages, you set the MasterPageFile equal to your top level masterpage.

在嵌套的主页中，将MasterPageFile设置为等于*母版页。

Edit When combined with @Marko's approach you could have the following...

编辑结合@Marko的方法，您可以拥有以下内容......

The advantage here is that all of your overrides only have to be written once.

这里的优点是所有覆盖只需要写一次。

Top Level MasterPage:

*MasterPage：

<head>
    <asp:ContentPlaceHolder ID="Stylesheets" runat="server">
        <link rel="stylesheet" href="/css/default.css" type="text/css" />
    </asp:ContentPlaceHolder>
</head>

Nested MasterPage with no override

嵌套的MasterPage没有覆盖

<%@ Page Language="C#" MasterPageFile="~/Site.master"%>
//don't reference the Stylesheets ContentPlaceHolder and the default is rendered

Nested MasterPage One with override.css

嵌套的MasterPage One with override.css

<%@ Page Language="C#" MasterPageFile="~/Site.master"%>
<asp:Content ID="Content1" ContentPlaceHolderID="Stylesheets" runat="server">
    <link rel="stylesheet" href="/css/override.css" type="text/css" />
</asp:Content>

Nested MasterPage Two with secondOverride.css

嵌套的MasterPage 2与secondOverride.css

<%@ Page Language="C#" MasterPageFile="~/Site.master"%>
<asp:Content ID="Content1" ContentPlaceHolderID="Stylesheets" runat="server">
    <link rel="stylesheet" href="/css/secondOverride.css" type="text/css" />
</asp:Content>

Then, just set the appropriate master page on any of your web forms.

然后，只需在任何Web表单上设置相应的母版页。

#3

In my situation, i used the same masterpage from different locations in the solution. And since the ~ (Tilde) prefix on the reference to my css files, i added a response.write to the reference like so:

在我的情况下，我使用了解决方案中不同位置的相同母版页。并且由于对我的css文件的引用的〜（Tilde）前缀，我在引用中添加了一个response.write，如下所示：

<%= ResolveUrl("~/css/myStyle.css") %>

#1