Flask项目中CSS文件无法与HTML正常链接的原因咨询

问题概述 #

开发包含HTML模板的Flask项目时，出现CSS文件加载失败的404错误：

Failed to load resource: the server responded with a status of 404 (NOT FOUND)

项目相关代码 #

Python主文件代码 #

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def root():
    return render_template('index.html')


@app.route('/aboutAuthor')
def about_me():
    return render_template('about_me.html')


if __name__ == '__main__':
    app.run(debug=True)

HTML模板（index.html）代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="styled.css"/>
    <title>ShareIt</title>
</head>
<body>
to know more about me <a href="http://127.0.0.1:5000/aboutAuthor">click here</a>
</body>
</html>

CSS文件（styled.css）代码 #

body{
    background-color: #4287f5;
    color: #eb4034;
    font-family: comicsans ms;
}

a:link{
    color: #fcba03;
    text-decoration: none;
}
a:visited{
    color: #32a852;
    text-decoration: none;
}
a:hover{
    color: #6832a8;
    text-decoration: none;
}
a:active{
    color: #943b81;
    text-decoration: underline;
}

问题原因与解决步骤 #

Flask对静态资源（CSS、JS、图片等）有固定的目录规则：必须放在项目根目录下的static文件夹内，否则内置服务器无法识别并提供这些资源。

具体解决操作： #

1. 调整文件结构：在项目根目录创建static文件夹，将styled.css移动到该文件夹中。
2. 修正HTML中的CSS引用路径：
   推荐使用Flask内置的url_for函数生成正确路径，也可以直接写绝对路径：

   <!-- 推荐写法：使用url_for -->
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styled.css') }}"/>
   <!-- 或者直接写绝对路径 -->
   <link rel="stylesheet" type="text/css" href="/static/styled.css"/>
   

3. 重启Flask服务：确保修改后的配置生效。

额外优化：HTML中的页面链接也建议用url_for生成，避免硬编码地址，比如：

<a href="{{ url_for('about_me') }}">click here</a>

这样路由变更时无需手动修改链接，更符合Flask开发规范。

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