首页 文章

CSS样式未被应用

提问于
浏览 次
2

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

我正在编写一个ASP.NET Web应用程序，我遇到了应用CSS样式的麻烦 . 目前我有一个母版页和一个内容页 . 我的主页面正在应用CSS样式，但内容页面不是 . 有趣的是，在设计视图中，样式正在应用于“内容”页面，但一旦运行，浏览器就不会应用它 . 我尝试过内部和外部样式表 . 内联确实有效，但我想避免内联 . 以下是我所拥有的一些示例代码并尝试使用Master Page：

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

**** ******** 更新了 ******** Headers 的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;
}

任何帮助将不胜感激

c# asp.net css web-applications

5 回答

  • 0

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

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

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

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

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

    如果发送浏览器的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，其中 . 表示一个类）？

    FURTHER UPDATE

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

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

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

    回复于
  • 0

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

    回复于
  • 0

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

    回复于
  • 1

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

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

    UPDATE

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

    回复于
  • 4

    尝试：

    • 在Chrome中打开该页面

    • 右键单击应用样式的元素（母版页中的某些内容），然后选择"Inspect element" .

    • 在弹出的窗口中复制"Styles"面板中的所有内容（此面板通常位于右侧，正好在计算样式下） .

    • 右键单击未应用样式的元素，然后选择"Inspect element" .

    • 将样式中的内容与先前复制的内容进行比较 .

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

    • 渲染的html页面不起作用 . 这应该是完整的文件 . 该页面不应引用CSS或JS文件等外部资源 .

    • 显示问题的母版页和内容页 .

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

    回复于

相关问题