如何让 CSS 在 HTML 中显示答案

【问题标题】：How to get CSS to show in HTML如何让 CSS 在 HTML 中显示
【发布时间】：2020-04-15 22:09:34
【问题描述】：

我在将 CSS 链接到 HTML 页面时遇到问题。这两个文件都在同一个目录中，但是当我在 Chrome 的本地端口上运行时，我在终端中得到了这个（'test3' 是 html 文件）：

Not Found: /test3/sidebar.css
[15/Apr/2020 17:57:52] "GET /test3/sidebar.css HTTP/1.1" 404 8233

无论我如何更改 href 路径，除非我包含目录名称：css 文件名，否则该问题会出现一些变化，但即便如此，HTML 文件也不会继承 CSS 样式。

我正在开发侧边栏导航，这就是为什么名称是这样的原因，但我只是在下面包含了一条我正在使用的测试行：

.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Testang</title>
    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="sidebar.css" rel="stylesheet" type="text/css">

</head>
<body>

<h1> Test </h1>

</body>
</html>

如果我输入像这样的href

<link href="requests:sidebar.css" rel="stylesheet" type="text/css">

我没有收到错误，但我仍然没有看到 CSS 更改（“请求”是目录的名称）。

.css 文件：

h1 {
  color: red;
  font-size: 50px;
}

我刚从 PyCharm 切换过来。设置好 Atom 后，我从 PyCharm 文件夹中打开了 Atom 中的项目。其他一切似乎都正常。

【问题讨论】：

HTML文件和CSS文件在同一个文件夹吗？
是的 - 两者都在同一个文件夹中。它位于 django 应用程序的模板文件夹中。所以它是应用程序名称>模板>应用程序名称>html和css文件
你试过清空浏览器缓存吗？打开 Chrome DevTools，然后右键单击刷新按钮并选择“Empty Cache and Hard reload”。
万一有人检查了这一点，我确实在 cmets 和帖子的帮助下最终解决了这个问题。不确定是否有人能够删除帖子上的负面信息。在下面发布答案作为答案帖子。

标签： html css atom-editor

【解决方案1】：

代码看起来不错，没有错别字。确保 CSS 文件和 HTML 文件位于同一个文件夹中，并且它们不是文本文件并且它们具有扩展名，当然，文件已保存。

test3是父目录？

它只是 HTML 和 CSS 还是 Django 项目？

【讨论】：

好吧，至少我知道我不会发疯......但是，是的，这是一个 django 项目。 test3 是 html 文件，我认为它给出的错误很奇怪。 django 应用程序被称为“requests”，所以模板里面的文件夹结构是 requests>templates>requests>然后是 html 和 css 文件
您能否检查一下这是否对您有帮助？ stackoverflow.com/questions/24199029/…
这看起来很有希望，但我无法让它发挥作用。现在甚至让 runserver 工作也有问题。将重新启动一切并重试。
请不要在回答中向 OP 提问。请改用评论。请记住，SO 不是消息列表或论坛，它更像是一本在线参考书。

【解决方案2】：

由于 CSS 文件在同一个文件夹中，您可以尝试以下操作：

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

点告诉浏览器在与 HTML 相同的文件夹中搜索。

【讨论】：

【解决方案3】：

在 HTML 文件的开头添加：

{% load static %}

改变

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

到这样的事情：

<link href="{% static 'sidebar.css' %}" rel="stylesheet" type="text/css">

【讨论】：

刚试过，好像没用。我收到此错误"GET /static/sidebar.css HTTP/1.1" 404 1760。我是否可能需要将 css 文件移动到名为“static”或类似名称的新目录？
在 test3 文件夹中尝试创建另一个名为 static 的文件夹并将你的 css 文件放入其中并检查它是否有效@blueblob26
test3 不是文件夹 - 这是 html 文件的名称。当 test3 只是一个 html 文件时，我不知道为什么会出现这样的错误。
@blueblob26 所以在 test3 旁边创建一个静态文件夹
@blueblob26 了解更多详情：docs.djangoproject.com/en/3.0/intro/tutorial06

【解决方案4】：

我在主项目目录中创建了一个名为“static”的文件夹，然后在其中创建了一个名为“css”的目录。然后，这对我来说是最重要的事情，进入项目的 settings.py 并创建了指向该新文件夹的 STATICFILES_DIRS 路径。

根据我所阅读的内容，当我将其投入生产时，我需要做一些额外的工作。

# Static files (CSS, JavaScript, Images)
https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    "full folder path to static folder"
]

然后在我输入的HTML文件中：

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'css/sidebar.css' %}">
</head>

关键部分是顶部的load static 和指向{% static 'css/sidebar.css' %} 的href。

【讨论】：

欢迎来到 SO 并祝贺您的第一个答案！在创建问题或答案时，请简洁明了，避免浮夸——仅仅是对话的文本。非正式和友好是可以的，但尽量避免使用不会真正进一步传达信息的文字。有关更多信息，请参阅meta.stackoverflow.com/q/260776/128421 以及该问题右侧的相关链接。另外，请记住语法和正确的大小写很重要。