为什么我的网页表单页面没有检测到 CSS 文件？答案

【问题标题】：Why does my webform page not detect CSS file?为什么我的网页表单页面没有检测到 CSS 文件？
【发布时间】：2018-12-12 16:30:51
【问题描述】：

无论我做什么，它都不会检测到 css 文件。

<link rel="stylesheet" type="text/css" href="CSS/customStyles.css" runat="server" />

我尝试将它放在母版页和子页中的 contentplaceHolder Head 中，我尝试了多种方式设置路径，

<link rel="stylesheet" type="text/css" href="~/CSS/customStyles.css" runat="server" />
    <link rel="stylesheet" type="text/css" href="/CSS/customStyles.css" runat="server" />
    <link rel="stylesheet" type="text/css" href="CSS/customStyles.css" runat="server" />

但没有任何效果。我还阅读了一些有关 formvalidation 的内容，甚至尝试在 web.config 上添加

  <location path="CSS">
<system.web>
    <authorization>
        <allow users="*" />
    </authorization>
</system.web>

还是什么都没有……为什么没有检测到css文件？？

编辑

这是目录

更新

这是一个更新，我尝试在主目录上创建一个 css 文件并且它有效，所以问题是如果 css 文件在目录中，将不会被检测到......

<link rel="stylesheet" type="text/css" href="StyleSheet1.css" />

编辑

这似乎是导致问题的原因

当我转到 localhost:port/CSS/customStyles.css 时，只有这个 css 出现

body {
}
.hidden {
    display:none;
}


.customActive {
    background-color:#cecee8;
}

.ctmHover:hover{
   background-color:#cecee8;
}

但是文件包含所有这些代码

body {
}

.hidden {
    display: none;
}


.customActive {
    background-color: #cecee8;
}

.ctmHover:hover {
    background-color: #cecee8;
}


.Grid {
    background-color: #fff;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
    font-family: Calibri;
    color: #474747;
}

    .Grid td {
        padding: 2px;
        border: solid 1px #c1c1c1;
    }

    .Grid th {
        padding: 4px 2px;
        color: #fff;
        background: #363670 url(Images/grid-header.png) repeat-x top;
        border-left: solid 1px #525252;
        font-size: 0.9em;
    }

    .Grid .alt {
        background: #fcfcfc url(Images/grid-alt.png) repeat-x top;
    }

    .Grid .pgr {
        background: #363670 url(Images/grid-pgr.png) repeat-x top;
    }

        .Grid .pgr table {
            margin: 3px 0;
        }

        .Grid .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .Grid .pgr a {
            color: Gray;
            text-decoration: none;
        }

            .Grid .pgr a:hover {
                color: #000;
                text-decoration: none;
            }


.custom-modal-header {
    background: #b0d4e3; /* Old browsers */
    background: -moz-linear-gradient(top, #b0d4e3 0%, #88bacf 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #b0d4e3 0%,#88bacf 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #b0d4e3 0%,#88bacf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0d4e3', endColorstr='#88bacf',GradientType=0 ); /* IE6-9 */
    border-radius: 15px 15px 0px 0px;
    color: white;
}

.custom-modal-footer {
    background: #b0d4e3; /* Old browsers */
    background: -moz-linear-gradient(top, #b0d4e3 0%, #88bacf 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #b0d4e3 0%,#88bacf 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #b0d4e3 0%,#88bacf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0d4e3', endColorstr='#88bacf',GradientType=0 ); /* IE6-9 */
    border-radius: 0px 0px 15px 15px;
    color: white;
}

.custom-modal-confirm-btn {
    background-color: #98c4d7;
    color: white;
}

    .custom-modal-confirm-btn:hover {
        background-color: #000000;
        color: white;
    }

.custom-modal-cancel-btn {
    font-weight: bold;
}

    .custom-modal-cancel-btn:hover {
        background-color: #6099ca;
        color: white;
        font-weight: bold;
    }

.chkChoice label {
    margin-right: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 5px;
    color: #142658;
    border-color: #142658;
    border-radius: 50px;
}

.chkChoice input {
    padding-left: 20px;
    margin-left: 20px;
}

【问题讨论】：

请分享您的目录结构以及 html 是如何在浏览器中实际生成的。
为什么是runat="server"？你需要用 css 做任何服务器端的事情吗？
我只是从我搜索的其他问题中尝试过，但对我来说没有任何效果
在你做的每一个测试中，当你从浏览器运行你的应用程序时，检查 HTML 源代码，看看那里正在呈现什么。另外，尝试从网络浏览器导航到该文件，例如：http://localhost:1234/CSS/customStyles.css -- 如果您看到任何错误，请在此处分享错误。
刚刚更新，好像文件上只出现了几个css，其余的忽略了

标签： html css asp.net

【解决方案1】：

请尝试使用基本路径：

<link rel="stylesheet" type="text/css" href="<%= HttpContext.Current.Request.ApplicationPath %>/CSS/customStyles.css" runat="server" />

【讨论】：

我放在内容页眉上什么都没有

【解决方案2】：

我尝试在同一个文件夹中创建一个新的 css 文件并将代码发布到那里并且它工作。我在其他 CSS 文件上有更多代码，我检查了几次所有格式都很好，我仍在试图找出导致代码无法读取的原因，所以现在解决方案是将代码放在不同的空文件中css文件

【讨论】：