如何在Django模板中添加CSS style标签？样式不生效问题求助

问题根源 #

你的<style>标签直接写在了模板继承的{% block %}之外，Django模板继承机制下，只有定义在{% block %}块内的内容才会被正确渲染到父模板（base.html）中，放在块外的代码会被直接忽略，这就是样式不生效的核心原因。另外，把<style>放在{% load static %}标签内的做法是错误的，load标签仅用于加载模板标签库，不能包裹HTML内容。

解决方案 #

方法1：利用父模板预留的CSS扩展块 #

大部分Django项目的base.html会在<head>标签内预留专门用于添加自定义CSS的块（比如命名为extra_css或css），你只需要把样式代码放到这个块里：

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

{% block extra_css %}
<style>
    .divider:after,
    .divider:before {
        content: "";
        flex: 1;
        height: 1px;
        background: #eee;
    }
</style>
{% endblock %}

{% block content %}
<section class="vh-100">
    <div class="container py-5 h-100">
      <div class="row d-flex align-items-center justify-content-center h-100">
        <div class="col-md-8 col-lg-7 col-xl-6">
          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg"
            class="img-fluid" alt="Phone image">
        </div>
        <div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
          <form>
            <!-- Email input -->
            <div class="form-outline mb-4">
              <input type="email" id="form1Example13" class="form-control form-control-lg" />
              <label class="form-label" for="form1Example13">Email address</label>
            </div>
            <!-- Submit button -->
            <button type="submit" class="btn btn-primary btn-lg btn-block">Sign in</button>
  
            <div class="divider d-flex align-items-center my-4">
              <p class="text-center fw-bold mx-3 mb-0 text-muted">OR</p>
            </div>
  
            <a class="btn btn-primary btn-lg btn-block" style="background-color: #3b5998" href="#!"
              role="button">
              <i class="fab fa-facebook-f me-2"></i>Continue with Facebook
            </a>
            <a class="btn btn-primary btn-lg btn-block" style="background-color: #55acee" href="#!"
              role="button">
              <i class="fab fa-twitter me-2"></i>Continue with Twitter</a>
  
         </form>
      </div>
    </div>
</section>
{% endblock %}

方法2：在父模板添加CSS扩展块（如果没有的话） #

如果你的base.html里没有预留extra_css这样的块，需要先修改base.html，在<head>标签内添加：

<head>
    <!-- 其他头部内容，比如Bootstrap CSS、页面标题等 -->
    {% block extra_css %}{% endblock %}
</head>

之后再按照方法1的方式在子模板中添加样式即可。

补充说明 #

• {% extends 'base.html' %}必须是模板文件的第一行有效代码，不能有任何前置的HTML或空行（你的代码这部分符合要求）。
• 也可以把<style>直接放到content块的最顶部，虽然能生效，但不推荐，因为样式代码放在<head>内更符合网页规范。

内容的提问来源于stack exchange，提问作者user21878286