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

Question

我正在尝试通过 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 文件不是..无法理解我哪里出错了..

Answer 1

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

Answer 2

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

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

Answer 3

我根据你的结构看到了你的文件夹结构，下面是你外部 css link.

的正确 link

并检查 animation.css 在 css 文件夹

中是否可用

Answer 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);

Answer 5

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

Answer 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);

Answer 7

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

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

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

External CSS file not loading in HTML file

html

javascript

css

external

href