外部CSS文件导入HTML模板后样式不生效的技术求助

问题情况 #

尝试将外部CSS文件导入base.html模板，但样式未生效；将样式内联在标签中时可正常生效。相关文件及文件夹结构如下：

1. base.html的标签代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale = 1" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="homeDesign.css"/>
    <title> {% block title %}Base{% endblock %} </title>
</head>

2. homeDesign.css文件代码 #

@charset "UTF-8";

.note-card {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
  }

  .container,body {
    background-color: #95a1b0;
    overflow-x: hidden;
  }

  .sub-container {
    width: auto;
    display: flex;
    column-gap: 10px;
    justify-content: space-around;
  }

3. 预期应用样式的home.html代码 #

<h1 style="color: #1b0e02;">Notes</h1>
  <div class="sub-container">
  {% for note in user.notes %}
    <div class="note-card"> 
      <button type="button" class="close" onclick="deleteNote({{ note.id }})">&times;</button>
     <br>
      {{ note.text }} 
    </div>
  {% endfor %}
  </div>

文件夹结构说明 #

项目目录包含templates和static文件夹，base.html位于templates目录下，homeDesign.css位于static目录下。

解决方法 #

1. 修正CSS文件引用路径（针对Django框架） #

由于模板文件和静态资源文件分属不同目录，直接使用相对路径无法正确找到CSS文件，需使用Django的静态资源标签：

• 在base.html的最顶部添加静态资源加载标签：

  {% load static %}
  

• 修改CSS的引用路径为：

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

• 确保项目settings.py中已正确配置静态资源相关参数：

  STATIC_URL = '/static/'
  STATICFILES_DIRS = [BASE_DIR / 'static']
  

2. 普通HTML项目的路径修正 #

如果是非框架项目，需根据文件实际层级调整相对路径。例如base.html在templates文件夹，homeDesign.css在项目根目录，路径应改为：

<link rel="stylesheet" href="../homeDesign.css"/>

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