[Python] 用Flask引入CSS无法正常显示

最新推荐文章于 2025-06-23 15:56:51 发布
最新推荐文章于 2025-06-23 15:56:51 发布
阅读量1.6w 收藏 4
点赞数 4
CC 4.0 BY-SA版权
分类专栏： python web 文章标签： python chrome flask css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u012358474/article/details/49968355
本文介绍了一种在使用Flask框架搭建博客时遇到的CSS样式无法正常显示的问题及解决方法。通过删除HTML文档头部的<!doctype html>声明解决了样式表加载失败的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天根据Flask教程做了一个简单的博客，最后运行时发现css的样式总是不起作用，在浏览器上调试后发现css文件的确成功加载了：


解决方法：

删除文件开头的<!doctype html>字段



参考文章：http://www.oschina.net/question/872916_221492?sort=time


Flask无法加载JavaScript和CSS文件
HkPostscript的博客
09-17 916
在Flask中，静态文件（例如JavaScript和CSS）应该存放在一个专门的目录中，并通过配置告知Flask如何找到这些文件。确保你的静态文件存放在正确的位置，并且目录名为"static"。如果你在Flask应用程序中使用了蓝图（Blueprint），那么在蓝图中加载静态文件的方式与在应用程序中加载略有不同。确保你在蓝图和应用程序中正确配置静态文件的目录和URL前缀，以便Flask能够正确加载JavaScript和CSS文件。在蓝图中使用静态文件时，需要使用蓝图的名称作为前缀来生成正确的URL。
flask加载css失败_flask核心知识
weixin_39916479的博客
01-13 573
flask是一个Python语言开发的web“微框架”，和django不同的是，它既没有数据库、也没有表单验证等工具它本身仅仅提供了一个WSGI的桥梁，其他东西统统靠你来定制，具有很大的灵活性脚手架为了迅速搭建一个像样的flask网站，我们可以使用脚手架之前在Github上看到cookiecutter-flask，是个不错的选择，但是新手可能会看不懂里面代码是如何封装的于是本人做出了一个更user...
Flask框架index.html里引用的本地的js和css或者图片
最新发布
l1o3v1e4ding的专栏
06-23 208
【代码】Flask框架index.html里引用的本地的js和css或者图片。
FLASK网页制作，CSS文件不显示问题
qq_37967241的博客
08-18 2710
调整了N次css文件之后，用flask模块运行之后均不显示。 尝试了以下几种办法，包括但不限于： 1.删除HTML文件中的<!DOCTYPE html>； 2.将<link href="../static/css/styles.css" rel="stylesheet" />改为用url_for函数运行：<link href="{{ url_for('static', filename = 'css/styles_index.css') }}" rel="stylesheet
Pythonanywhere中admin管理css样式显示问题
Talk is cheap, show the code. zhangsihui.pythonanywhere.com
05-18 604
由于 admin app 的 html 模板是直接继承 admin/base.html，导致在 pythonanywhere 上部署项目时，缺少 css 文件，所以 admin 界面不显示 css 格式。
python flask css样式无效
活到老学到老
05-07 1798
Flask是一个Python的轻量级Web框架，它没有为CSS提供任何内置的支持。安全策略：如果你的网站使用了Content Security Policy（CSP），它可能阻止了外部资源的加载。路径不正确：你的CSS文件没有放在正确的目录下，或者在HTML中引用的路径不正确。确认CSS文件的位置是否正确，并且在HTML中引用路径时要确保正确。语法错误：CSS文件中可能存在语法错误，导致浏览器无法正确解析。如果网站使用了CSP，需要确保你的CSS文件的来源是被允许的。缓存问题：浏览器缓存了旧的CSS文件。
【Python Web】Flask框架（三）CSS案例应用及样式模板的使用
qq_51670115的博客
09-16 3563
css，快速了解css，应用css的几种方式，在flask中应用，页面布局，模板+CSS+构建页面，小技巧，BootStrap
Python-使用Flask和ElementUI快速搭建企业中台系统
08-10
最后，我们需要配置Flask的静态文件服务，以便前端资源能正常加载。在`app.py`中添加以下代码： ```python from flask import send_from_directory @app.route('/static/<path:path>') def serve_static_file(path...
使用Python和Flask构建的学生管理系统实例
11-03
内容概要：本文档提供了一个用Python编写的简易学生管理系统实例，涵盖学生信息、课程管理和成绩三大基本模块的功能实现。项目采用Flask作为后端服务器框架，利用SQLite数据库存储数据，并使用HTML与Bootstrap构建...
基于Flask框架的Python个人论坛CSS设计源码
10-01
基于Flask框架的Python个人论坛项目，不仅是一个技术展示，更是现代网页开发中的一个实际应用案例。该项目主要采用Python语言，并结合了Flask这一轻量级Web应用框架，为用户提供了一个可以交流、讨论的网络平台。...
flask加载网页时css美化效果加载不出来的解决方法
Rover95的博客
07-21 6927
直接打开网页就有css的美化效果，运行flask出来后就没有，网上找了半天之后找到了解决方案 环境： vscode、python 步骤： 在主项目文件夹“weather_project”下面创建一个“static”文件夹存放图片、css、js等文件，此时我将美化主页面的login.css文件存在“static”文件夹下面的“css”文件夹里 flask响应后进入的主页面文件login.html存放在“templates”文件夹 flask.py 文件直接存放在主项目文件夹“weather_pro
[已解决]flask无法载入css的问题解决方法
小wal的博客
01-20 6801
1、目录结构： 2、index.html中引入需要的css文件： <link type="text/css" href="{{ url_for('static', filename='css/index.css') }}" rel="stylesheet"> 我是因为没有加上rel="stylesheet"而一直无法载入css???? 3、补充： rel="stylesheet"就是声明此文件为样式表文件，告诉浏览器你link过来的是一个样式，Stylesheet –
Flask 开发web后台时，css和js等静态文件加载不出来，某情况解决
YOU_hunter的博客
10-13 7426
奇怪的现象 今天用flask开发后台时，出现了一个非常诡异的现象！！！！ 我的静态文件竟…竟竟…然加载不了了！明明前两天弄得好好的，而且我很确信，我的路径什么的都是OK的。 真的，这个不是bug的bug解决起来好辛苦啊。试了很多方法。什么去掉google缓存啊，删除文件开发<!doctype html>字段，研究…/…/和/static/css/等。。。都不成功。哎，后面血与泪太多，...
python Flask css文件无法加载404的问题
duters_cmy的专栏
04-19 3709
情况：html里引用的css路径相对位置绝对位置试了个遍，但是用浏览器打开时仍然无法加载css文件，后端报错无法找到css 404或304的错误。 解决办法：换成谷歌的chorme浏览器就好了...原来用的360极速浏览器就是个垃圾啊... 但是按理说好网页应该能兼顾主流浏览器的，反正后来试了手机上的uc/vivo浏览器都能加载，就360不行，浪费了好多时间 ...
Flask静态文件无法调用，css无法调用解决办法
weixin_41613506的博客
02-08 2991
我遇到的问题详细描述： index.html文件放在templates,然后我render_template返回主页。 加载出来的界面完全没有css样式。 参考这篇文章解决了。 https://blog.youkuaiyun.com/YOU_hunter/article/details/102538365 原因： 当我们直接本地打开index.html时，索引的是html下的路径，如下所示，所以css和index.html放在同一文件夹下，加载出来无问题。 但是，当我们把静态文件放在templates文件夹下，虽然ht
python2.7的flask框架之引用js&css等静态文件
luyaran的博客
07-19 8080
动态 web 应用也会需要静态文件，通常是 CSS 和 JavaScript 文件。理想状况下， 我们已经配置好 Web 服务器来提供静态文件，但是在开发中，Flask 也可以做到。 只要在我们的包中或是模块的所在目录中创建一个名为 static 的文件夹，在应用中使用 /static 即可访问。我们要给静态文件生成 URL ，需要使用特殊的 'static' 端点名： url_for('st...
flask web 开发 头像显示问题 css没有加载
u013251692的博客
12-03 1828
今天在看“flask web 开发”一书时,在用户头像那一章时,在写完链接好自己的css后,发现显示的页面和书中完全不一样,仔细检查了自己的代码书写完全没有问题,后来打开Chrome的NewWork查看时,发现自己的css文件根本没有被加载进来,从这发现浏览器的缓存机制对此的影响,由于浏览器对自己之前页面的缓存,导致没有下载自己写的新的css文件,而只有之前的bootstrap.min.css文件.
关于flask引用css,js等文件失效问题
qq_41151066的博客
12-18 3235
用谷歌浏览器的隐私模式打开即可正常显示，我敢保证下次再也不用flask了，。。。。废话不多说，赶项目交作业，有问题请留言 -----分割线----- 经测试，换个浏览器也可以（火狐，Microsoft Edge等） ...
flask template 引入css
03-14
### 如何在 Flask 模板中正确引入 CSS 文件 要在 Flask 的 HTML 模板中正确引入 CSS 文件，可以通过以下方式实现： 1. **设置静态文件路径** Flask 使用 `static` 文件夹来存储静态资源（如 CSS、JavaScript 和图像）。确保项目结构中有名为 `static` 的目录，并在其下创建子目录用于分类管理不同类型的静态文件。例如，在 `static/css/` 中放置所有的 CSS 文件。 2. **HTML 结构中的 `<link>` 标签** 在 HTML 模板中通过 `<link>` 标签引用 CSS 文件。可以利用 Jinja2 提供的 `{% block %}` 功能动态加载不同的样式表[^2]。 以下是完整的配置方法和代码示例： #### 项目结构 ``` your_flask_app/ │ ├── app.py # 主应用入口 ├── static/ # 静态文件目录 │ └── css/ # 存放 CSS 文件 │ └── styles.css # 自定义样式表 └── templates/ # 模板文件目录 └── base.html # 基础模板 ``` #### 创建基础模板 (`base.html`) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入自定义 CSS --> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"> <title>{% block title %}Default Title{% endblock %}</title> </head> <body> {% block body %} <h1>Welcome to My Website!</h1> {% endblock %} </body> </html> ``` 上述代码中，`{{ url_for('static', filename='css/styles.css') }}` 是 Flask 提供的一个函数，用来生成指向静态文件的 URL 地址。 #### 定义视图函数并渲染模板 在 Python 应用程序中编写视图函数以返回模板页面： ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('base.html') if __name__ == '__main__': app.run(debug=True) ``` 运行此应用程序后访问根路径 `/`，浏览器会自动加载位于 `static/css/styles.css` 的样式文件。 --- ### 注意事项 如果需要根据不同页面加载特定的 CSS 文件，则可以在模板中扩展 `{% block css %}` 来覆盖默认行为。例如： ```html <!-- 页面专属 CSS --> {% block css %} <link rel="stylesheet" href="{{ url_for('static', filename='css/page-specific.css') }}"> {% endblock %} ``` 这样可以根据具体需求灵活调整每页的样式。 ---
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值