Question

**更新问题* * * 首先，我感谢许多回应。它们都是为了弄清楚为什么我的外部css文件无法正常工作。但是，如果我尝试内部css样式表它仍然无法正常工作。只有内联css有效。也许如果我们能够弄清楚为什么内部css样式不会起作用会解决外部css样式表相同问题的错误

我正在编写一个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>

的的 ** * * 已更新的 * ** * 标题的HTML输出：

<head><title>

</title>
<!-- <link href="&lt;%= ResolveUrl(&quot;~/Styles/MasterStyleSheet.css&quot;) %>" rel="stylesheet" type="text/css" /> -->
<link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.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>

相信我，我目前已经注释了很多，但这些都是我尝试过的不同方式。

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

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

#Label4
{
    background-color:Black;
}

非常感谢任何帮助

Answer 1

正如您已经意识到的那样，以下内容不会转换为绝对路径，因为它不是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>

ALSO @ aRsen49强调了他答案的可能性......那就是CSS文件正确加载，但CSS不正确。你是否仔细检查了CSS是否匹配（记住#表示一个id，其中.表示一个类）？

进一步更新

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

如果usrLabel和Label4是asp对象（例如<asp:Label>），那么您使用Masterpages的事实意味着HTML中控件的实际ID发送到浏览器不会是usrLabel和Label4，但实际上它们会像ct100_Content1_usrLabel和ct100_Content1_Label4 ...所以你现在拥有它的CSS不会链接起来正确。

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

Answer 2

好的，这是修复。所以在我的HTML中，id是label4。但是，因为在实际生成html后，它位于ContentPlaceHolder1的contentplaceholder id的内容页面中，所以标签的id正在从label4更改为ContentPlaceHolder1_Label4。因此我不得不改变我的CSS代码。 BTW f12 on ie可以创造奇迹。再次感谢所有的帮助。对不起，这就像id错了一样简单。

Answer 3

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

Answer 4

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

如果仍然无法正常工作，请仔细检查您的CSS。例如：您是否为ASPX Elements创建了CSS类（CssClass =）？班级名称对吗？等

<强>更新

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

Answer 5

尝试：

在Chrome中打开该页面
右键单击应用样式的元素（母版页中的内容）并选择“Inspect element”。
在弹出的窗口中复制“样式”面板中的所有内容（此面板通常位于右侧，只是在计算样式下）。
右键单击未应用样式的元素，然后选择“Inspect element”。
比较样式中的内容与之前复制的内容。

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

呈现的页面无效的html。这应该是完整的文件。该页面不应引用CSS或JS文件等外部资源。
显示问题的母版页和内容页。

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

CSS样式未被应用

5 个答案: