2

为什么我无法在使用母版页的嵌套页面上应用样式？我只是想在一个单独的页面中对 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 and tutorials 的已接受答案中获得帮助。

编辑

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

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

更新 => 它是如何解决的

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

4

6 回答 6

6

您需要按如下方式使用解析 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。

于 2012-11-26T10:31:48.147 回答
1

试试这个

<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。但它不会以正确的路径呈现，直到该路径不被服务器端呈现。

为了在服务器端渲染，您可以runat="server"使用 id 进行链接。或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" />
于 2012-11-26T10:27:53.627 回答
1

移动线：

<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 的根目录引用文件 - 只要您不部署到子目录中，它'会工作的。

于 2012-11-26T10:29:20.280 回答
1

更新 -

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

这是因为 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)
于 2012-11-26T10:37:55.753 回答
0

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

于 2012-12-04T10:49:38.710 回答
0

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

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

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

于 2013-07-24T15:08:30.290 回答