Question

我有这样的基本模板：

<head>
    <title>{% block title %}{% endblock %}</title>

    <link rel="stylesheet" href="/static/style.css"/>

当我刷新页面时，这个文本在日志中：

[01/Dec/2011 18:22:00] "GET /search/ HTTP/1.1" 200 2760
[01/Dec/2011 18:22:00] "GET /static/style.css HTTP/1.1" 200 54

因此，这意味着CSS正确地从服务器加载。但它不起作用！如果我将此CSS作为文本直接包含在基本模板中，它可以正常工作。静态文件配置没问题。

Answer 1

你是否把css放在一个将它放在基座头部的块中？

/* base.html */
<html>
    <head>
        <title>{% block title %}{% endblock %}</title>
        {% block extra_head %}{% endblock %}
    </head>
    <body>
        {% block content %}{% endblock %}
    </body>
</html>


/* another template */
{% extends 'base.html' %}
{% block title %}My Title{% endblock %}
{% block extra_head %}
    <link rel="stylesheet" href="/static/style.css"/>
{% endblock %}
{% block content %}
    <h1>This is my page!</h1>
{% endblock %}

在浏览器中，页面源如何显示？样式表在头上吗？你能点击链接看看实际的CSS吗？

Answer 2

这是一个非常晚的响应，但现在可能比五年前更加相关：确保您正在编辑的样式表不是由托管您网站的服务器生成的。

我不完全清楚@RankoR是否对style.css文件进行了更改，并且它们没有在网站上反映出来，或者是否将零样式应用于模板，但是如果你运行进入前者：您可以通过将自己的.css文件夹添加到根文件夹，并为其添加一个您尝试更改的定义，快速排除它在您与其最终呈现状态之间的某个位置生成的可能性。

假设您正在尝试自定义导航栏的样式 - 如果您想要将.navbar-inverse {background-color: #222; border-color: #090909 }更改为.navbar-inverse {background-color: #222; border-color: #090909; font:20px bold Arial, sans-serif }，请添加到新的空白.css文件.navbar-inverse2 {background-color: #222; border-color: #090909; font:20px bold Arial, sans-serif }，并将html中的.navbar-inverse标记更改为navbar-inverse2。如果您只是将样式表链接到<head>中的原始样式表下，那么会发生更改：您正在前往Solution Town的路上！

Answer 3

“不起作用”是什么意思？没有造型，图像缺失等等？您确定已将更改保存到CSS文件中吗？好像在/static/style.css上找到了一个文件，所以可能有些东西......

Answer 4

您是否使用STATIC_URL或MEDIA_URL访问css？如果你是，你是否在设置中为已安装的应用添加了django.contrib.contenttypes？同时在设置中检查STATICFILES_DIRS和STATIC_ROOT / MEDIA_ROOT。有关详细信息，请查看https://docs.djangoproject.com/en/1.3/ref/contrib/staticfiles/。此外，如果您使用MEDIA_URL，您可能会尝试在网址中提供媒体根目录，例如：

if settings.DEBUG:
urlpatterns += patterns('',        
    (r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT, 'show_indexes': True}),
)

Django模板扩展和CSS

4 个答案: