CSS样式表没有响应与chrome一起使用答案

【问题标题】：CSS stylesheet not responding working with chromeCSS样式表没有响应与chrome一起使用
【发布时间】：2018-07-26 01:21:14
【问题描述】：

我最近开始了我的第一个程序（非常基础），我立即遇到了问题！

<link rel="stylesheet" type="text/css" href="gweeble.css" />

使用上面的代码，我尝试附加一个 CSS 样式表。为了确保不只是我，我从一个示例中复制粘贴了代码。为了确保 CSS 是正确的，我把它放在我的 HTML 文件头部的一个样式标签中……它起作用了。接下来，我在 chrome 中输入了开发工具（我正在使用的浏览器。这是在使用插入符号编辑器的 Chromebook 上）并且 css 文件甚至不存在！如果您有任何想法，我真的需要帮助！

<!DOCTYPE HTML>
  <html>
    <head>
      <link rel="stylesheet" type="text/css" href="gweeble.css" />
      <title>gweeble</title>
        <meta charset="UTF-8">
        <meta name="description" content="uhhhh">
        <meta name="keywords" content="google, grooble, gweeble, bored, I'm bored, Im bored, ugh, uhhh">
        <meta name="author" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

</body>

body {
    background-color: #4542f4; }

【问题讨论】：

如果您使用 Chrome 查看您的页面，您可以按 F12 打开开发者工具。打开控制台并刷新您的页面。还要检查网络选项卡。这些内容中应该有一些内容可以为您提供有关问题所在的线索。
它可能是区分大小写的名称“Gweeble.css”，不会与“gweeble.css”一起加载。
我查看了开发工具并刷新了。我认为它不区分大小写，但即使是，它也遵循与大写字母相同的模式......对不起，我不知道如何更好地解释这一点
那么开发工具的网络选项卡上的gweeble.css 是什么颜色？是红色还是黑色。
到目前为止的所有答案都很好，但请尝试在 chrome 中清除浏览器数据，然后在开发时使用中的

标签： html css google-chrome stylesheet caret

【解决方案1】：

这通常是因为<link> 元素中的链接错误。您的 HTML 和 CSS 文件在文件结构中是否处于同一级别？如果您需要返回一个级别，您可能需要执行href="./gweeble.css" 也尝试对您的浏览器进行硬刷新（如果您使用的是 Chrome，请按住 shift 键并单击刷新按钮）以清除缓存。哦，请仔细检查 CSS 文件名的拼写以确保匹配正确。

【讨论】：

拼写正确，我已经清除了缓存，文件在同一个文件夹中......我已经尝试了所有......我是stockflow的新手，所以我没有'不知道如何将我的代码放入......所以我
gweeble
@noobiecoder 将您的标记放入您的问题中，而不是作为对其他人答案的评论。
终于明白了...必须在 iPhone 上安装一个文本编辑器，然后通过 google drive 和其他一些东西发送它...抱歉随机的元数据描述和东西...跨度>
另外，我刚刚将您的代码转储到文件夹中的 html 和 css 文件中，并且可以正常工作。这意味着它必须是文件结构或命名问题。你有没有调用你的html文件index.html

【解决方案2】：

另一种解决方案！！！！这是浏览器可能无法加载您的 css 文件的另一个原因....

我已经阅读了这里（以及其他几个网站）的所有回复，但仍然无法将我明显有效的 css 文件加载到我的浏览器中（使用检查器确认 - 右键单击 Chrome 中的代码并查看“来源”标签）。

我通常使用 Chrome，但也尝试过 Edge，结果相同 - html5 代码运行良好，但布局未呈现。检查显示 css 文件从未加载过，更不用说执行了。

我的问题原来是 html 代码已从屏幕教程中复制并粘贴到 Notepad ++ 中。在这个过程中，我最终得到了错误的语音（“）标记，所以我的猜测是'meta charset =“utf-8”'语句与代码中的语音标记类型不一致？

底线是，通过简单地删除然后重新键入来更改所有语音标记会导致语音标记和工作代码的物理形状不同。

希望这对您有所帮助....

【讨论】：

【解决方案3】：

您确定您查看的是正确的 HTML 文件吗？您还可以检查页面源 (CTRL + U) 以检查文档中的标记。

【讨论】：

我确信我正在查看正确的文件。我在浏览器中打开开发工具来检查... html 出现了，css 没有。你试过了吗？我不知道是我的浏览器/电脑还是代码本身...
这个<link rel="stylesheet" type="text/css" href="gweeble.css" /> 没有出现在你的意思是查看开发工具时的标记中？如果您确实使用这样的代码行查看了正确 HTML 文件，那就太奇怪了。
html链接标签出现了，但是css没有影响，css文件不会出现在开发工具中。
在开发工具上查看页面源代码后，尝试打开（转到）gweeble.css 的链接。然后看看你能在那里找到什么。
执行 CTRL + U 或检查元素 (Chrome)，然后所有资产和链接都带有下划线

【解决方案4】：

我想通了！我的电脑设置为自动将我的文件放入谷歌驱动器部分☹️。只需将文件夹移动到下载位置即可解决问题。

【讨论】：

【解决方案5】：

如果您使用 node.js、express 和 EJS 作为模板引擎

我刚刚在我的网站上发现了这个错误并查看了这里。我面临的问题是如果您的公共目录中有 CSS 文件，即视图（在我的情况下）

注意：您可以从浏览器开发工具访问您的 CSS 文件。使用 Chrome，转到开发中的网络。部分，然后单击 CSS 文件。并检查标题。

确保在链接任何 CSS 文件时没有任何错误

类型：“文本/css”
正确的href = ""

现在，如果您仍然无法访问它，所以问题可能是您的浏览器可能无法正确访问该文件。检查它应该在哪里以及你放置的路径。

在我的例子中：localhost:3000/views/css/style.css 抛出错误

但实际链接应该是：localhost:3000/css/style.css工作

因此，相应地更改 href，并删除介于两者之间的额外文件夹，以便您的浏览器可以直接访问它。

【讨论】：