如何在烧瓶应用程序中添加 CSS - CSS

CSS（Cascading Style Sheets）是用于网页设计的一种样式表语言，它可以为 HTML 文档添加漂亮、动态的样式效果。在 Flask 框架下的烧瓶应用程序中，添加 CSS 文件可以改善网页的外观和用户体验。本篇教程将向您展示如何在烧瓶应用程序中添加 CSS 文件。

步骤 1: 创建静态文件夹

1. 在项目根目录下，创建一个名为“static”的文件夹。在命令行中输入以下命令：

mkdir static

2. 在“static”文件夹中，创建一个名为“css”的文件夹。在命令行中输入以下命令：

cd static
mkdir css

3. 在“css”文件夹中，创建一个名为“style.css”的文件。在命令行中输入以下命令：

cd css
touch style.css

步骤 2: 添加 CSS 样式

1. 在“style.css”文件中，添加您想要应用于网页的样式。例如，您可以添加以下 CSS 代码来改变网页背景色和标题字体大小：

body {
    background-color: #f2f2f2;
}

h1 {
    font-size: 2rem;
}

2. 确保您在样式表文件中添加了正确的 CSS 代码，并保存文件。

步骤 3: 将 CSS 样式链接到 HTML 模板

1. 打开您的 HTML 模板文件（例如“index.html”）。在 HTML 头部中添加以下代码：

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">

2. 确保代码中的“href”指向正确的 CSS 文件路径。
3. 确保您在 HTML 文件中正确地使用了 CSS 类和 ID，以应用您在“style.css”文件中定义的样式。

步骤 4: 运行应用程序并查看您的 CSS 样式

1. 在命令行中，进入您的项目根目录。在命令行中输入以下命令：

cd ..

2. 输入以下命令来启动应用程序：

python app.py

3. 在浏览器中输入“localhost:5000”来访问您的应用程序。
4. 确认您的 CSS 样式已成功应用于您的网页。

至此，您已经成功地将 CSS 样式添加到您的烧瓶应用程序中了！