问题
Why could I be unable to apply style on a nested page which is using a master page? I am just trying to apply simple some back-color to body and some div in an individual page.
My (nested)page Reservations.aspx has this code
<%@ 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 has this code
body { background-color:Silver; }
.mainDiv { background-color:Blue; }
Site.Master has this code
<head runat="server">
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /></head>
<body>.........
I can get Silver Color as background of Reservations.aspx only if I apply this to master page which I do not want. I have not been able to get helped from accepted answer of This question and tutorials.
using <link.. before or after might make some difference, thanks for info but it is not doing anything in this case. I have tested it both ways after my problem was solved.
Guidance to ResolveUrl solved my problem, because I tried using pickurl in visual-studio 2010 instead of typing manually and got this url Styles/input.css instead of ~/Styles/input.css.
My problem solved. How? i told, but why? i can not tell. I have fould that ~/Styles/Site.css, Styles/Site.css,Styles/input.css are all correct url but ~/Style/input.css is incorrect. Why? This is still open and its answer will surely be real and acceptable answer.
回答1:
You need to use resolve url as follows.
<%= ResolveUrl("~/")%>
as follows
<link href='<%= ResolveUrl("~/Styles/Site.css")%>' rel="stylesheet" type="text/css" />
Working when your Master Page and Content Page are on the same folder then any include in the master page will work.
But when your Master Page and Content Page are in different folder it will not find the same style sheet or java-script file because files are not in the same folder.
So Resolve Url resolve the URL on the server.
回答2:
Update--
Important point to note that the <body> tag is a container of the rest of your tags. Your child page is a part of your body tag. I see that you are trying to specify background to the body tag depending on the child page, but NO this is not possible. Because even though you try to download the css specific to your child page, all of it goes into the head tag, so only the last specified css rule for the <body> works. On the other end this is not the case with child page elements because they are unique to your child page.
This is because the style attributes of Site.css override the attributes of input.css.
This is how your final code is rendered in your browser--
<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)
回答3:
Try this
<head runat="server">
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
Put your ContentPlaceHolder after <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
As I guess, your stylesheet is applying but it is overriding due to site.css which is the nature or css. because when page will render you will get, your input.css link tag and after it site.css link tag.
So, as Css rule, if site.css is also have css rule for same selector which are in previous css files, the rule which come very last will apply.
<link href='<%= ResolveUrl("~/Styles/input.css")' rel="stylesheet" type="text/css" />
in your Reservations.aspx is solving your issue.
As you were having href="~/Styles/input.css", this url is useful when we are making our resource to relative to our website or webapplication root. the url starting with ~ define that the url is root level url. but it will not render in correct path until this path not render by server side.
for rendering in on server side you can make your link to runat="server" with an id. or use ResolveUrl method in server side delimiters.
like
<link href="~/Styles/input.css" rel="stylesheet" type="text/css" id="l1" runat="server" />
or
<link href='<%= ResolveUrl("~/Styles/input.css") %>' rel="stylesheet" type="text/css" />
回答4:
Move the line:
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
Below:
<link href="/Styles/Site.css" rel="stylesheet" type="text/css" /></head>
So that your site.aster reads
<link href="/Styles/Site.css" rel="stylesheet" type="text/css" /></head>
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
This way your style sheet in the pages will be read after the main one, and should override any settings in there with the page specific one.
However, I'd look to use just the one main style sheet, and then use id's and classes for specific styling needs.
**EDIT TO ADD FOR FINAL QUESTION**
The tilde character ~ in asp.net is a symbol to be relative to the path root of the application...
So if you're calling the file from "/stuff/images/somepage.aspx" then even the reference "~/css/style.css" will call "/css/style.css" regardless - If you just call "css/style.css" it will try and find it relative to the current document, i.e. "/stuff/images/css/style.css".
However the ~ character only works in ASP.NET code, so a HTML elemant with it means nothing - only if you use it in a response.write, <%= %>, Resolve or in code behind will it have any meaning.
My trick is to use a leading slash for these paths, so "/css/style.css" as this will always reference the file from the root of the URL - as long as you do not deploy into a sub-directory, it'll work.
回答5:
MSDN ASP.NET Web Site Paths tells
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. Example
<img src="Images/SampleImage.jpg" />
And
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. Example
<asp:image runat="server" id="Image1" ImageUrl="~/Images/SampleImage.jpg" />
As css is not a server side control so we should not use ~ operator with path
回答6:
You should check the url render in the browser is correct or not if not then try using <link href='<%= ResolveUrl("~/Styles/input.css")' rel="stylesheet" type="text/css" /> in your Reservations.aspx page is solving your issue.
As you were having href="~/Styles/input.css", this url is useful when we are making our resource to relative to our website or webapplication root. the url starting with ~ define that the url is root level url. but it will not render in correct path until this path not render by server side.
For rendering in on server side you can make your link to runat="server" with an id. or use ResolveUrl method in server side delimiters.
来源：https://stackoverflow.com/questions/13562831/applying-style-to-nested-pages-in-a-master-page