母版页和页面内容使用相同的 CSS 文件

发布于 2024-07-28 16:02:26 字数 1388 浏览 4 评论 0 原文

我有一个 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>

这些样式正确应用于实际 .master 文件(页面)中的所有内容,但不应用于使用母版页的任何页面(例如 default.aspx使用该母版页并其中有一个内容占位符)。

如果我在每个单独的页面中添加这些行:

<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.net 主题包含在内。

更新

为了排除文件位置问题,我对这些样式表使用了绝对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" />

这样,无论从哪里读取,都可以找到该文件。 这仍然表现出相同的行为。

对我来说,母版页看起来像是使用 CSS 样式呈现的(因为它们位于同一个文件中),然后子/调用页面在没有 CSS 样式的情况下呈现(因为它们不在该文件中,它们是在 masterPage 中),然后将这两个文件组合在一起(而不是先将它们组合在一起,然后渲染组合页面的样式元素)。 我之前的例子增加了这个信念,即在调用页面本身中添加 CSS 文件的 include,这将导致它正确显示 CSS。

您可以查看此文件的源代码,并且在 head 部分中,您可以看到正确链接的 CSS 样式,但它们不会应用于调用页面中的任何元素,而会应用于母版页中的所有元素。

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:

<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).

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.

Update

In order to rule out the file locations problem, I used the absolute URL for these stylesheets...

<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.

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

dawn曙光 2024-08-04 16:04:34

像这样的东西应该有效。 您应该能够将 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>

最终,您不希望

<head></head>

在内容页中使用标记,它可能会覆盖您的母版页标题。

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?

<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.

贩梦商人 2024-08-04 16:04:21

看起来您已经正确完成了此操作,因此您的错误看起来很奇怪,听起来可能是您在母版页中犯了拼写错误。 尝试查看两个页面的生成源代码(在浏览器中查看源代码),一个页面包含母版页中的链接,另一个页面包含网页中的链接,并比较路径。

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.

岁月蹉跎了容颜 2024-08-04 16:04:07

我有类似的问题。 正如其他人所建议的,您应该能够使用 ResolveUrl 来确保路径正确。

不幸的是,这给我带来了进一步的问题。 我的头标签在服务器上运行。 我的链接标签不是。
我的链接标记中的解析网址永远不会执行。 相反,C# 代码和 response.write 标记被编码并输出到页面。

奇怪的是,脚本(非运行服务器)标记中的相同技术可以正常工作。

为了解决这个问题,我最终在 ASP.Net Response.Write 标记中编写了整个链接标记:

<%="<link href='" + ResolveUrl("~/apps/_lib/ui/styles.css") + "' rel='stylesheet' type='text/css' />"%>

这有效。
多么奇怪。 不知何故,这一切都与在服务器上运行的 head 标签有关。

I had a similar problem. As others have suggested, you should be able to use ResolveUrl to make sure the path is correct.

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.

Bizarrely, the same technique in a script (non-runat server) tag would work as normal.

To solve the problem, I ended up writing the whole link tag within an ASP.Net Response.Write tag:

<%="<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.

懒的傷心 2024-08-04 16:03:54

也许它可能是你的 CSS 选择器。 添加母版页时,asp.net 会在 id 上添加更多前缀。

Maybe it might be your css selectors. When you add master pages, asp.net tacks on more prefixes to the ids.

仅此而已 2024-08-04 16:03:42

jrummell 发布的内容是我在网站上使用的内容,以确保在我移动页面时链接可以正常工作。

就渲染而言。 渲染是在客户端计算机的浏览器上完成的。 对于浏览器来说,它不知道 html 是由多个文档生成的。

我会确保您的 HTML 和 CSS 是正确的。

顺便说一句,我注意到上周左右,VS2008 不断弄乱我的 CSS 样式表,做一些非常随机的事情,比如移动文本。 然而,我认为这可能只是我机器上的东西。 只是需要检查一下。

这是一些示例代码,我检查了它只是为了确保它有效。

母版页头部

<head runat="server">
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

内容占位符

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="something">
        Lance
    </div>
</asp:Content>

样式表中的 CSS

.something{
    color:Blue;
}

结果是子页面中蓝色的“Lance”。

What jrummell posted is what I use on my sites to ensure that the links work if I were to move my pages around.

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.

I would make sure your HTML and CSS are correct.

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.

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

.something{
    color:Blue;
}

The result is "Lance" in Blue in the child page.

∞梦里开花 2024-08-04 16:03:27

那这个呢?

<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" />

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" />
我不是你的备胎 2024-08-04 16:03:13

内容页面是否与主页面位于不同的文件夹中? 如果是这样,您必须使用 ResolveUrl

<link href='<%= ResolveUrl("~/apps/_lib/ui/styles1.css") %>' type="text/css" rel="stylesheet" />

更新:如果这不起作用,那么您可能会遇到像 Lance 建议的 HTML 或 CSS 错误。 尝试使用 w3schools.com 上的 HTML 和 CSS 验证器。 如果修复任何错误后它仍然不起作用,请按照 Steve 的建议仔细检查 CSS 选择器和渲染的 HTML。 ASP.Net 生成的 ID 不止一次地困扰着我。

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 ResolveUrl in the master page:

<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 validators at 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文