Google Chrome 开发者工具 - CSS 文件显示为空答案

【问题标题】：Google Chrome Developer tools -CSS file is shown emptyGoogle Chrome 开发者工具 - CSS 文件显示为空
【发布时间】：2017-10-05 17:16:28
【问题描述】：

感谢您宝贵的时间；我是 Web 开发的初学者，我正在尝试使用 html 和 css 我发现 css 样式没有应用于 html 并且 chrome 开发人员工具显示它为空（文件存在，但我在 css 文件中编写的代码似乎不存在）请帮忙！

index.html 文件

<!DOCTYPE html>
<html>
<head>
  <title>MY WEB PAGE </title>
  <link type="text/css" href="style.css"  rel="stylesheet" >
</head>
  <body>
  <h1>THIS IS MY WEB PAGE </h1>
    <p>
    css applied to this part of the code isnt being shown in the developers
    tools
    </p>
  </body>
</html>

style.css 文件

body{
  background-color:black;;
}
h1{
  color:white;
  font-style: italic;
  font-family: sans-serif;
}
p{
  font-family: serif;
  color:yellow;
  font-style: oblique;
}

【问题讨论】：

在文件管理器中检查您的 Web 服务器配置和 CSS 文件本身。
傻事要检查：你确定你在编辑器中保存了 CSS 文件吗？你确定文件在正确的位置吗？在文件管理器中，如果打开 CSS 文件，是不是空白？
我使用了http-server，是的，文件保存在编辑器中，位置正确
所以你可以访问your-server.com/style.css?
以 UTF8 编码重新保存 CSS 文件。

标签： css html google-chrome-devtools

【解决方案1】：

您的第一行可能缺少尖括号，或者可能是复制粘贴错误。应该是：<!DOCTYPE html>

还可以查看 Chrome 工具栏中的“网络”选项卡，确保它能够找到您的 style.css 并且它包含正确的 CSS。

根据托管方式，您可能需要按 Ctrl-F5 来告诉浏览器下载所有内容而不是缓存。

【讨论】：

复制粘贴错误，我也累了刷新
Chrome 工具栏中的网络标签显示什么？你在 style.css 上获得 200 分吗？

【解决方案2】：

您必须将 css 和 html 文件保存在与您写入的文件夹相同的文件夹中

【讨论】：

它们保存在同一个文件夹中