将样式应用于母版页中的嵌套页面答案

【问题标题】：Applying style to nested pages in a master page将样式应用于母版页中的嵌套页面
【发布时间】：2012-11-13 19:27:26
【问题描述】：

为什么我无法在使用母版页的嵌套页面上应用样式？我只是想在一个单独的页面中对 body 和一些 div 应用简单的一些背景颜色。

我的（嵌套）页面Reservations.aspx 有这个代码

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" 
AutoEventWireup="true" CodeFile="Reservations.aspx.cs" Inherits="Reservations" %>
<asp:Content runat="server" ContentPlaceHolderID="HeadContent">
    <link href="~/Styles/input.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="mainDiv">
........
</div></asp:Content>

input.cs 有这个代码

body { background-color:Silver; }
.mainDiv { background-color:Blue; }

Site.Master有这个代码

<head runat="server">
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /></head>
<body>.........

只有当我将它应用于我不想要的母版页时，我才能将银色作为Reservations.aspx 的背景。我无法从This question 的接受答案和教程中获得帮助。

编辑

在之前或之后使用<link.. 可能会有所不同，感谢您提供信息，但在这种情况下它没有做任何事情。在我的问题解决后，我已经对它进行了两种测试。

ResolveUrl 的指导解决了我的问题，因为我尝试在 visual-studio 2010 中使用 pickurl 而不是手动输入，并得到这个 URL Styles/input.css 而不是 ~/Styles/input.css。

更新 => 解决方法

href="Styles/Site.css" 或 href='<%= ResolveUrl("~/Styles/Site.css")%>'

【问题讨论】：

您能在Site.css 中显示您的css 规则吗？

标签： asp.net css master-pages

【解决方案1】：

你需要使用如下的resolve url。

<%= ResolveUrl("~/")%>

如下

<link href='<%= ResolveUrl("~/Styles/Site.css")%>'  rel="stylesheet" type="text/css" />

当您的Master Page 和Content Page 位于同一文件夹中时，母版页中的任何包含都将起作用。

但是当您的Master Page 和Content Page 在不同的文件夹中时，它不会找到相同的样式表或java-script 文件，因为文件不在同一个文件夹中。

所以Resolve Url解析服务器上的URL。

【讨论】：

在母版页中？好的。它认为是的。但是<% 不需要关闭吗？因为它引起了问题。那么如何以及在哪里关闭呢？
请看我的回答。之后，您可以编辑并做出最佳答案。

【解决方案2】：

您应该检查浏览器中的 url 呈现是否正确，如果不正确，请尝试在 Reservations.aspx 页面中使用 <link href='<%= ResolveUrl("~/Styles/input.css")' rel="stylesheet" type="text/css" /> 来解决您的问题。

正如您使用 href="~/Styles/input.css" 一样，当我们将资源设置为相对于我们的网站或 web 应用程序根目录时，此 url 很有用。以 ~ 开头的 url 定义该 url 是根级别的 url。但它不会以正确的路径呈现，直到该路径不被服务器端呈现。

为了在服务器端渲染，您可以使用 id 链接到 runat="server"。或在服务器端分隔符中使用ResolveUrl 方法。

【讨论】：

【解决方案3】：

MSDN ASP.NET Web Site Paths告诉

A site-root relative path, which is resolved against the site root. Site-root relative paths are useful if you keep resources that are used throughout the site, such as images or client script files, in a folder that is located under the Web site root. 示例

<img src="Images/SampleImage.jpg" />

和

The ~ operator used to specify a root-relative path for an image when using the Image server control In this example, the image file is read from the Images folder that is located directly under the root of the Web application, regardless of where in the Web site the page is located. 示例

<asp:image runat="server" id="Image1" ImageUrl="~/Images/SampleImage.jpg" />

由于 css 不是服务器端控件，所以我们不应该在路径中使用 ~ 运算符

【讨论】：

【解决方案4】：

移动线：

<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>

下面：

<link href="/Styles/Site.css" rel="stylesheet" type="text/css" /></head>

