外部 CSS 文件未加载到 HTML 文件中答案

【问题标题】：External CSS file not loading in HTML file外部 CSS 文件未加载到 HTML 文件中
【发布时间】：2016-03-14 08:36:06
【问题描述】：

我正在尝试使用 jQuery 加载动画。我尝试了不同的css文件路径，比如

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

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

但 CSS 文件仍未加载到 html 文件中。当我将 CSS 文件保存在与 html 文件相同的文件夹中时，它可以正常工作。

我的文件夹结构...

index.html

 <html>
 <head>
 <title>Loading Animation using jQuery</title>
 <script src="js/jquery.js"></script>
 <script src="js/jquery.backstretch.js"></script>
 <link href="css/animation.css" type="text/css" rel="stylesheet">
 </head>
 <body>
 <div id="loader">
 </div>
 <h2>Hi There</h2>
  <script>

    $(window).load(function(){
        $("#loader").delay(10000).hide(0).fadeOut("slow");
    });
  </script>
 </body>
 </html>

animation.css

   #loader{
    z-index:999999;
    display:block;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249); 
     }

js 文件加载正确，但 css 文件加载不正确..不明白我哪里出错了..

【问题讨论】：

你的文件夹结构是什么？ html 和 css 文件是怎么放置的？
@gurvinder372 css 文件位于 css 文件夹中，如上面的屏幕截图所示。如果需要任何额外信息，请告诉我。
您是否尝试过查看控制台？您的 JavaScript 文件可能存在错误，导致您的 CSS 无法加载。您应该将 CSS 放在脚本标签之前，以防止这种情况发生。
我建议使用浏览器中的开发者控制台找出问题所在。
在chrome中，F12进入开发者工具，必要时进入网络并按CSS类型过滤，如果文件显示为红色则表示尚未加载；所以右键单击并在新选项卡中打开链接以检查地址栏中的绝对路径以识别问题。

标签： javascript html css href external

【解决方案1】：

在编辑器中打开您的项目，转到您的 css 文件所在的文件夹。将您的 css 文件拖放到代码上。它会自动为您生成路径。希望这会有所帮助。

【讨论】：

【解决方案2】：

在网络标签中打开您的开发者工具 - 选择 CSS 选项。应该会看到类似下图的内容。

在你的情况下应该是404，你可以复制浏览器请求的完整链接，这样调试和修复对你来说会更容易。

【讨论】：

【解决方案3】：

我根据您的结构看到了您的文件夹结构，以下是您的外部 css 链接的正确链接。

并检查动画.css 在 css 文件夹中是否可用

【讨论】：

【解决方案4】：

加载您的 CSS 文件应该没有任何问题，

因为文件夹 CSS 与您的 HTML 文件位于同一目录级别。

但是 CSS 文件中使用的图像比您的 CSS 文件高一级。

尝试改变

background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249);

到

background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);

【讨论】：

【解决方案5】：

如果您在 chrome 浏览器中运行此应用程序。只需按 clt+shift+j 或 F12 即可查看错误。Like the attached image you can see the error on console tab, just fix that

【讨论】：

【解决方案6】：

您可以使用以下代码引用您的 CSS 文件

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

但你必须修改你的 CSS 文件

background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);

【讨论】：

【解决方案7】：

您需要首先通过将网络选项卡检查为 Yasser stated 来确定是否确实未加载 CSS 文件。

如果CSS没有加载，那么你需要检查CSS文件是否 animation.css 实际上存在于您的 CSS 文件夹中。
如果 CSS 已加载，请借助开发人员工具了解正在应用的 CSS。如果有问题，请分享。

【讨论】：