将 CSS 添加到引导烧瓶

在开发网站或应用程序时，CSS 是必不可少的一部分。要使您的网站或应用程序看起来专业，您需要样式表来指定它们的外观和感觉。本文将为程序员提供将 CSS 添加到 Flask 引导烧瓶的步骤。

步骤 1：创建一个 Flask 应用程序

首先，我们需要创建一个 Flask 应用程序。在终端中键入以下命令以创建名为 app.py 的 Python 文件：

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, World!"

if __name__ == "__main__":
    app.run(debug=True)

步骤 2：将样式表添加到应用程序

现在，我们将在 Flask 应用程序中添加样式表。为此，请创建一个名为 static 的文件夹，并在其中创建名为 style.css 的 CSS 文件。您可以使用以下代码将样式表链接到您的应用程序中：

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

这将使 Flask 从 static 文件夹中查找名为 style.css 的文件，并将其链接到您的应用程序中。

步骤 3：创建样式表

现在，我们需要创建样式表。在静态文件夹中创建 style.css 文件，并添加以下代码：

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

h1 {
  color: #333333;
  text-align: center;
}

p {
  color: #666666;
  font-size: 18px;
  line-height: 1.5;
}

步骤 4：使用样式表

现在，我们已经链接了样式表并创建了CSS，我们可以在 Flask 应用程序中使用它们。为了使 Flask 应用程序的主页使用样式表，请在 home 函数中添加以下代码：

@app.route("/")
def home():
    return "<h1>Welcome to my website!</h1><p>This is my cool new website!</p>"

现在，要使样式表适用于主页，请将每个元素用包含样式表的 div 包装起来，如下所示：

@app.route("/")
def home():
    return "<div class='container'><h1>Welcome to my website!</h1><p>This is my cool new website!</p></div>"

步骤 5：运行应用程序

现在，我们已经完成了样式表的添加和使用，我们可以运行我们的 Flask 应用程序。在终端中键入以下命令以启动应用程序：

python app.py

你的应用程序现在应该在本地主机上运行。打开您的浏览器并导航到 http://localhost:5000，您应该看到一个有样式的应用程序主页。

这就是将 CSS 添加到 Flask 引导烧瓶的步骤！希望这篇文章能够帮助您为您的应用程序设计漂亮的样式表。