Django中能否在单个HTML文档中使用多个CSS文件？

AI 小北

2026-5-25

在Django中给继承模板添加独立CSS的正确方式

当然可以实现！这是Django模板继承里非常实用的场景，你之前的写法有点小问题——直接在子模板里写<link>标签会因为模板继承的规则导致它被放到错误的位置，甚至不生效。正确的做法是利用Django的**模板块（block）**来预留扩展位置。

第一步：修改base.html，预留CSS扩展块

你需要在base模板的<head>标签里，在基础CSS之后添加一个专门用来放额外样式的块，这样子模板就能在这里插入自己的CSS文件了：

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <!-- 基础全局CSS -->
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <!-- 预留的额外CSS块，子模板可以重写它 -->
    {% block extra_css %}{% endblock %}
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

第二步：在page1.html中添加独立CSS

现在子模板只需要重写extra_css块，就能加载自己的专属CSS了，而且因为这个块在base.css之后加载，它的样式会自动覆盖base中冲突的规则（优先级更高）：

{% extends "base.html" %}
{% load static %}

{% block extra_css %}
    <!-- 页面专属CSS -->
    <link rel="stylesheet" href="{% static 'css/page1.css' %}">
{% endblock %}

{% block content %}
    <!-- 这里写page1的页面内容 -->
    <h1>这是Page1的内容</h1>
{% endblock %}

额外小提示

如果多个子模板都需要加载相同的额外CSS，你还可以在extra_css块里用{{ block.super }}来保留base里的内容，再添加新的样式，比如：

{% block extra_css %}
    {{ block.super }} <!-- 保留base中可能已经有的额外CSS -->
    <link rel="stylesheet" href="{% static 'css/common_extra.css' %}">
{% endblock %}