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应用于我不想要的母版页时，我才能将Silver Color作为Reservations.aspx的背景。我无法从This question和教程的接受答案中获得帮助。

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

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

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

Answer 1

您需要使用以下解析网址。

<%= 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"时，当我们将资源设置为相对于我们的网站或Web应用程序根目录时，此网址非常有用。以~开头的网址定义网址为根级网址。但是在服务器端不呈现此路径之前，它不会呈现在正确的路径中。

要在服务器端进行渲染，您可以使用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代码，因此只有在response.write，<%= %>，{{1}中使用它时，带有它的HTML元素才算无效或者在代码后面它会有任何意义。

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

Answer 4

<强>更新 -

需要注意的是，<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 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不是服务器端控件，因此我们不应将~运算符与路径

一起使用

Answer 6

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

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

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

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

6 个答案: