Question

我正在尝试为网页制作警告横幅。我在面板内的div中使用了一个标签，页面上声明了一些css样式。我不想在每个页面上声明这些样式，因此我将它们移动到我的Site.css文件（由母版页使用）。我这样做的问题是，不应用css样式。母版页上的所有内容都已正确格式化，但内容页面中声明的控件不是。

听到我在内容页面上的内容：

<asp:Content ID="Content2" ContentPlaceHolderID="ErrorMessages" runat="server">

<asp:Panel ID="WarningBanner" runat="server" CssClass="warningPanel" Visible="true">
    <div class="warningDiv">
        <asp:Label ID="testLabel" runat="server" Text="test" CssClass="warningLabel"></asp:Label>
    </div>
</asp:Panel>

<style>
.warningPanel {
    margin: auto;
    width: 1000px;
    background-color: red;
    border: 10px solid red;
}

.warningLabel {
    display: block;
    color: white;
    font-size: large;
}

.warningDiv {
    margin-left: auto; 
    margin-right: auto; 
    text-align: center;
}
</style>

</asp:Content>

并听取我在母版页上的内容：

<head runat="server">
...ext...
    <link href="~/Content/Site.css" rel="stylesheet" /> 
...ext...
</head>
<body>
...ext...
    <div id="body">
        <asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
    <div/>
...ext...
<body/>

这就是我的Site.css文件的样子：

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

.warningPanel {
    margin: auto;
    width: 1000px;
    background-color: red;
    border: 10px solid red;
}

.warningLabel {
    display: block;
    color: white;
    font-size: large;
}

.warningDiv {
    margin-left: auto; 
    margin-right: auto; 
    text-align: center;
}
...ext...

我做错了什么？

Answer 1

CSS文件通常由浏览器缓存。发生这种情况时，对样式所做的更改将不会显示在HTML显示中。

您可以在更改CSS内容后清除浏览器缓存以查看修改后的样式。另一种方法是确保您的客户端无需清除其浏览器缓存即可查看更新的CSS，方法是在链接中附加查询字符串：

<link href="~/Content/Site.css?version=2.5" rel="stylesheet" type="text/css" />

每次修改CSS文件时，都会设置一个新的version号码以强制下载更新的CSS文件。

Answer 2

您的代码没有任何问题。您可能没有为CSS文件指定正确的文件路径。仔细检查一下。另外，你有一个错字：

<div id="body">
    <asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
<div/>

应该是：

<div id="body">
    <asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
</div>

在母版页上链接的CSS不适用于内容页面上的控件

2 个答案: