如何在html文件中加载css文件已经在django中扩展了另一个html文件（base.html）答案

【问题标题】：how to load css file in html file already extends another html file (base.html) in django如何在html文件中加载css文件已经在django中扩展了另一个html文件（base.html）
【发布时间】：2020-02-04 12:45:55
【问题描述】：

我是 django 的新手，所以我在处理 django 模板方面遇到了困难，将 css 文件添加到 django 模板中。我的代码如下：

base.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{% static 'portfolio/main.css' %}"> {% if title%}
    <title>Django Portfolio - {{title}}</title>
    {% else %}
    <title>Django Portfolio</title>
    {% endif %}
</head>

<body>
    <div class="topnav">
        <a class="active" href="{% url 'portfolio-home' %}">Home</a>
        <a href="{% url 'portfolio-page' %}">Portfolio</a>
        <a href="{% url 'portfolio-about' %}">About</a>
        <a href="#blog">Blog</a>
        <a href="#account">Account</a>
    </div>
    <div class="container">
        {% block content %} {% endblock content %}
    </div>
</body>

</html>

这是我的 base.html 文件，我的所有其他 html 文件都继承了它。它工作得很好。注意：-我在 django 应用程序中创建静态文件并放置两个静态文件； main.css 和 home.css 现在。但我想设计主页，我使用名为 home.html 的文件完成此操作，并在静态文件中使用 home.css。我的代码如下：

home.html

{% extends 'portfolio/base.html' %} 
{% load static %}
{% block content %}

    <link rel="stylesheet" type="text/css" href=" {% static 'portfolio/home.css' %}" />
    <h1>My homepage</h1>

{% endblock content %}

问题是，<link rel="stylesheet" type="text/css" href=" {% static 'portfolio/home.css' %}" /> 行不起作用。我需要帮助。

【问题讨论】：

首先考虑看看何时出现此类问题是在您的浏览器开发工具中。什么是源 HTML？是否显示任何错误（例如 404 错误）？其次，正式的 <link> 带有 rel 属性“样式表”是 body-ok，所以它可能出现在正文中，但我不能 100% 确定这会被所有浏览器接受，因为它是非常罕见的做法。您正在使用哪种浏览器进行测试？
您的 CSS 文件被包含在正文本身中，这将不起作用。在您的基本模板中创建一个{% block extra_css %} {% endblock %}，并将您的代码粘贴到 home.html 模板文件中的相同块{% block extra_css %} <link rel="stylesheet" type="text/css" href=" {% static 'portfolio/home.css' %}" /> {% endblock %}
@JaskaranSingh 根据this，将rel 设置为"stylesheet" 的链接元素是body-ok。您指的是 HTML4 规范，但我们生活在 HTML5 时代。我已经在 Safari 和 Chrome 中测试了工作中 css 的标签。同样，我不确定它是否适用于所有浏览器，我同意最好将其放在中，但我不确定这是 OP 问题的原因。

标签： python html css django django-templates

【解决方案1】：

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

这应该有效，它在语法上是正确的。您确定您的 .css 文件位于如下文件夹结构中：“/APPNAME/static/Portfolio/home.css”。

正如其他人所提到的，您没有将 CSS 包含在 HTML 文档的头部，而是将其放入正文中，在 {% block content %} 内。

你需要把它包装在一个 {% BLOCK CSS %} {%ENDBLOCK %}

{% extends 'portfolio/base.html' %} 
{% load static %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'portfolio/home.css' %}">
{% endblock %}
{% block content %}

etc...

【讨论】：

目前，这并没有提供问题的答案。询问更多信息时请使用 cmets。
我已按照建议将链接部分包装在块中，似乎我的 html 标签的样式没有变化。这意味着css文件还没有被渲染。
我这样说：- ` {% extends 'portfolio/base.html' %} {% load static %} {% block css %} {% endblock css %} {% block content %}
我的主页
{% endblock content %}`
CSS 样式可能被 base.html 中的 CSS 覆盖？这可能是正在发生的事情吗？

【解决方案2】：

它对我有用：

{% extends 'menu.html' %}
    {% load static %}
  
    <body>
    {% block content %}
    
    
    {% block css %}
    <link rel="stylesheet" type="text/css" href="{% static 'moduleone.css' %}">
    {% endblock %}
    
    
    <div class="jumbotron">Test</div>
    
    {% endblock %}
    </body>
    </html>

【讨论】：

我的主页