Question

Here is the error now showing in browser console, anyone please explain what is this?这是html文件的屏幕截图

我正在使用Bootstrap构建网页，已将Bootstrap CSS和CSS添加到“ head”标签中。这是代码-

mstatussend() {
   if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
     this.roundedInput = 'invalid';
   }
   else if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
     this.roundedInput = 'invalid';
   }
   else {
     this.roundedInput = 'valid';
     var s1filtered = this.s1mstatus.filter(element => element.code == this.s1mstatus_get);
     console.log(s1filtered);
   }
 };

这是我添加到CSS中的内容-

 <head>


     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!--Bootstrap css-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

      <title>
        first web page using bootstrap
      </title>
<!-- Font awesome for brand name-->
      <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"> 

      <!--Our CSS-->
      <link rel="stylesheet" href="CSS\style.css" >

  </head>

这是整个代码-

.mybanner{

  background-color: rgb(12, 8, 5);
  text-align: center;
}


.mybg{

  background-color: rgb(161, 86, 86);
}

.other{
  width: 30px;
 height: 30px;

}

我已经正确添加了类，不知道为什么它不起作用。请帮助我。谢谢。

Answer 1

您位于html文件夹中，应使用..移出该文件夹，然后告诉要渲染/ CSS /的文件夹，然后选择文件style.css 使用这个：

<link rel="stylesheet" href="../CSS/style.css" />

Answer 2

请交换以下内容：

 <link rel="stylesheet" href="CSS\style.css" >

对此：

 <link rel="stylesheet" href="../CSS/style.css" >

编辑：正如@ renaldo-balaj所言，您位于HTML文件夹中，因此要访问CSS文件夹，您将需要使用../在文件夹目录中跳一级，然后进入CSS，然后抓取样式.css

还要添加您使用了错误的\

编辑29/11：

好吧，我已经删除了不需要的HTML来表明其工作正常。.您必须错误地实施了解决方案。您有2个正确的答案，由于缺乏相关背景，并且由于与此相对路径问题有关的其他100篇文章过于重复，因此应关闭该篇文章。

<!DOCTYPE html>
<html lang="en">
  <head>


     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <title>
        first web page using bootstrap
      </title>

      <!--Our CSS-->
      <link rel="stylesheet" href="../CSS/style.css" >
  </head> 
<body>

</body>
</html>

body {
    background-color: black;
}

文件夹结构：

Project
│ 
│   
├───CSS
│       style.css
│       
└───HTML
        index.html

因此，在这里我将尝试进一步解释您的问题。

根据@birspider的回答，它显示HTML验证程序的状态，在文件路径中不使用

\反斜杠。

您将index.html放在一个静态网站不常见的HTML文件夹中，因此，除非您的CSS文件与该HTML文件位于同一目录中，否则请使用../跳出HTML文件夹，然后/CSS进入CSS文件夹，然后/style.css抓住style.css文件并提供服务。

再次，您的DevTools控制台会告知您它试图查找的位置，并且您应该可以从那里进行调试。

请关闭此帖并接受答案。

来自浏览器的图像显示了背景色：黑色；通过style.css文件https://ibb.co/ys1Kvvt

工作

Answer 3

您的html标记无效：

尝试https://validator.nu/，您会发现（以及其他）

Error: Bad value CSS\style.css for attribute href on 
element link: Backslash ("\") used as path segment delimiter.

At line 20
   <link rel="stylesheet" href="CSS\style.css" >

---

Error: Bad value ../Image\unsplash.jpg for attribute src on 
element img: Backslash ("\") used as path segment delimiter.

At line 84
          <img src="../Image\unsplash.jpg"  alt="Los Angeles" style="width:100%;">↩  

---

Error: Duplicate attribute class.

At line 124

ass="row" class="mybanner" sty

我无法将外部CSS链接到HTML

3 个答案: