在 Django 中，HTML 模板无法直接通过相对路径（如 href="stylepage.css"）引用 CSS 文件；必须通过 {% static %} 模板标签配合正确的静态文件配置才能生效。
在 django 中，html 模板无法直接通过相对路径（如 `href="stylepage.css"`）引用 css 文件；必须通过 `{% static %}` 模板标签配合正确的静态文件配置才能生效。
Django 将“模板”（templates）与“静态资源”（static files，如 CSS、JS、图片）严格分离：模板文件（.html）位于 templates/ 目录下，由 Django 渲染后返回 HTML 内容；而浏览器实际加载的 CSS 文件必须通过 HTTP 可访问的 URL 提供——它不能从模板目录或 Python 代码路径中直接读取。
✅ 正确做法：三步完成 CSS 引入
1. 创建并配置 static/ 目录
在项目根目录（即与 manage.py 同级）创建 static/ 文件夹，并将你的 stylepage.css 放入其中：
myproject/
├── manage.py
├── myproject/ # 主配置包
├── templates/ # 存放 HTML 模板
└── static/ # ← 新建！存放所有静态资源
└── stylepage.css # ← 此处路径即为 {% static 'stylepage.css' %}
确保 settings.py 中已启用静态文件配置（Django 默认已包含）：
# settings.py
import os
STATIC_URL = '/static/' # 浏览器请求静态文件时的 URL 前缀（如 /static/stylepage.css）
STATICFILES_DIRS = [
BASE_DIR / "static", # 开发时 Django 查找静态文件的本地目录
]
# 注意：STATIC_ROOT 仅用于生产环境 collectstatic，开发阶段无需设置
2. 在 HTML 模板中使用 {% static %} 标签
修改你的 index.html，移除硬编码路径，改用 Django 的静态文件机制：
{% load static %} <!-- 必须在文件顶部加载 static 模板标签 -->
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TheWebPub</title><link rel="stylesheet" href="%7B%%20static%20'stylepage.css'%20%%7D">
{% if name %}
<h1 class="title">Hello {{ name }}.</h1>
{% else %}
<h1>Hello world.</h1>
{% endif %}
<p>Thank you for being here in my website, it's my first one. I'm creating this website with Django/Python.</p>
⚠️ 关键点：
- {% load static %} 是必需的，否则 {% static %} 标签不识别；
- href="{% static 'stylepage.css' %}" 中的路径是相对于 STATICFILES_DIRS 下各目录的子路径（此处即 static/stylepage.css）；
- 不要写成 href="static/stylepage.css" 或 href="/static/stylepage.css" —— 这会绕过 Django 的静态文件处理器，在开发模式下可能失效，且无法适配 STATIC_URL 配置变更。
3. 确保开发服务器能服务静态文件
在开发环境（DEBUG=True），需在项目根 urls.py 中追加静态文件路由支持：
# myproject/urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('myapp.urls')), # 示例应用路由
]
# 仅在 DEBUG=True 时启用：让开发服务器自动提供静态文件
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
✅ 验证是否成功：启动开发服务器后，直接访问 http://127.0.0.1:8000/static/stylepage.css，应能直接下载或显示 CSS 内容。若 404，请检查路径、拼写及 STATICFILES_DIRS 是否指向正确目录。
? 补充说明与常见陷阱
- 不要把 CSS 放进 templates/ 目录：浏览器无法访问 templates/，该目录仅用于服务端渲染，无 HTTP 路由。
- 避免使用绝对路径或 ../ 回溯：Django 静态文件系统不依赖文件系统相对位置，只认 STATICFILES_DIRS + static 子路径。
- 生产环境差异：上线时（DEBUG=False），Django 不再提供静态文件服务，需交由 Nginx/Apache 托管。此时需先运行 python manage.py collectstatic 将所有静态文件收集至 STATIC_ROOT 目录，再配置 Web 服务器映射 /static/ 到该目录。
- CSS 类名未生效？检查浏览器开发者工具（F12）→ Network 标签页：确认 stylepage.css 请求状态是否为 200；若为 404，说明路径或配置有误；若为 200 但样式不应用，问题可能出在 CSS 选择器优先级或语法错误。
遵循以上流程，即可稳定、可维护地在 Django 项目中引入和管理 CSS 文件，为后续集成 Bootstrap、Tailwind 或自定义主题打下坚实基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
