2

我正在编写一个 ASP.NET Web 应用程序，但在应用 CSS 样式时遇到了麻烦。目前我有一个母版页和一个内容页。我的母版页正在应用 CSS 样式，但内容页没有。有趣的是在设计视图中，样式被应用于内容页面，但是一旦运行，浏览器就不会应用它。我尝试过内部和外部样式表。内联确实有效，但我想避免内联。这是我已经尝试过的一些示例代码

母版页： 

<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="~/Styles/MasterStyleSheet.css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

内容页面：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />
    <!-- <link href='<%= ResolveUrl("~/Styles/LoginStyleSheet.css") %>' rel="stylesheet" type="text/css" /> I tried this as well-->
</asp:Content>

我添加了简单的 css 文件，以便人们可以看到语法是正确的： LoginStyleSheet.css

#usrLabel {
    color:Blue;
    background-color:Aqua;
}

#Label4 {
    background-color:Black;
}

任何帮助将不胜感激

更新#1

标题的 HTML 输出：

<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.css" />

    <!-- <link href="&lt;%= ResolveUrl(&quot;~/Styles/MasterStyleSheet.css&quot;) %>" rel="stylesheet" type="text/css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" /> -->
    <!-- <link href='/Styles/LoginStyleSheet.css' rel="stylesheet" type="text/css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="/Styles/LoginStyleSheet.css" /> -->
</head>

目前很多<link>元素都被注释掉了，但这些都是我尝试过的不同方式。

更新#2

首先，我感谢许多回应。他们都致力于弄清楚为什么我的外部 css 文件不起作用。但是，如果我尝试内部 css 样式表，它仍然不起作用。只有内联 CSS 有效。也许如果我们能弄清楚为什么内部 css 样式不起作用，那将解决与外部 css 样式表相同的问题

4

5 回答 5

4

正如您已经意识到的那样，以下内容不会转换为绝对路径，因为它不是 asp.net 对象...

<link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />

相反，尝试使用这个......

<link rel="stylesheet" type="text/css" href="<%=VirtualPathUtility.ToAbsolute("~/Styles/LoginStyleSheet.css")%>" />

更新（更新后的问题）...

如果发送给浏览器的 HTML 如下所示，那么我相信 LoginStyleSheet.css 要么在不同的位置，要么有一些文件权限阻止它被正确提供......

（我删除了注释掉的行，并添加了以**...开头的行，**不应该包括在内）

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.css" />
  **<link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" />
</head>

还@ aRsen49在他的回答中强调了一种可能性......那就是 CSS 文件加载正确，但 CSS 不正确。您是否仔细检查了 CSS 是否匹配（记住#表示 id 而 as.表示类）？

进一步更新

如果@Trisped 在他的假设中是正确的，我想我可能知道出了什么问题......

如果usrLabelandLabel4是 asp 对象（例如<asp:Label>），那么您使用 Masterpages 的事实意味着发送到浏览器的 HTML 中控件的实际 id 不会是usrLabeland Label4，但实际上它们会类似于ct100_Content1_usrLabeland ct100_Content1_Label4...因此，您当前拥有的 CSS 将无法正确链接。

因此，我建议您更新您的 CSS 以使用发送到浏览器的 id，或者（这将是我的偏好）您应该CssClss="usrLabel"为每个对象添加属性，然后将您的 CSS 更新为.usrLabel。

于 2012-06-20T15:22:21.880 回答
1

好的，这就是修复。所以在我的 html 中，id 是 label4。但是，因为一旦实际生成了 html，它就位于内容占位符 id 为 ContentPlaceHolder1 的内容页面中，因此标签的 id 将从 label4 更改为 ContentPlaceHolder1_Label4。因此我不得不改变我的css代码。BTW f12 on ie 可以创造奇迹。再次感谢所有帮助。抱歉，这只是一个简单的 id 错误。

于 2012-06-20T19:39:07.437 回答
0

在您的母版页中，定义一个 HEAD 元素，然后提及 CSS 类的链接。然后它将适用于您的所有内容页面。我在这里为您找到了一个很好的参考

于 2012-06-20T15:30:08.747 回答
0

如果您在代码中使用 Visual Studios“拖放”CSS 表。

如果它仍然不起作用，请仔细检查您的 CSS。例如：您是否为 ASPX 元素创建了 CSS 类 (CssClass = )？类名正确吗？等等

更新

我知道这可能听起来很奇怪.. 但是关闭 VS 并重新启动它。然后再次显示页面。此外.. 当您显示页面时按 F5！我相信你的缓存或类似的东西可能是问题所在。

于 2012-06-20T16:23:40.620 回答
0

尝试：

  1. 在 Chrome 中打开页面
  2. 右键单击正在应用样式的元素（母版页中的内容）并选择“检查元素”。
  3. 在弹出的窗口中复制“样式”面板中的所有内容（此面板通常位于右侧，就在计算样式下方）。
  4. 右键单击未应用样式的元素，然后选择“检查元素”。
  5. 将样式中的内容与您之前复制的内容进行比较。

如果这不能让您走上正轨，那么我们将需要以下一项或两项：

  • 无法正常工作的页面的渲染 html。这应该是完整的文件。页面不应引用 CSS 或 JS 文件等外部资源。
  • 展示问题的母版页和内容页。

请注意，这些应该是显示问题的基本页面（而不是带有多个控件的生产页面）。

于 2012-06-20T18:10:32.590 回答