为 Flask 应用程序设置样式

简介

在本实验中，我们将学习如何向 Flask 应用程序添加 CSS，使其在视觉上更具吸引力。我们将使用静态文件，特别是一个 CSS 文件，来为我们的应用程序设置样式。静态文件是指不会改变的文件，如 CSS 文件、JavaScript 文件和图像。

注意：你需要自己创建代码文件并在环境中运行它。你可以在 Web 5000 上预览 Flask 服务状态。

Skills Graph

创建 CSS 文件

首先，我们需要创建一个用于存放样式的 CSS 文件。在 Flask 中，静态文件存储在名为 static 的目录中。让我们在 flaskr/static 目录下创建一个名为 style.css 的 CSS 文件。

## 导航到静态目录
cd flaskr/static

## 创建 style.css 文件
touch style.css

添加 CSS 规则

接下来，将以下 CSS 规则复制到 style.css 文件中。这些规则将为我们应用程序中的各种 HTML 元素设置样式。

/* flaskr/static/style.css */

html {
  font-family: sans-serif;
  background: #eee;
  padding: 1rem;
}
body {
  max-width: 960px;
  margin: 0 auto;
  background: white;
}
/* 更多 CSS 规则... */

在 HTML 中链接 CSS 文件

现在，我们需要在 HTML 模板中链接我们的 CSS 文件。Flask 会自动添加一个用于提供静态文件的 static 视图。我们可以在 base.html 模板中使用 url_for 函数来链接我们的 CSS 文件。

<!-- base.html -->

{{ url_for('static', filename='style.css') }}

验证更改

要验证更改，请启动你的 Flask 应用程序，并导航到登录页面 http://127.0.0.1:5000/auth/login。现在，页面应该会根据 style.css 文件中的规则进行样式设置。

总结

在这个实验中，我们学习了如何使用 CSS 文件为 Flask 应用添加样式。我们创建了一个 CSS 文件，添加了一些 CSS 规则，然后使用 Flask 的 url_for 函数在 HTML 模板中链接了 CSS 文件。现在，我们的 Flask 应用在视觉上更具吸引力了。记住，如果你对静态文件进行了更改，可能需要刷新浏览器页面或清除浏览器缓存才能看到更改。