子页面不从主页面获取样式答案

【问题标题】：Child Page Doesn't Pick Up Styles From Master子页面不从主页面获取样式
【发布时间】：2013-08-14 17:53:07
【问题描述】：

我无法让我的子页面获取在我的主页面中定义的样式。这是我所做的：

我在应用的根目录中创建了一个样式表 Main.css
```
body {
    background-color:red;
}
```

我在我的 Web 应用程序的根目录中创建了一个母版页 Site.Master

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="WebApplication1.Site" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
     <link href="Main.css" rel="stylesheet" />
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
    Master Page`
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

这在设计器中显示为红色背景

我在应用的根目录中创建了一个子页面 WebForm.aspx

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
      Child Page Contents
</asp:Content>

但这不会在设计器或运行时显示红色背景。当我查看源代码时，文件中没有 css 声明，但它正在拾取母版页，因为它显示“Master PageChild Page Contents”

【问题讨论】：

标签： asp.net css webforms master-pages

【解决方案1】：

重组您的母版页，如下所示：

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link href="Main.css" rel="stylesheet" type="text/css" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
    Master Page`
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

您需要在 head 标记中链接样式表，而不是 ContentPlaceHolder。

【讨论】：

【解决方案2】：

替换这个

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    <link href="Main.css" rel="stylesheet" />
    </asp:ContentPlaceHolder>

与

   <html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
   <link href="Main.css" rel="stylesheet" />
   <title></title>
   <asp:ContentPlaceHolder ID="head" runat="server">
   </asp:ContentPlaceHolder>

指向您的 CSS 工作表的链接位于内容占位符内。

【讨论】：