我的 CSS 文件没有正确链接到我的 HTML，或者 Jumbotron 不会更改文本颜色答案

【问题标题】：Either my CSS file is not linking to my HTML properly or Jumbotron won't change text colors我的 CSS 文件没有正确链接到我的 HTML，或者 Jumbotron 不会更改文本颜色
【发布时间】：2018-01-05 03:42:47
【问题描述】：

我在设置文本颜色时遇到问题。我想将 h1 元素设置为 #513271 但它似乎不想工作。下面是我当前的代码，下面是我尝试过的几种解决方案，但也没有用。

我的 CSS 保存为 stylesheet.css 并且它与我的 HTML 位于同一文件夹中（即贡品Page.html）。

jumbotron h1 {
  color: #513271;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="\stylesheet.css" rel="stylesheet" />

<html>

<head>
  <title>Lizzy McGuire, an Evolution</title>
</head>

<div class="container">
  <div class="jumbotron">

    <body>
      <h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
    </body>
  </div>
</div>

</html>

我也尝试了以下解决方案。我已经亲自尝试了所有这些，以各种组合等方式。

更改 CSS 文件路径
- C:\Users\Ashle\Coding\Assignments\FCC -- 致敬页面\stylesheet.css
- C:\Users\Ashle\Coding\Assignments\FCC -- 致敬页面\
- \stylesheet.css（我用\到\\\）
- stylesheet.css\
更改外部 CSS 链接样式（侧插入符号之间没有空格，只需包含它们，因此会在下面打印）
更改 CSS 中的 h1 元素名称
- h1，#h1，.h1
- jumbotron h1，#jumbotron h1，.jumbotron h1
- jumbotron-h1，#jumbotron-h1，.jumbotron-h1
- 紫色文字，#purple 文字，.purple 文字
- 紫色文本，#purple-text，.purple-text
使用内联元素更改字体颜色
- 嘿嘿，嘿嘿。 现在，奇怪的是，这会让标题变成紫色。

非常感谢您的帮助！

【问题讨论】：

您的 HTML 无效。 <body> 不能在它所在的位置，并且您没有文档类型。您的 CSS 中也未正确指定您的类名。这里的问题太多了。一团糟。
@Rob 感谢您指出所有这些！我猜我看不到所有树木的森林。这确实是一团糟，但这就是学习的乐趣。非常感谢您的时间和帮助！

标签： html css bootstrap-4

【解决方案1】：

我有一个类似的问题，我的样式表没有反映在我的 HTML 文档中。我终于发现我的 .css 文件实际上是一个 .css.txt 文件。 “我的风格.css.txt”。

在您计算机上的任何目录中（我使用的是 html/css 文件所在的目录）单击顶部的查看，然后单击选项。选择查看选项卡，然后取消选中“隐藏已知文件类型的扩展名”选项。当取消选中此项时，我能够从 .css 文件中删除 .txt 扩展名，它成为一个真正的 .css 文件并完美地反映在我的 .html 文档中。

【讨论】：

这与问题无关，不回答这个问题。 SO 不是提供一般性建议的平台，此区域仅针对问题的具体答案。请删除。

【解决方案2】：

您的标签没有正确放置，也没有您的外部 css 标签。

和

该类不用于样式（除非您使用引导程序）。

这是正确的：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Lizzy McGuire, an Evolution</title>
    <link rel="stylesheet" href="dir/style.css" > <!-- put the external css link here -->
</head>

<body>
  <div class="container">
    <div class="jumbotron">
      <h1>Hey now, hey now</h1>
    </div>
  </div>
</body>

</html>

CSS：

  jumbotron h1 {
    color: #513271;
    text-align: center;
}

我建议你练习做外部 css 文件而不是 inline/internal。

【讨论】：

嘿艾吉尔，谢谢！我还在学习，所以每当有人花时间停下来帮助我时，我都非常感激。
乐于助人:)

【解决方案3】：

希望我的回答对你有帮助：

这是您的原始代码：

<html>
  <head>
    <title>Lizzy McGuire, an Evolution</title>
  </head>

  <div class="container">
    <div class="jumbotron">
      <body>
        <h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
      </body>
    </div>
  </div>
</html>

body 标签之外不能有 div 元素。

您需要在 head 标签中包含指向 css 文件的链接。像这样修复你的代码：

<html>
  <head>
    <title>Lizzy McGuire, an Evolution</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>Hey now, hey now.</h1>
      </div>
    </div>
  </body>
  </html>

您可以看到在您的 css 文件中声明了一个“jumbotron h1”，但在您的 HTML 代码中，jumbotron 似乎是一个类，并且要在外部 css 文件中设置一个类的样式，您需要在班级名称。您的 CSS 需要如下所示：

.jumbotron h1 {
  color: #513271;
}

希望对您有所帮助。

【讨论】：

非常感谢您的帮助！！令人惊讶的是，一旦有人指出，事情就会变得如此明显。
没问题阿什利 :)

【解决方案4】：

对于您的 CSS，您想要的是

.jumbotron h1 {
    color: #513271;
}

注意 jumbotron 之前的句点以表明它是一个类

【讨论】：

他的 HTML 完全无效。
嘿大卫，谢谢你的帮助！！非常感谢您抽出宝贵时间回复！