1. 安装Flask
首先，我们需要安装Flask。可以使用以下命令安装：
pip install Flask2. 创建Flask应用
接下来，我们创建一个Flask应用。在项目目录下创建一个名为app.py的文件，并添加以下代码：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)这里，我们导入了Flask和render_template，然后创建了一个Flask应用实例。我们定义了一个路由/，当用户访问这个路由时，会返回一个名为index.html的模板文件。最后，我们启动了Flask应用。
3. 创建模板文件夹
在项目目录下创建一个名为templates的文件夹。在这个文件夹中，我们将存放HTML模板文件。
4. 创建HTML模板文件
在templates文件夹中创建一个名为index.html的文件，并添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask CSS Example</title>
<link rel="stylesheet" href="{{%20url_for('static',%20filename='styles.css')%20}}">
</head>
<body>
<h1>Hello, Flask!</h1>
</body>
</html>这里，我们创建了一个简单的HTML页面。在head标签中，我们使用link标签引用了一个名为styles.css的CSS样式表。注意，我们使用了url_for函数来生成CSS文件的URL。这个函数的第一个参数是静态文件的目录（在这里是static），第二个参数是静态文件的名称（在这里是styles.css）。
5. 创建CSS文件
在templates文件夹中创建一个名为styles.css的文件，并添加以下代码：
body {
background-color: lightblue;
}这里，我们创建了一个简单的CSS样式表，为页面背景设置了浅蓝色。
6. 运行Flask应用
现在，我们可以运行Flask应用了。在命令行中，进入到项目目录，然后运行以下命令：
python app.py打开浏览器，访问http://127.0.0.1:5000/，你将看到一个简单的页面，其中包含了我们在CSS文件中定义的背景颜色。
相关问题与解答：
问题1：如何在Flask中使用外部CSS文件？
答：在Flask中，我们可以使用url_for函数来生成静态文件的URL，然后在HTML模板中引用这个URL。例如：<link rel="stylesheet" href="{{%20url_for('static',%20filename='styles.css')%20}}">。这样，我们就可以在Flask中使用外部CSS文件了。
问题2：如何在Flask中使用多个CSS文件？
答：在Flask中，我们可以使用多个CSS文件来美化我们的页面。只需在HTML模板中多次使用link标签引用不同的CSS文件即可。例如：<link rel="stylesheet" href="{{%20url_for('static',%20filename='styles1.css')%20}}"> <link rel="stylesheet" href="{{%20url_for('static',%20filename='styles2.css')%20}}">。这样，我们就可以在Flask中使用多个CSS文件了。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/128181.html
微信扫一扫 