Question

我是初学者并且遇到以下问题：

当我将css直接插入我的.html文件的头部时，我得到了一个很好的结果： typed into the head

但是当我将.css文件链接到头部时，第一个单词（＆＃34; Holy＆＃34;）没有正确显示，如下所示： Linked into the Head

我已经查看了以确保css是相同的，无论是粘贴还是链接，我目前都不知所措。任何见解将不胜感激。提前谢谢。

这是css：

<span class="holy"></span>
<span class="waiving"></span>
<span class="american"></span>
<span class="flag"></span>
<span class="batman"></span>

<style>
  .holy {
    background-color: red;
    color: white;
  }
  .waiving {
    background-color: white;
    color: blue;
  }
  .american {
    background-color: blue;
    color: white;
  }
  .flag {
    background-color: white;
    color: red;
  }
  .batman {
    background-color: black;
    color: yellow;
  }
</style>

这就是我只在First＆＃34; Holy＆＃34;不起作用：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="batman_with_css.css">
</head>

<body>
  <span class="holy">Holy</span>
  <span class="waiving">Waiving</span>
  <span class="american">American</span>
  <span class="flag">Flag</span>
  <span class="batman">Batman!!!</span>
  <br>
  <img src="https://i.pinimg.com/736x/af/7b/d3/af7bd3df85c1397456084b29e3729269--keaton-batman-batman-car.jpg">

</body>
<html>

这是带有css的html文件，其中包括第一个单词＆＃34; Holy＆＃34;确实有效：

<!DOCTYPE html>
<html>
<head>
  <span class="holy"></span>
  <span class="waiving"></span>
  <span class="american"></span>
  <span class="flag"></span>
  <span class="batman"></span>

  <style>
    .holy {
      background-color: red;
      color: white;
    }
    .waiving {
      background-color: white;
      color: blue;
    }
    .american {
      background-color: blue;
      color: white;
    }
    .flag {
      background-color: white;
      color: red;
    }
    .batman {
      background-color: black;
      color: yellow;
    }
  </style>

</head>
<body>
  <span class="holy">Holy</span>
  <span class="waiving">Waiving</span>
  <span class="american">American</span>
  <span class="Flag">Flag</span>
  <span class="batman">Batman!!!</span>
  <br>
  <img src="https://i.pinimg.com/736x/af/7b/d3/af7bd3df85c1397456084b29e3729269--keaton-batman-batman-car.jpg">
</body>
</html>

Answer 1

您不应该在样式表中添加HTML代码，您可以通过在顶部添加这些span元素来实现这一点。
更改您的CSS文件，使其看起来像这样......

  .holy {
background-color: red;
color: white;
}
.waiving {
background-color: white;
color: blue;
}
.american {
background-color: blue;
color: white;
}
.flag {
background-color: white;
color: red;
}
.batman {
background-color: black;
color: yellow;
}

如果我的css被输入head或链接到.css文件，为什么我会得到不同的结果？

1 个答案: