【问题标题】:CSS doesn't work as expected in HTML files in DjangoCSS 在 Django 的 HTML 文件中无法按预期工作
【发布时间】:2022-07-08 16:59:35
【问题描述】:

我想知道为什么 Django 中的静态 CSS 文件总是不能按预期工作?我尝试在 HTML 样式标签中包含 CSS 样式,并在 HTML 中加载静态文件。只有直接在标签属性中添加样式才有效。

有些 CSS 代码在静态文件夹中运行良好,有些则不行。我什至无法通过 CSS 文件设置 h1 的颜色样式,这是最简单的样式之一。

仍然找不到完美的方法来解决这个问题。

请帮我解决这个问题>

This is the 'base.html' file, where I extend all stuff from

This is 'index.html', extended from 'base.html'

在第二张图片中,您可以看到没有附加我的 CSS 静态文件的链接标签,因为它不适合我,所以我把它去掉了。并添加了一个样式标签。

问题是,如何包含 CSS 文件才是正确的方法??

好像我扩展的范围是从'base.html'的body标签开始的,所以head标签(应该放置链接标签的地方)的东西也被扩展了。我想这就是为什么我的 CSS 文件没有正确加载的问题?

如果是,有人可以帮我解决一下吗>

【问题讨论】:

  • 请提供足够的代码,以便其他人更好地理解或重现问题。

标签: html css django


【解决方案1】:

在 Firefox 中,我认为在 chrome 中按 F12 可以显示控制台,然后我们可以查看是否所有 .css 文件都已正确加载,如果没有,有什么问题。还可以选择元素并查看应用了哪些 CSS 样式以及它们来自何处。 Django 有特定的方法来管理可能配置错误的静态文件,如果模板中的标签有效,那么问题很可能出在静态文件中。

如果 Django 不能提供静态文件,它可能会在控制台中产生错误消息。

无论如何,我们可能需要模板中的一些代码来查看发生了什么。如果配置正确,它可以加载静态文件,没有问题,但它有一些步骤。 (这里解释https://docs.djangoproject.com/en/4.0/howto/static-files/

你可以使用 .js 静态文件吗?或者任何静态文件?

2 可能缺少的重要部分。一是使用: python manage.py collectstatic 每次更改静态文件后的命令。 https://docs.djangoproject.com/en/4.0/ref/contrib/staticfiles/#django-admin-collectstatic

另一种是使用静态文件启动模板: {% 加载静态 %}

然后记住文件本身的语法,例如:

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

所以 django 知道要加载静态文件。

回复/编辑 2:

标签似乎没问题(加载静态部分)。我认为您不需要在同一个模板中重复它们,即使它扩展了其他东西,也可以在每个使用静态文件的模板中设置一次。

所以你需要三样东西。一种是在模板中包含标签,就像您一样,另一种是在您的静态目录中包含静态文件(在您的设置文件中的 STATIC_URL 中指定),最后在每次更改后使用 collectstatic 命令。

让我们说我们看看

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

看起来不错。这表明你有两件事可以让它工作。一个在您的静态文件目录中(在您的设置文件中定义),您有:

static(or whatever name)/css subdirectory 然后你就有了 index.css 文件。 此外,在您在那里添加 css 文件后,至少完成一次 python manage.py collectstatic。

其余的似乎来自 CDNS(基本上是其他托管站点)Django 应该自己加载它们,如果那里的托管允许的话。

基本上就是这样,是的。这里的一切似乎都很好。如果还是有问题,请检查settings py中的static目录,确保修改后使用了collectstatic。

错误将显示在终端中,因此您可以查看是否有内容未加载,原因是什么。 :)

静态文件中的错误是需要检查的两个地方。一个是 python 提供信息的终端(如果看不到终端,则在服务器上提供日志文件),另一个是浏览器本身 - 它会显示为什么它没有加载静态文件。

【讨论】:

  • 先生,感谢您的评论,我已经阅读了您提供的一些内容。我还添加了一些支持我的问题的图像。如果我做错了什么,请告诉我。谢谢!!
  • Can't fit it all in cmets 将编辑第一篇文章。 :)
【解决方案2】:

有一次我在同一个问题上花费了大量时间。我从 html 页面顶部删除了 !DOCTYPE html,突然它按预期工作了。

【讨论】:

    猜你喜欢
    • 2022-01-09
    • 1970-01-01
    • 2015-01-26
    • 1970-01-01
    • 1970-01-01
    • 2020-07-14
    • 1970-01-01
    • 2014-03-01
    • 2015-06-25
    相关资源
    最近更新 更多