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

标签 html css

所以我试图将我的 HTML 文件链接到 CSS 文件,以便使用我在 CSS 文件上创建的跨度。

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

这是我的文件的内容。

Logan_Tucker_Style_Sheet.cssLogan_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>

最佳答案

看起来您的 HTML 文件没有看到 CSS 文件。请尝试以下步骤:

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

关于html - 如何使用 <link> 引用 HTML 中的另一个 .css 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52981033/

相关文章:

javascript - 在 &lt;script&gt; 标签之间执行的异步代码

javascript - 让 jQuery 插件相互协作(特别是 Jrumble 和 Masonry)

javascript - 如何拖放某些东西但它不会消失所以我们可以继续拖放它

html - Opera Top 位置渲染问题

javascript - 需要运行 javascript 后从 php 加载的动态图像

css - 破解 IE 背景大小问题的最佳方法

javascript - 如何在没有所有 HTML 的情况下将焦点设置到 HTML 输入元素?

html - 如何判断给 img 一个固定的、始终可见的位置、填满屏幕并且没有溢出? (没有背景元素))

html - Bootstrap-select 始终打开

php - 我该怎么做才能清理我的 php 文件以不在其中包含 html 和 css?