將樣式應用於母版頁中的嵌套頁面
[英]Applying style to nested pages in a master page
問題描述
為什么我無法在使用母版頁的嵌套頁面上應用樣式？ 我只是嘗試將簡單的一些背面顏色應用於正文，並將一些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不正確。 為什么？ 這仍然是開放的，它的答案肯定是真實和可接受的答案。
6 個解決方案
解決方案1
6 已采納 2012-11-26 10:31:48
您需要使用如下解析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。
解決方案2
1 2012-11-26 10:27:53
嘗試這個
<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" />
解決方案3
1 2012-11-26 10:29:20
移動線：
<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的根目錄引用該文件 - 只要你不部署到子目錄中，它就是'工作。
解決方案4
1 2012-11-26 10:37:55
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)
解決方案5
0 2012-12-04 10:49:38
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不是服務器端控件所以我們不應該使用帶有路徑的~運算符
解決方案6
0 2013-07-24 15:08:30
你應該檢查瀏覽器中的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方法。
內容頁面可以使用其主頁的主父級的ContentPlaceHolderID（嵌套母版頁）
[英]Can content page use ContentPlaceHolderID of master parent of its master page (nested master pages)
asp.net如何從具有嵌套母版頁的內容頁更改父母版頁中的控件
[英]asp.net how to change a control which is in parent master page, from content page with nested master pages
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.