未应用 CSS 样式
[英]CSS Style Not Being Applied
问题描述
我正在编写一个 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="<%= ResolveUrl("~/Styles/MasterStyleSheet.css") %>" 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 样式表相同的问题
5 个解决方案
解决方案1
4 已采纳 2012-06-20 15:22:21
正如您已经意识到的那样，以下内容不会转换为绝对路径，因为它不是 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，而.表示一个类）？
进一步更新
如果@Trisped 的假设是正确的，我想我可能知道出了什么问题......
如果usrLabel和Label4是 asp 对象（例如<asp:Label> ），则您使用 Masterpages 的事实意味着发送到浏览器的 HTML 中控件的实际 id 将不是usrLabel和Label4 ，但实际上它们将类似于ct100_Content1_usrLabel和ct100_Content1_Label4 ... 所以您目前拥有的 CSS 将无法正确链接。
因此，我建议您更新 CSS 以使用发送到浏览器的 id，或者（这将是我的偏好）您应该为每个对象添加CssClss="usrLabel"属性，然后将您的 CSS 更新为.usrLabel反而。
解决方案2
1 2012-06-20 19:39:07
好的，这里是修复。 所以在我的 html 中，id 是 label4。 但是，因为它在一个内容页面中，一旦 html 实际生成，它的 contentplaceholder id 为 ContentPlaceHolder1，所以标签的 id 从 label4 更改为 ContentPlaceHolder1_Label4。 因此我不得不更改我的 css 代码。 顺便说一句，f12 on ie 可以创造奇迹。 再次感谢所有的帮助。 抱歉，这就像 id 错误一样简单。
解决方案3
0 2012-06-20 15:30:08
在您的母版页中，定义一个 HEAD 元素，然后提及 CSS 类的链接。 然后它将适用于您的所有内容页面。 我在这里找到了一个很好的参考
解决方案4
0 2012-06-20 16:23:40
如果您使用 Visual Studios 在代码中“拖放”CSS 表。
如果它仍然不起作用，请仔细检查您的 CSS。 例如：您是否为 ASPX 元素创建了 CSS 类 (CssClass = )？ 类名正确吗？ 等等。
更新
我知道这可能听起来很奇怪..但是关闭 VS 并重新启动它。 然后再次显示页面。 此外.. 当您显示页面时按 F5！ 我相信您的缓存或类似内容可能是问题所在。
解决方案5
0 2012-06-20 18:10:32
尝试：
- 在 Chrome 中打开页面
- 右键单击正在应用样式的元素（母版页中的某些内容），然后选择“检查元素”。
- 在弹出的窗口中复制“样式”面板中的所有内容（该面板通常在右侧，就在计算样式下）。
- 右键单击未应用样式的元素，然后选择“检查元素”。
- 将样式中的内容与您之前复制的内容进行比较。
如果这不能让您走上正确的轨道，那么我们将需要以下一项或两项：
- 无法正常工作的页面的渲染 html。 这应该是完整的文件。 该页面不应引用外部资源，如 CSS 或 JS 文件。
- 展示该问题的母版页和内容页。
请注意，这些应该是显示问题的基本页面（而不是带有多个控件的生产页面）。
在TreeViewItem样式触发器期间，TextDecorations不会应用于TextBlock
[英]TextDecorations not being applied to TextBlock during a TreeViewItem Style Trigger
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.