python web开发 css如何引用

### Python Web 开发中引用 CSS 文件的方法在基于 Flask 的 Python Web 应用程序开发过程中，可以通过特定的方式来引入外部的 `.css` 文件以美化页面布局。以下是具体方法及其路径设置： #### 静态文件夹的作用 Flask 默认会寻找名为 `static` 的文件夹作为存储静态资源的地方[^2]。这意味着所有的静态文件（如 CSS、JavaScript 和图片）都应该放置在这个文件夹下。 #### HTML 页面中的 `<link>` 标签配置为了加载位于 `static` 文件夹下的 CSS 文件，可以在 HTML 文件头部使用 `<link>` 标签指定其相对路径。例如，如果有一个名为 `test.css` 的样式表存放在 `static` 文件夹中，则可以这样编写 HTML 头部结构[^1]： ```html <head> <meta charset="UTF-8"> <title>My Website</title> <link rel="stylesheet" href="{{ url_for('static', filename='test.css') }}"> </head> ``` 这里需要注意的是，推荐使用 Flask 提供的模板函数 `url_for()` 来动态生成静态文件 URL 地址，而不是硬编码路径字符串。这有助于提高代码可维护性和跨平台兼容性[^3]。 #### 完整示例代码展示下面给出一个完整的例子说明如何在一个简单的 Flask 应用里正确引用并应用自定义样式的 CSS 文件： ##### 目录结构假设项目具有如下所示的基础目录架构： ``` /my_flask_app /static test.css /templates index.html app.py ``` ##### 主程序 (`app.py`) ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def home(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True) ``` ##### 模板文件 (`index.html`) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Welcome Page</title>  <link rel="stylesheet" href="{{ url_for('static', filename='test.css') }}"> </head> <body> <div class="welcome-message">Welcome to My Flask App!</div> </body> </html> ``` ##### 样式文件 (`test.css`) ```css .welcome-message { color: blue; font-size: 24px; } ``` 当运行此 Flask 应用并通过浏览器访问主页时，“Welcome to My Flask App!” 这句话将以蓝色字体大小为 24 像素的形式呈现出来。 --- ###

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

下一篇 doubletfinder python