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.
为什么我无法在使用母版页的嵌套页面上应用样式?我只是尝试将简单的一些背面颜色应用于正文,并将一些div应用于单个页面。
My (nested)page Reservations.aspx has this code
我的(嵌套)页面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 has this code
input.cs有这个代码
body { background-color:Silver; }
.mainDiv { background-color:Blue; }
Site.Master has this code
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>.........
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.
只有当我将此颜色应用于我不想要的母版页时,才能将Silver Color作为Reservations.aspx的背景。我无法从这个问题和教程的接受答案得到帮助。
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.
对ResolveUrl的指导解决了我的问题,因为我尝试在visual-studio 2010中使用pickur而不是手动输入并获得了这个url Styles / input.css而不是〜/ 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.
我的问题解决了。怎么样?我告诉了,但为什么?我不能说。我知道〜/ Styles / Site.css,Styles / Site.css,Styles / input.css都是正确的url但〜/ Style / input.css不正确。为什么?这仍然是开放的,它的答案肯定是真实和可接受的答案。
6 个解决方案
#1
6
You need to use resolve url as follows .
您需要使用如下解析URL。
<%= 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.
当您的母版页和内容页位于同一文件夹上时,母版页中的任何包含都可以使用。但是当您的母版页和内容页位于不同的文件夹中时,它将找不到相同的样式表或java脚本文件,因为文件不在同一文件夹中。因此,Resolve Url会解析服务器上的URL。
#2
1
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.
需要注意的是,标记是其余标记的容器。您的子页面是您的正文标记的一部分。我看到您正在尝试根据子页面指定body标签的背景,但是不能这样做。因为即使您尝试下载特定于子页面的css,所有这些都会进入head标记,因此只有最后指定的的css规则才有效。另一方面,子页面元素不是这种情况,因为它们对于子页面是唯一的。
This is because the style attributes of Site.css override the attributes of input.css.
这是因为Site.css的样式属性覆盖了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
1
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" />
将您的ContentPlaceHolder放在 之后
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.
正如我猜的那样,你的样式表正在应用,但由于site.css是自然或css,它是重写的。因为当页面将呈现时,您将获得input.css链接标记以及它之后的site.css链接标记。
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.
因此,作为Css规则,如果site.css也具有相同选择器的css规则,这些规则在先前的css文件中,则最后的规则将适用。
<link href='<%= ResolveUrl("~/Styles/input.css")' rel="stylesheet" type="text/css" />
in your Reservations.aspx is solving your issue.
在您的Reservations.aspx正在解决您的问题。
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.
当你有href =“〜/ Styles / input.css”时,当我们将资源设置为相对于我们的网站或webapplication root时,这个url非常有用。以〜开头的url定义url是root级别url。但是在服务器端不呈现此路径之前,它不会呈现在正确的路径中。
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.
要在服务器端进行渲染,您可以使用id链接到runat =“server”。或在服务器端分隔符中使用ResolveUrl方法。
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
1
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
这样你的site.aster就可以了
<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.
但是,我希望只使用一个主样式表,然后使用id和类来满足特定的样式需求。
**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...
asp.net中的波浪号字符〜是相对于应用程序的路径根的符号...
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".
因此,如果您从“/stuff/images/somepage.aspx”调用该文件,那么即使引用“〜/ css / style.css”也会调用“/css/style.css” - 如果您只是调用“css” /style.css“它会尝试相对于当前文档找到它,即”/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.
但是〜字符只适用于ASP.NET代码,所以HTML elemant对它没有任何意义 - 只有在response.write,<%=%>,Resolve或者后面的代码中使用它才会有任何意义。
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.
我的诀窍是为这些路径使用一个前导斜杠,所以“/css/style.css”因此总是从URL的根目录引用该文件 - 只要你不部署到子目录中,它就是'工作。
#5
0
MSDN ASP.NET Web Site Paths tells
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. Example
站点根相对路径,针对站点根目录进行解析。如果将整个站点中使用的资源(例如图像或客户端脚本文件)保留在位于Web站点根目录下的文件夹中,则站点根相对路径非常有用。例
<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
〜运算符用于在使用映像服务器控件时指定映像的根相对路径在此示例中,从位于Web应用程序根目录下的Images文件夹中读取映像文件,而不管其位于何处。该网页所在的网站。例
<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
因为css不是服务器端控件所以我们不应该使用带有路径的〜运算符
#6
0
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.
你应该检查浏览器中的url渲染是否正确然后尝试使用 正在解决您的问题。
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.
当你有href =“〜/ Styles / input.css”时,当我们将资源设置为相对于我们的网站或webapplication root时,这个url非常有用。以〜开头的url定义url是root级别url。但是在服务器端不呈现此路径之前,它不会呈现在正确的路径中。
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.
要在服务器端进行渲染,您可以使用id链接到runat =“server”。或在服务器端分隔符中使用ResolveUrl方法。
#1
6
You need to use resolve url as follows .
您需要使用如下解析URL。
<%= 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.
当您的母版页和内容页位于同一文件夹上时,母版页中的任何包含都可以使用。但是当您的母版页和内容页位于不同的文件夹中时,它将找不到相同的样式表或java脚本文件,因为文件不在同一文件夹中。因此,Resolve Url会解析服务器上的URL。
#2
1
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.
需要注意的是,标记是其余标记的容器。您的子页面是您的正文标记的一部分。我看到您正在尝试根据子页面指定body标签的背景,但是不能这样做。因为即使您尝试下载特定于子页面的css,所有这些都会进入head标记,因此只有最后指定的的css规则才有效。另一方面,子页面元素不是这种情况,因为它们对于子页面是唯一的。
This is because the style attributes of Site.css override the attributes of input.css.
这是因为Site.css的样式属性覆盖了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
1
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" />
将您的ContentPlaceHolder放在 之后
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.
正如我猜的那样,你的样式表正在应用,但由于site.css是自然或css,它是重写的。因为当页面将呈现时,您将获得input.css链接标记以及它之后的site.css链接标记。
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.
因此,作为Css规则,如果site.css也具有相同选择器的css规则,这些规则在先前的css文件中,则最后的规则将适用。
<link href='<%= ResolveUrl("~/Styles/input.css")' rel="stylesheet" type="text/css" />
in your Reservations.aspx is solving your issue.
在您的Reservations.aspx正在解决您的问题。
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.
当你有href =“〜/ Styles / input.css”时,当我们将资源设置为相对于我们的网站或webapplication root时,这个url非常有用。以〜开头的url定义url是root级别url。但是在服务器端不呈现此路径之前,它不会呈现在正确的路径中。
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.
要在服务器端进行渲染,您可以使用id链接到runat =“server”。或在服务器端分隔符中使用ResolveUrl方法。
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
1
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
这样你的site.aster就可以了
<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.
但是,我希望只使用一个主样式表,然后使用id和类来满足特定的样式需求。
**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...
asp.net中的波浪号字符〜是相对于应用程序的路径根的符号...
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".
因此,如果您从“/stuff/images/somepage.aspx”调用该文件,那么即使引用“〜/ css / style.css”也会调用“/css/style.css” - 如果您只是调用“css” /style.css“它会尝试相对于当前文档找到它,即”/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.
但是〜字符只适用于ASP.NET代码,所以HTML elemant对它没有任何意义 - 只有在response.write,<%=%>,Resolve或者后面的代码中使用它才会有任何意义。
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.
我的诀窍是为这些路径使用一个前导斜杠,所以“/css/style.css”因此总是从URL的根目录引用该文件 - 只要你不部署到子目录中,它就是'工作。
#5
0
MSDN ASP.NET Web Site Paths tells
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. Example
站点根相对路径,针对站点根目录进行解析。如果将整个站点中使用的资源(例如图像或客户端脚本文件)保留在位于Web站点根目录下的文件夹中,则站点根相对路径非常有用。例
<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
〜运算符用于在使用映像服务器控件时指定映像的根相对路径在此示例中,从位于Web应用程序根目录下的Images文件夹中读取映像文件,而不管其位于何处。该网页所在的网站。例
<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
因为css不是服务器端控件所以我们不应该使用带有路径的〜运算符
#6
0
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.
你应该检查浏览器中的url渲染是否正确然后尝试使用 正在解决您的问题。
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.
当你有href =“〜/ Styles / input.css”时,当我们将资源设置为相对于我们的网站或webapplication root时,这个url非常有用。以〜开头的url定义url是root级别url。但是在服务器端不呈现此路径之前,它不会呈现在正确的路径中。
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.
要在服务器端进行渲染,您可以使用id链接到runat =“server”。或在服务器端分隔符中使用ResolveUrl方法。