Flask 在jinja2模板中使用CSS样式表

在本文中，我们将介绍如何在Flask应用程序的jinja2模板中使用CSS样式表。CSS样式表可以帮助我们美化网页并提升用户体验。我们将通过一个示例来说明如何在Flask应用程序中引入和应用CSS样式。

阅读更多：Flask 教程

准备工作

在开始之前，我们需要确保已经安装了Flask和相关的依赖。如果尚未安装，可以使用以下命令来安装它们：

$ pip install flask

同时，我们需要创建一个Flask应用程序并设置一个基本的路由。

引入CSS样式表

要在jinja2模板中引入CSS样式表，首先需要在Flask应用程序的static文件夹下创建一个名为css的子文件夹。在css文件夹中，我们可以存放我们的CSS样式表文件。

接下来，我们可以在jinja2模板中使用url_for函数来引入CSS样式表。url_for函数可以根据文件名生成一个URL，我们可以将这个URL作为CSS样式表的href属性的值。

下面是一个简单的示例，展示了如何在jinja2模板中引入CSS样式表：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个示例页面。</p>
</body>
</html>

在上面的例子中，我们将style.css作为CSS样式表文件，并将其放置在css文件夹中。通过{{ url_for('static', filename='css/style.css') }}这段代码，我们可以生成一个正确的URL，并将其作为CSS样式表的href属性的值。

确保你的CSS样式表文件的路径正确，并且与href属性的值保持一致。

应用CSS样式表

一旦我们在jinja2模板中引入了CSS样式表，我们就可以使用CSS样式表来美化我们的网页了。

在CSS样式表中，我们可以定义各种样式和布局。下面是一个简单的示例，展示了如何在CSS样式表中定义一个样式，并将其应用到网页的元素中：

body {
    background-color: #f2f2f2;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    font-size: 24px;
}

p {
    color: #666;
    font-size: 16px;
}

在上面的代码中，我们定义了body、h1和p三个样式，并分别应用到了网页中的body、h1和p元素上。通过指定不同的属性和值，我们可以控制元素的背景颜色、文本颜色和字体大小等。