Fatal编程技术网
  • asp.net/
  • Asp.net 将样式应用于母版页中的嵌套页

Asp.net 将样式应用于母版页中的嵌套页

asp.net css

Asp.net 将样式应用于母版页中的嵌套页,asp.net,css,master-pages,Asp.net,Css,Master Pages,为什么我不能在使用母版页的嵌套页面上应用样式？我只是想把一些简单的背景色应用到一个页面的正文和一些div中 我的（嵌套）页面Reservations.aspx有此代码 <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Reservations

为什么我不能在使用母版页的嵌套页面上应用样式？我只是想把一些简单的背景色应用到一个页面的正文和一些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>

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

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

Site.Master
有此代码

<%@ 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>

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

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


和教程

编辑

使用
如何解决它

试试这个


<head runat="server">

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

</head>
<body>


在您的
预订中。aspx
正在解决您的问题

当您使用
href=“~/Styles/input.css”
时，当我们使资源相对于我们的网站或Web应用程序根目录时，此url非常有用。以
~
开头的url定义该url是根级别的url。但在服务器端不渲染该路径之前，它不会以正确的路径渲染

要在服务器端渲染，可以使用id创建指向
runat=“server”
的链接。或者在服务器端分隔符中使用
ResolveUrl
方法

像





或




移动行：


<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元素没有任何意义-只有在
响应中使用它。写入
、
、
解析
或在代码隐藏中才有任何意义


我的技巧是对这些路径使用一个前导斜杠，因此“/css/style.css”因为它总是从URL的根引用文件-只要您不部署到子目录，它就可以工作。
您需要使用如下解析URL


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






如下


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






如果
母版页
和
内容页
位于同一文件夹中，则母版页中的任何包含都将起作用

但是当您的
母版页
和
内容页
位于不同的文件夹中时，它将找不到相同的样式表或java脚本文件，因为文件不在同一文件夹中

所以解析Url解析服务器上的Url。
更新--

需要注意的要点是，
标记是其余标记的容器。子页面是正文标记的一部分。我看到您正试图根据子页面为body标记指定背景，但是否这是不可能的。因为即使您尝试下载特定于子页面的css，所有内容都会进入head标记，因此只有最后指定的
css规则有效。另一方面，子页面元素不是这种情况，因为它们对于子页面是唯一的



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

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


//母版页的标记
//子页面标记
//母版页的标记（Site.css的css应该覆盖input.css）

告诉我们


根据站点根解析的站点根相对路径。
如果您保留了可用的资源，则站点根相对路径非常有用
在整个站点中使用，例如图像或客户端脚本文件，
位于网站根目录下的文件夹中。
示例


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



由于css不是服务器端控件，因此我们不应使用带有路径的
~
操作符。您应该检查浏览器中的url呈现是否正确，如果不正确，请尝试在您的预订中使用
。aspx页面正在解决您的问题

当您使用
href=“~/Styles/input.css”
时，当我们使资源相对于我们的网站或Web应用程序根目录时，此url非常有用。以~开头的url定义该url为根级别的url。但在服务器端不渲染该路径之前，它不会以正确的路径渲染


要在服务器端渲染，您可以使用id创建指向
runat=“server”
的链接，或者在服务器端分隔符中使用
ResolveUrl
方法。
好的。这也许能解决我的问题。谢谢，但是你能告诉我一些原因吗？对不起，这没什么区别。另外，我在
站点中没有
body{}
和
.mainDiv{}
。css
@Sami，好的，请检查浏览器中呈现的url是否正确，如果不正确，请尝试在
预订.aspx
页面中使用
。请查看我的答案。您可以编辑并优化您的答案。在母版页中？好啊我想是的。但是请你看看我的答案。之后，您可以编辑并优化您的答案。能否显示您的
站点中有哪些css规则。css
？谢谢您的回答。问题的解决方式略有不同。将要发布答案。请查看我的答案。您可以编辑并使您的答案最好。

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



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