C# 未应用 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11122630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Style Not Being Applied
提问by auwall12688
I'm writing a ASP.NET Web Application and I'm running into trouble getting the CSS styles to be applied. Currently I have a Master Page and one Content Page. My Master page is getting the CSS style applied to it, but the Content page is not. The funny thing is in design view the style is being applied to the Content page but once it is ran the browser doesn't apply it. I've tried internal and external style sheets. Inline does work but I'd like to avoid inline. Here is some sample code of what I have and tried
我正在编写一个 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>
Content Page:
内容页面：
<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>
I've added the simple css file just so people could see that the syntax is correct:
LoginStyleSheet.css
我添加了简单的 css 文件，以便人们可以看到语法是正确的：
LoginStyleSheet.css
#usrLabel {
color:Blue;
background-color:Aqua;
}
#Label4 {
background-color:Black;
}
Any help would be greatly appreciated
任何帮助将不胜感激
Update #1
更新 #1
HTML output for header:
标题的 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>
A lot of <link>elements are currently commented out but those are all different ways I've tried.
许多<link>元素目前已被注释掉，但这些都是我尝试过的不同方式。
Update #2
更新 #2
First I appreciate the many responses. They have all been geared towards figuring out why my external css file won't work. However, if i try internal css style sheet it still doesn't work. Only inline css works. Perhaps if we could figure out what was wrong with why internal css styling wont work that would solve the same issue with external css style sheets
首先，我感谢许多回应。他们都致力于弄清楚为什么我的外部 css 文件不起作用。但是，如果我尝试使用内部 css 样式表，它仍然不起作用。只有内联 css 有效。也许如果我们能找出为什么内部 css 样式不起作用的问题，就可以解决与外部 css 样式表相同的问题
采纳答案by freefaller
As you have already realised, the following won't translate into an absolute path, because it is not an asp.net object...
正如您已经意识到的那样，以下内容不会转换为绝对路径，因为它不是 asp.net 对象...
<link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />
Instead, try using this...
相反，尝试使用这个...
<link rel="stylesheet" type="text/css" href="<%=VirtualPathUtility.ToAbsolute("~/Styles/LoginStyleSheet.css")%>" />
UPDATE(after updated question)...
更新（更新问题后）...
If the HTML sent the browser is as follows, then I believe LoginStyleSheet.css is either in a different location, or has some file permissions that are stopping it being served correctly...
如果浏览器发送的 HTML 如下所示，那么我相信 LoginStyleSheet.css 要么位于不同的位置，要么具有一些阻止它正确提供服务的文件权限......
(I have removed commented out lines, and added the line starting with **... the **should NOT be included)
（我已经删除了注释掉的行，并添加了以**...开头的行，**不应该包括在内）
<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 highlights a possibility in his answer... and that is that the CSS file is loading correctly, but the CSS is incorrect. Have you double checked that the CSS matches as it should (remembering that #denotes an id where as .denotes a class)?
还@aRsen49 在他的回答中强调了一种可能性......那就是 CSS 文件加载正确，但 CSS 不正确。你有没有仔细检查过 CSS 是否应该匹配（记住，它#表示一个 id，而 as.表示一个类）？
FURTHER UPDATE
进一步更新
If @Trisped is correct in his assumption, I think I might have an idea what is going wrong...
如果@Trisped 的假设是正确的，我想我可能知道出了什么问题......
If usrLabeland Label4are asp objects (such as <asp:Label>), the fact you're using Masterpages means that the actual id of the controls in the HTML sent to the browser will not be usrLabeland Label4, but in fact they'll be something like ct100_Content1_usrLabeland ct100_Content1_Label4... so your CSS as you currently have it will not link up correctly.
如果usrLabel和Label4是 asp 对象（例如<asp:Label>），则您使用 Masterpages 的事实意味着发送到浏览器的 HTML 中控件的实际 id 将不是usrLabeland Label4，但实际上它们将类似于ct100_Content1_usrLabeland ct100_Content1_Label4...所以您目前拥有的 CSS 将无法正确链接。
So I would recommend you either update your CSS to use the id's sent to the browser, or (and this would be my preference) you should add CssClss="usrLabel"attributes to each of the objects, and then update your CSS to .usrLabelinstead.
因此，我建议您更新 CSS 以使用发送到浏览器的 id，或者（这将是我的偏好）您应该CssClss="usrLabel"为每个对象添加属性，然后更新您的 CSS .usrLabel。
回答by DotNetFreak
回答by seN
If you use Visual Studios "drag and drop" the CSS sheet in your code.
如果您使用 Visual Studios 在代码中“拖放”CSS 表。
If it still wont work, double check your CSS. For example: Did you create CSS Classes (CssClass = ) for ASPX Elements? Are Class names right? etc.
如果它仍然不起作用，请仔细检查您的 CSS。例如：您是否为 ASPX 元素创建了 CSS 类 (CssClass = )？类名正确吗？等等。
UPDATE
更新
I know this might sound odd.. But Close down VS and restart it. Then Display the Page again. Furthermore.. When you display the page press F5! I believe your cache or similar might be the problem.
我知道这听起来很奇怪..但是关闭 VS 并重新启动它。然后再次显示页面。此外.. 当您显示页面时按 F5！我相信您的缓存或类似内容可能是问题所在。
回答by Trisped
Try:
尝试：
- Open the page in Chrome
- Right click on an element which is applying the style (something in the master page) and select "Inspect element".
- In the window that pops up copy everything in the "Styles" panel (this panel is usually on the right side, just under computed style).
- Right click on an element which is not applying the style and select "Inspect element".
- Compare what is in the Styles with what you copied earlier.
- 在 Chrome 中打开页面
- 右键单击正在应用样式的元素（母版页中的某些内容），然后选择“检查元素”。
- 在弹出的窗口中复制“样式”面板中的所有内容（该面板通常在右侧，就在计算样式下）。
- 右键单击未应用样式的元素，然后选择“检查元素”。
- 将样式中的内容与您之前复制的内容进行比较。
If that does not get you on the right track then we will need one or both of the following:
如果这不能让您走上正确的轨道，那么我们将需要以下一项或两项：
- The rendered html of a page which is not working. This should be the complete file. The page should not reference external resources like CSS or JS files.
- A master page and content page which exhibit the issue.
- 无法正常工作的页面的渲染 html。这应该是完整的文件。该页面不应引用外部资源，如 CSS 或 JS 文件。
- 展示该问题的母版页和内容页。
Please note that these should be basic pages which exhibit the issue (not a production page with multiple controls on it).
请注意，这些应该是显示问题的基本页面（而不是带有多个控件的生产页面）。
回答by auwall12688
Ok so here was the fix. So in my html the id was label4. However, because it was in a content page with a contentplaceholder id of ContentPlaceHolder1 once the html was actually generated the label's id was being changed from label4 to ContentPlaceHolder1_Label4. Therefore i had to change my css code. BTW f12 on ie works wonders. Thanks again for all the help. Sorry it was something as simple as an id being wrong.
好的，这里是修复。所以在我的 html 中，id 是 label4。但是，因为它位于内容页面中，一旦 html 实际生成，其内容占位符 ID 为 ContentPlaceHolder1，标签的 ID 就会从 label4 更改为 ContentPlaceHolder1_Label4。因此我不得不更改我的 css 代码。顺便说一句，f12 on ie 可以创造奇迹。再次感谢所有的帮助。抱歉，这就像 id 错误一样简单。
