ASP.NET 页面未加载 CSS 样式
Posted
技术标签:
【中文标题】ASP.NET 页面未加载 CSS 样式【英文标题】：ASP.NET page is not loading CSS styles 【发布时间】：2012-06-25 11:43:35 【问题描述】：这是一个在 ASP.NET 中使用 VS 2010 使用 C# 的简单网站。我为这个项目提供了以下目录结构：
起始页是Default.aspx，它可以完美加载。但是当我从默认页面打开页面Interface/SystemAdminLogin.aspx 时，它加载时没有 CSS 样式。我在母版页中导入了 CSS 样式表。这是我在两个 .aspx 文件中引用 MasterPage 文件的方式：
Default.aspx:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
SystemAdminLogin.aspx:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="SystemAdminLogin.aspx.cs" Inherits="_Default" %>
我的代码没有发现任何错误，但为什么 Interface 文件夹中的页面没有加载 CSS 样式？ 请帮忙。
这是我要导入 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>
这是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;
【问题讨论】：
粘贴链接css的母版页文件部分 您可能会发现使用 ASP.Net 主题更容易 - 这将为您解决所有这些问题。请参阅 ***.com/a/8564035/1073107 或 MSDN 页面 msdn.microsoft.com/en-us/library/ykzx33wh.aspx @AshwinSingh 不，不使用 IIS。 @Azeem 尝试在不使用缓存数据的情况下加载页面，按 CTRL+F5。 【参考方案1】：母版页中包含的样式表使用相对路径。
使用runat=server 指定您的样式表链接，并在它们前面加上虚拟网络根路径 (~)：
<link href="~/Styles/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />
或者：
<link href="/Styles/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />
但请记住，建议使用第一个选项。当您在虚拟目录中发布您的网站时，第二个将不起作用。
最后一条评论之后...
CSS 中的图片 URL 也应该更新，以便不使用相对路径或进行任何路径遍历 (../)。
背景：#fff url(images/img01.jpg) 重复-x 左上角；
对于此选项，您需要将图像文件夹移动到 Styles 文件夹中（这样做是一个好习惯）。
最终更新：
看起来head 元素也需要为runat=server，以便 ASP.NET 相对路径 (~) 在具有 runat=server 的 link 元素中工作。
【讨论】：
嗨，当我使用第一个选项时，Default.aspx 也没有加载 CSS 样式...我在帖子中添加了部分 CSS 代码。请调查一下。谢谢 如果它仍然不起作用，那么用标记现在的样子更新你的帖子，并描述发生了什么。 我已经按照你说的更新了代码，并且还在 Styles 中放置了 images 文件夹，但同样的问题！！！ Default.aspx 加载 css 很好，但 SystemAdminLogin.aspx 不是......我在我的帖子中附加项目文件，它会让你更好地了解我做了什么以及需要做什么...... 请从link下载。感谢您的帮助 好的，已修复。我会更新我的答案。你可以从这里下载：sdrv.ms/KTy1xN【参考方案2】：这适用于我的母版页：
<asp:content ID="xContent" ContentPlaceHolderID="headContent" runat="server">
<link rel="stylesheet" type="text/css" href="<%=Request.ApplicationPath%>Folder/Folder/Filename.css" />
</asp:Content>'
【讨论】：
谢谢！我花了几个小时试图让一个自定义 CSS 文件在我的 DNN 模块上工作，这是我发现的唯一一个没有在 【参考方案3】：尝试使用（〜在你的路径中）：
<%@ 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>
【讨论】：
那行不通。link 元素必须与 runat=server 一起使用，ASP.NET 虚拟路径才能正常工作。
是的@the coon 是对的。 ~ 不使用或不使用 runat 服务器属性...【参考方案4】：
我发现它是 ASPNETCORE_ENVIRONMENT 设置为开发调试。在 _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>
我解决了这个问题，一切又好了：
<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>
【讨论】：
【参考方案5】：将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>
【讨论】：
以上是关于ASP.NET 页面未加载 CSS 样式的主要内容，如果未能解决你的问题，请参考以下文章