Question

因此，我尝试将HTML文件链接到CSS文件，以便使用在CSS文件上创建的跨度。

我正在使用Komodo应用程序对此进行编码。因此，每次我在浏览器中运行HTML文件时，它都是黑色文本，没有背景。请告诉我我在做错什么。

这是我文件的内容。

Logan_Tucker_Style_Sheet.css 和 Logan_Tucker_Page_With_Link.html

span.firstlinewordone {
  background: lime;
  color: red
}

span.firstlinewordtwo {
  background: #00FF00;
  color: #FF0000
}

span.firstlinewordthree {
  background: rgb(00, 255, 00);
  color: rgb(255, 00, 00)
}

span.secondlinewordone {
  background: lime;
  color: blue
}

span.secondlinewordtwo {
  background: #00FF00;
  color: #0000FF
}

span.secondlinewordthree {
  background: rgb(00, 255, 00);
  color: rgb(00, 00, 255)
}

span.thirdlinewordone {
  background: lime;
  color: aqua
}

span.thirdlinewordtwo {
  background: #00FF00;
  color: #00FFFF
}

span.thirdlinewordthree {
  background: rgb(00, 255, 00);
  color: rgb(00, 255, 255)
}

<!DOCTYPE HTML>

<html>

<head>
  <title> Using Custom Colors </title>
  <link rel="stylesheet" type="text/css" href="Logan_Tucker_Style_Sheet.css">
</head>

<body>
  <span class="firstlinewordone">
    One
  </span>

  <span class="firstlinewordtwo">
    Two
  </span>

  <span class="firstlinewordthree">
    Three
  </span>

  <br>

  <span class="secondlinewordone">
    One
  </span>

  <span class="secondlinewordtwo">
    Two
  </span>

  <span class="secondlinewordthree">
    Three
  </span>

  <br>

  <span class="thirdlinewordone">
      One
  </span>

  <span class="thirdlinewordtwo">
    Two
  </span>

  <span class="thirdlinewordthree">
    Three
  </span>

  <br>

</body>

</html>

Answer 1

好像您的HTML文件看不到CSS文件。请尝试执行以下步骤：

右键单击元素，然后选择“检查元素”选项。应该会出现“开发人员”面板，让您可以看到应用于所选元素的样式
检查浏览器控制台是否有任何错误。特别是对于“未找到”错误。这些将显示您的浏览器在哪里搜索链接文件。
在浏览器的检查器中打开HTML代码，找到链接标签，然后尝试在新页面中打开文件。如果一切正常，则应显示CSS文件的内容。
在页面刷新时清除浏览器的缓存。在Windows中，您可以通过按Ctrl + F5
如果没有帮助，则外面有问题。如您所见，所提供的代码本身没有任何错误，因为它可以在此页面上正确显示。

Answer 2

HTML和CSS文件位于同一文件夹中？如果css放置在其他位置，则应直接链接到它。 Css / example.css。

此外，您无需在CSS中使用span.classname，请尝试不使用span而仅使用.classname。

如何使用<link />引用HTML中的另一个.css文件

2 个答案: