Flask项目中外部CSS无法与HTML关联的问题求助

问题原因 #

Flask框架对静态文件（CSS、JS、图片等）有固定的存放规则，默认只会从static目录读取静态资源。你之前直接引用style.css，Flask找不到对应的文件路径，导致样式无法生效。

解决步骤 #

1. 调整项目文件结构
   在项目根目录下创建名为static的文件夹，将你的style.css文件移入该文件夹，最终结构如下：

你的项目文件夹/
├── app.py （你的Python代码文件）
└── static/
    └── style.css

2. 修正HTML中的CSS引用路径
   把HTML里的<link>标签href属性改为Flask能识别的静态资源路径，两种写法都可行：

• 方法一：直接使用绝对路径

<link href="/static/style.css" rel="stylesheet" type="text/css" />

• 方法二：用Flask的url_for方法（更规范，适配动态场景）
  先在Python代码顶部导入url_for，再修改HTML部分：

import os
from flask import Flask, request, redirect, session, url_for  # 新增url_for导入

app = Flask(__name__)

@app.route('/')
def home():
    page = """
    <html>
    <head>
     <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Stef LinkTREE</title>
  <link href="{}" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <p>SPADE</p>
    </body>
    </html>
    """.format(url_for('static', filename='style.css'))
    return page

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8080)

3. 重启Flask服务
   保存所有修改后，重启你的Flask应用，刷新网页就能看到CSS样式生效了。

额外提示 #

• 后续添加的JS、图片等静态资源，都要放到static目录下，引用规则和CSS一致。
• 确保static文件夹名称为全小写，Flask对该目录名大小写敏感。

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