是什么导致我的HTML文件无法加载CSS？_Html_Css

是什么导致我的HTML文件无法加载CSS？

html css

是什么导致我的HTML文件无法加载CSS？,html,css,Html,Css,所有这些看起来都是正确的，但是我的CSS没有被加载。它出现在使用chrome的devTools上的控制台中，但实际上没有出现CSS 我已经回答了很多关于这个的问题，但是没有一个答案能提供解决方案。已在devTools中禁用缓存，无更改，重新启用它无更改。我已经三次检查了我文件名的拼写。已将文件移动到同一目录已尝试添加type=text/css-无更改。 HTML： <!DOCTYPE html> <head> <meta charset="utf-8"&

所有这些看起来都是正确的，但是我的CSS没有被加载。它出现在使用chrome的devTools上的控制台中，但实际上没有出现CSS

我已经回答了很多关于这个的问题，但是没有一个答案能提供解决方案。已在devTools中禁用缓存，无更改，重新启用它无更改。我已经三次检查了我文件名的拼写。已将文件移动到同一目录已尝试添加type=text/css-无更改。 HTML：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Army Builder</title>
  <link href="styles.css" rel="stylesheet">
</head>
  <div id='Container'>
    <div id="unitList">Unit List
    <ul id="list" style="list-style-type:none"></ul>
    </div>
    <div id="roster">Army Roster
    <ul id="armyRoster" style="list-style-type:none"></ul>
    </div>
    <script src="scripts/main.js"></script>

  </div>

我很确定这一定是一个简单的错误，但我的眼睛看不到它？

您在HTML中使用ID，但在CSS中使用类选择器。将CSS更改为：

#Container {
  background-color: blue;
  display: grid;
  grid-template-rows: [one] 50px [two] 50px [rowEnd];
  grid-template-columns: [one] 150px [two] 300px [three] 150px [end];
  grid-column-gap: 5px;
  grid-row-gap: 10px;
  text-align: center;
}

#unitList {
  background-color: red;
  grid-column: one / two;
  grid-row: one / rowEnd;
}

#roster {
  background-color: green;
  grid-column: three / end;
  grid-row: one / rowEnd;
}

或者，您可以将HTML更改为使用类而不是ID：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Army Builder</title>
  <link href="styles.css" rel="stylesheet">
</head>
  <div class='Container'>
    <div class="unitList">Unit List
    <ul id="list" style="list-style-type:none"></ul>
    </div>
    <div class="roster">Army Roster
    <ul id="armyRoster" style="list-style-type:none"></ul>
    </div>
    <script src="scripts/main.js"></script>

</div>

您在HTML中使用ID，但在CSS中使用类选择器。将CSS更改为：

#Container {
  background-color: blue;
  display: grid;
  grid-template-rows: [one] 50px [two] 50px [rowEnd];
  grid-template-columns: [one] 150px [two] 300px [three] 150px [end];
  grid-column-gap: 5px;
  grid-row-gap: 10px;
  text-align: center;
}

#unitList {
  background-color: red;
  grid-column: one / two;
  grid-row: one / rowEnd;
}

#roster {
  background-color: green;
  grid-column: three / end;
  grid-row: one / rowEnd;
}

或者，您可以将HTML更改为使用类而不是ID：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Army Builder</title>
  <link href="styles.css" rel="stylesheet">
</head>
  <div class='Container'>
    <div class="unitList">Unit List
    <ul id="list" style="list-style-type:none"></ul>
    </div>
    <div class="roster">Army Roster
    <ul id="armyRoster" style="list-style-type:none"></ul>
    </div>
    <script src="scripts/main.js"></script>

</div>

你的css有错误

在Html中，您正在编写需要在css中定义为和类为的id。

您的css中有错误

在Html中，您正在编写需要在css中定义为和类为的id。

请原谅奇怪的标题，stack在我给它一个简单的描述性标题时遇到了一些严重问题。从添加和标记开始怎么样？请原谅奇怪的标题，stack在我给它一个简单的描述性标题时遇到了一些严重的问题。从添加和标记开始怎么样？也可以在HTML中将id替换为class，而不是在HTML中将id替换为class