让您的 site.aster 读取

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

这样，页面中的样式表将在主样式表之后被读取，并且应该使用页面特定的样式表覆盖其中的任何设置。

但是，我希望只使用一个主要样式表，然后使用 id 和类来满足特定的样式需求。

**编辑以添加最后一个问题**

asp.net 中的波浪字符~ 是一个相对于应用程序路径根目录的符号...

因此，如果您从“/stuff/images/somepage.aspx”调用文件，那么即使引用“~/css/style.css”也会调用“/css/style.css”——如果你只是调用“css/style.css”它会尝试找到它相对于当前文档，即“/stuff/images/css/style.css”。

但是~ 字符仅在 ASP.NET 代码中有效，因此带有它的 HTML 元素没有任何意义 - 只有在 response.write、<%= %>、Resolve 或后面的代码中使用它才会有任何意义。

我的技巧是为这些路径使用前导斜杠，因此“/css/style.css”将始终从 URL 的根目录引用文件 - 只要你这样做不要部署到子目录中，它会工作。

【讨论】：

【解决方案5】：

试试这个

<head runat="server">

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>

</head>
<body>

将您的 ContentPlaceHolder 放在 <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> 之后

我猜，您的样式表正在应用，但由于site.css 这是自然或css，它被覆盖了。因为当页面渲染时，你会得到你的input.css链接标签和site.css链接标签。

所以，作为 Css 规则，如果 site.css 也有与之前 css 文件中相同选择器的 css 规则，则最后出现的规则将适用。

<link href='<%= ResolveUrl("~/Styles/input.css")' rel="stylesheet" type="text/css" />

您的Reservations.aspx 正在解决您的问题。

正如您使用 href="~/Styles/input.css" 一样，当我们将资源设置为相对于我们的网站或 Web 应用程序根目录时，此 URL 很有用。以~ 开头的 url 定义该 url 是根级 url。但它不会以正确的路径呈现，直到该路径不被服务器端呈现。

为了在服务器端渲染，您可以使用 id 链接到 runat="server"。或在服务器端分隔符中使用ResolveUrl 方法。

喜欢

<link href="~/Styles/input.css" rel="stylesheet" type="text/css" id="l1" runat="server" />

或

<link href='<%= ResolveUrl("~/Styles/input.css") %>' rel="stylesheet" type="text/css" />

【讨论】：

好的，我愿意。它可能会解决我的问题。谢谢，但是你能告诉一些原因吗？
对不起，它没有任何区别。我也没有body{} 和.mainDiv{} 在Site.css
@Sami，好的，请检查浏览器中的 url 渲染是否正确，如果不正确，请尝试在您的 Reservations.aspx 页面中使用 <link href='<%= ResolveUrl("~/Styles/input.css")' rel="stylesheet" type="text/css" />。
请看我的回答。您可以编辑并做出最佳答案。

【解决方案6】：

更新--

请注意，<body> 标记是其余标记的容器。您的子页面是您的正文标签的一部分。我看到您正在尝试根据子页面为 body 标记指定背景，但 NO 这是不可能的。因为即使您尝试下载特定于您的子页面的 css，它也会全部进入 head 标签，所以只有 <body> 的最后指定 css 规则有效。另一方面，子页面元素并非如此，因为它们是您的子页面所独有的。

这是因为 Site.css 的样式属性覆盖了 input.css 的属性。

这就是你的最终代码在浏览器中的呈现方式——

<asp:ContentPlaceHolder ID="HeadContent" runat="server"> //Master page's markup

    <!-- <asp:Content runat="server" ContentPlaceHolderID="HeadContent"> --> //child page markup
          <link href="~/Styles/input.css" rel="stylesheet" type="text/css" />
    <!-- </asp:Content> -->

</asp:ContentPlaceHolder>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /></head> //Master page's markup (the css of Site.css should be overriding your input.css)

【讨论】：

感谢您的回答。问题的解决方式有所不同。准备发布答案。
请看我的回答。您可以编辑并做出最佳答案。