C# ASP.NET 页面未加载 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11168668/
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
ASP.NET page is not loading CSS styles
提问by Azeem
This is a simple website in ASP.NET with C# using VS 2010. I have following directory structure for this project:
这是一个简单的 ASP.NET 网站，使用 C# 使用 VS 2010。我为这个项目提供以下目录结构：
The starting page is Default.aspxand it loads perfectly. But when I open page Interface/SystemAdminLogin.aspxfrom Default page, it loads with no CSS styles. I have imported CSS style sheet in Master Page. Here is how I am referencing MasterPage file in both .aspx files:
起始页面是Default.aspx，它完美加载。但是当我Interface/SystemAdminLogin.aspx从默认页面打开页面时，它加载时没有 CSS 样式。我在母版页中导入了 CSS 样式表。这是我在两个 .aspx 文件中引用 MasterPage 文件的方式：
Default.aspx:
Default.aspx：
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
SystemAdminLogin.aspx:
SystemAdminLogin.aspx：
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="SystemAdminLogin.aspx.cs" Inherits="_Default" %>
I dont see any mistake with my code but why Page in Interface folder is not loading CSS styles?? Please help.
我的代码没有看到任何错误，但是为什么 Interface 文件夹中的 Page 没有加载 CSS 样式？请帮忙。
Here is the master page code where i am importing css file:
这是我导入 css 文件的母版页代码：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Facial Recognition Bank System</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" media="screen" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
And here is the part of CSS file code:
这是 CSS 文件代码的一部分：
body {
margin: 0;
padding: 0;
background: #fff url(../images/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
采纳答案by Marcel N.
The stylesheets included in your master page are using relative paths.
母版页中包含的样式表使用的是相对路径。
Specify your stylesheet links with runat=serverand prefix them with the virtual web root path (~):
runat=server使用虚拟 Web 根路径 ( ~)指定样式表链接并为其添加前缀：
<link href="~/Styles/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />
OR:
或者：
<link href="/Styles/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />
But keep in mind that the first option is recommended. The second will not work when you publish your site in a virtual directory.
但请记住，建议使用第一个选项。当您在虚拟目录中发布站点时，第二个将不起作用。
After last comment...
最后一条评论后...
The image URL's in CSSs should be updated as well, in order to not use relative paths or do any path traversal(../).
CSS 中的图像 URL 也应该更新，以便不使用相对路径或进行任何路径遍历(../)。
background: #fff url(images/img01.jpg) repeat-x left top;
背景：#fff url(images/img01.jpg) 重复-x 左上角；
For this option you will need to move the images folder inside the Styles folder (it's a good practice to do so).
对于此选项，您需要将图像文件夹移动到 Styles 文件夹中（这样做是一个很好的做法）。
Final update:
最终更新：
Looks like that the headelement also needs to be runat=serverin order for ASP.NET relative paths (~) to work within linkelements with runat=server.
看起来head元素也需要是runat=server为了让 ASP.NET 相对路径 (~) 在link带有runat=server.
回答by Aghilas Yakoub
Try with (~ in your path):
尝试使用（〜在您的路径中）：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Facial Recognition Bank System</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="~/Styles/style.css" runat="server" rel="stylesheet" type="text/css" media="screen" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
回答by user3123048
This works for me in my master pages:
这在我的母版页中对我有用：
<asp:content ID="xContent" ContentPlaceHolderID="headContent" runat="server">
<link rel="stylesheet" type="text/css" href="<%=Request.ApplicationPath%>Folder/Folder/Filename.css" />
</asp:Content>
回答by user3123048
This works for me in my master pages:
这在我的母版页中对我有用：
<asp:content ID="xContent" ContentPlaceHolderID="headContent" runat="server">
<link rel="stylesheet" type="text/css" href="<%=Request.ApplicationPath%>Folder/Folder/Filename.css" />
</asp:Content>'
回答by Godwin Awojobi
Add runat="server"to the head attribute and also ensure the link targets the root as in ("~/path to css")
添加runat="server"到 head 属性并确保链接以根为目标 ("~/path to css")
<head runat="server">
<title>Page Title Here</title>
<link href="~/css/main.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
回答by Johan Grobler
I found that it was ASPNETCORE_ENVIRONMENT set to Development for debug. And in the _Layout.cshtml I had the asp-append-version missing.
我发现它是 ASPNETCORE_ENVIRONMENT 设置为 Development 进行调试。在 _Layout.cshtml 中，我缺少 asp-append-version。
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - SALUS UAV</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
I fixed that and it was all good again:
我解决了这个问题，一切都好起来了：
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - SALUS UAV</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
