Flask - как подключить CSS 🌐💻
Для подключения CSS в Flask нужно использовать тег {{ url_for('static', filename='style.css') }}, где "style.css" - имя вашего CSS файла. Далее, вставьте его в HTML шаблон с помощью тега <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">.
Вот пример кода:
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)
<!DOCTYPE html>
<html>
<head>
<title>Мой сайт</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>Привет, мир!</h1>
</body>
</html>Детальный ответ
Как подключить CSS в Flask
При разработке веб-приложений на Flask, необходимо научиться подключать CSS стили, чтобы придать своему сайту желаемый внешний вид. В этой статье мы рассмотрим, как именно можно подключить CSS к вашему Flask приложению.
1. Создание статической папки
Первым шагом является создание папки для хранения ваших статических файлов, включая CSS файлы. Подобная папка обычно называется "static" и должна располагаться в корневой директории вашего Flask проекта.
app = Flask(__name__)
app.static_folder = 'static'2. Создание CSS файла
В папке "static" создайте новую подпапку "css" и в ней создайте файл стилей с расширением ".css". Например, назовите его "styles.css". В этом файле вы можете определить все необходимые стили для вашего веб-приложения.
3. Подключение CSS файла к HTML шаблонам
Чтобы подключить созданный CSS файл к HTML шаблонам, необходимо добавить ссылку на этот файл в вашей HTML разметке. В Flask это можно сделать с помощью функции url_for, которая сгенерирует правильный путь к файлу.
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">4. Пример использования
Вот простой пример, показывающий, как подключить CSS файл к вашему Flask приложению:
from flask import Flask, render_template
app = Flask(__name__)
app.static_folder = 'static'
@app.route('/')
def home():
return render_template('index.html')В вашем HTML шаблоне "index.html" добавьте следующую строку в раздел head, чтобы подключить CSS стили:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">Заключение
Теперь вы знаете, как подключить CSS файл к вашему Flask приложению. Создайте папку "static" для хранения статических файлов, включая CSS файлы, создайте CSS файлы в подпапке "css" и добавьте ссылку на этот файл в ваши HTML шаблоны с помощью функции url_for. Пожалуйста, учтите, что имена папок и файлов могут отличаться в вашем проекте, и вы должны указать правильные пути в функции url_for.