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

Question

为什么我无法在使用母版页的嵌套页面上应用样式？ 我只是尝试将简单的一些背面颜色应用于正文，并将一些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>.........

只有当我将此颜色应用于我不想要的母版页时，才能将Silver Color作为Reservations.aspx背景。 我无法从这个问题和教程的接受答案得到帮助。

---

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

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

我的问题解决了。 怎么样？ 我告诉了，但为什么？ 我不能说。 我知道~/Styles/Site.css ， Styles/Site.css ， Styles/input.css都是正确的url，但~/Style/input.css不正确。 为什么？ 这仍然是开放的，它的答案肯定是真实和可接受的答案。

Answer 1

您需要使用如下解析URL。

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

如下

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

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

但是当您的Master Page和Content Page位于不同的文件夹中时，它将找不到相同的样式表或java脚本文件，因为文件不在同一文件夹中。

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

Answer 2

尝试这个

<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" ，当我们将资源设置为相对于我们的网站或webapplication root时，这个url非常有用。 以~开头的url定义url是root级别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" />

Answer 3

移动线：

<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 elemant就没有任何意义 - 只有在response.write ， <%= %> ， Resolve或者后面的代码中使用它才会有任何意义。

我的诀窍是为这些路径使用一个前导斜杠，所以“/css/style.css”因此总是从URL的根目录引用该文件 - 只要你不部署到子目录中，它就是'工作。

Answer 4

Update--

需要注意的是， <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)

Answer 5

MSDN ASP.NET网站路径告诉

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不是服务器端控件所以我们不应该使用带有路径的~运算符

Answer 6

你应该检查浏览器中的url渲染是否正确然后尝试使用<link href='<%= ResolveUrl("~/Styles/input.css")' rel="stylesheet" type="text/css" />您的Reservations.aspx页面中的<link href='<%= ResolveUrl("~/Styles/input.css")' rel="stylesheet" type="text/css" />正在解决您的问题。

当你有href="~/Styles/input.css" ，当我们将资源设置为相对于我们的网站或webapplication root时，这个url非常有用。 以〜开头的url定义url是root级别url。 但是在服务器端不呈现此路径之前，它不会呈现在正确的路径中。

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