C# 对母版页和页面内容使用相同的 CSS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1172293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use the same CSS file for masterpage and page content
提问by Kris
I have an APS.net app (C#) with several pages that use the same MasterPage. In that page, I have included a couple stylesheets like so:
我有一个 APS.net 应用程序 (C#)，其中有几个页面使用相同的 MasterPage。在该页面中，我包含了几个样式表，如下所示：
<head runat="server">
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
</head>
These styles apply correctly to all content that is in the actual .master file (page), but are not applied to any pages that use the Master page (for instance default.aspx uses that master page and has a Content placeholder in it).
这些样式正确应用于实际 .master 文件（页面）中的所有内容，但不适用于任何使用母版页的页面（例如 default.aspx 使用该母版页并在其中包含内容占位符）。
If I add these lines in each individual page:
如果我在每个单独的页面中添加这些行：
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
Then the styles show up as expected... but it was my hope that I could include them in the master page so that I didn't need to include these references in each subsequent page too.
然后样式按预期显示......但我希望我可以将它们包含在母版页中，这样我就不需要在每个后续页面中也包含这些引用。
Because these files are not located physically in the same project (they are shared between several apps), i cannot just include them as an ASP.net theme that would be applied to all pages.
因为这些文件实际上并不位于同一个项目中（它们在多个应用程序之间共享），所以我不能仅仅将它们包含为适用于所有页面的 ASP.net 主题。
Update
更新
In order to rule out the file locations problem, I used the absolute URL for these stylesheets...
为了排除文件位置问题，我使用了这些样式表的绝对 URL...
<link href="https://myserver/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="https://myserver/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
That way, no matter where it is read from, the file can be located. This still exhibits the same behavior.
这样，无论从何处读取文件，都可以找到该文件。这仍然表现出相同的行为。
To me, it looks like the masterPage is rendered with the CSS styles (because they're in the same file) and then the child/calling page is rendered without the CSS styles (because they aren't in that file, they're in the masterPage) and then those two files are combined together (as opposed to combining them together first and THEN rendering the style elements for the combined pages). Adding to this belief was my previous example of adding the include for the CSS file in the calling page itself, which will cause it to display the CSS correctly.
对我来说，看起来 masterPage 是用 CSS 样式呈现的（因为它们在同一个文件中），然后子/调用页面在没有 CSS 样式的情况下呈现（因为它们不在那个文件中，它们是在 masterPage 中），然后将这两个文件组合在一起（而不是先将它们组合在一起，然后呈现组合页面的样式元素）。添加到这个信念是我之前在调用页面本身中为 CSS 文件添加包含的示例，这将导致它正确显示 CSS。
You can view the source of this file, and in the head section, you can see the CSS styles linked correctly, but they aren't applied to any elements from the calling page while they are applied to all elements in the masterPage.
您可以查看此文件的来源，在 head 部分，您可以看到正确链接的 CSS 样式，但它们不会应用于调用页面中的任何元素，而它们应用于 masterPage 中的所有元素。
回答by Kris
What about this?
那这个呢？
<link runat="server" href="~/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link runat="server" href="~/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
回答by Jan Aagaard
It looks like you have done it correctly, so your error seems weird and sounds like maybe you've mady a typo in the master page. Try to look at the generated source (view source in the browser) of the two pages, one with the links in the master pages and one with the links in the web page, and compare the paths.
看起来您做得对，所以您的错误看起来很奇怪，听起来可能是您在母版页中打错了字。尝试查看两个页面的生成源（在浏览器中查看源），一个是母版页中的链接，一个是网页中的链接，并比较路径。
回答by brendan
Something like this should work. You should be able to include the css in the header of the master. And then, include a ContentPlaceHolder in the header so if you need custom header stuff in your content pages you can do that. Does that not work?
像这样的事情应该有效。您应该能够在 master 的标题中包含 css。然后，在标题中包含一个 ContentPlaceHolder，因此如果您需要在内容页面中自定义标题内容，您可以这样做。那不行吗？
<head>
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Ultimately you don't want a
最终你不想要一个
<head></head>
tag in your content page, it's possible that is overriding your master page header.
标记在您的内容页中，它可能会覆盖您的母版页标题。
回答by jrummell
Is the content page in a different folder that the master? If so, you'll have to get the application relative path to the css files using ResolveUrlin the master page:
内容页面是否在与 master 不同的文件夹中？如果是这样，您必须在母版页中使用ResolveUrl获取应用程序相对于 css 文件的路径：
<link href='<%= ResolveUrl("~/apps/_lib/ui/styles1.css") %>' type="text/css" rel="stylesheet" />
Update: If this doesn't work, then you might have HTML or CSS errors like Lance suggested. Try using the HTML and CSS validatorsat w3schools.com. If it still doesn't work after fixing any errors, double check your CSS selectors with the rendered HTML as Steve suggested. ASP.Net's generated IDs have bitten me more than once.
更新：如果这不起作用，那么您可能会遇到 Lance 建议的 HTML 或 CSS 错误。尝试使用w3schools.com 上的HTML 和 CSS 验证器。如果修复任何错误后它仍然不起作用，请按照史蒂夫的建议使用呈现的 HTML 仔细检查您的 CSS 选择器。ASP.Net 生成的 ID 不止一次让我感到厌烦。
回答by Lance Ingle
What jrummell posted is what I use on my sites to ensure that the links work if I were to move my pages around.
jrummell 发布的内容是我在我的网站上使用的内容，以确保在我移动页面时链接有效。
As far as rendering. The rendering is done on the client machine's browser. To the browser it has no idea the html is generated from multiple documents.
至于渲染。渲染是在客户端机器的浏览器上完成的。对于浏览器，它不知道 html 是从多个文档生成的。
I would make sure your HTML and CSS are correct.
我会确保你的 HTML 和 CSS 是正确的。
On a side note i have noticed the last week or so that VS2008 keeps messing my css stylesheets up, doing really random things like moving text around. However, I think this might just be something on my machine. Just something to check.
在旁注中，我注意到上周左右 VS2008 一直在搞乱我的 css 样式表，做一些非常随机的事情，比如移动文本。但是，我认为这可能只是我机器上的一些东西。只是要检查的东西。
Here is some sample code I checked this just to make sure and this works.
这是我检查过的一些示例代码，以确保它有效。
Head of Master Page
母版页负责人
<head runat="server">
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
Content Place Holder
内容占位符
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="something">
Lance
</div>
</asp:Content>
Css in StyleSheet
样式表中的 CSS
.something{
color:Blue;
}
The result is "Lance" in Blue in the child page.
结果是子页面中蓝色的“Lance”。
回答by Steve
Maybe it might be your css selectors. When you add master pages, asp.net tacks on more prefixes to the ids.
也许它可能是您的 css 选择器。添加母版页时，asp.net 会在 ID 上添加更多前缀。
回答by Steve
I had a similar problem. As others have suggested, you should be able to use ResolveUrl to make sure the path is correct.
我有一个类似的问题。正如其他人所建议的，您应该能够使用 ResolveUrl 来确保路径正确。
Unfortunately, this created a further problem for me. My head tag was runat server. My link tags were not. The resolve url within my link tag would never execute. Instead, the C# code and response.write tags were being encoded and outputted to the page.
不幸的是，这给我带来了进一步的问题。我的头部标签是 runat 服务器。我的链接标签不是。我的链接标签中的解析 url 永远不会执行。相反，C# 代码和 response.write 标签被编码并输出到页面。
Bizarrely, the same technique in a script (non-runat server) tag would work as normal.
奇怪的是，脚本（非 runat 服务器）标签中的相同技术可以正常工作。
To solve the problem, I ended up writing the whole link tag within an ASP.Net Response.Write tag:
为了解决这个问题，我最终在 ASP.Net Response.Write 标记中编写了整个链接标记：
<%="<link href='" + ResolveUrl("~/apps/_lib/ui/styles.css") + "' rel='stylesheet' type='text/css' />"%>
That worked. How strange. Somehow, it is all related to the head tag being runat sever.
那奏效了。多奇怪。不知何故，这一切都与被 runat sever 的 head 标签有关。
