В этой статье мы рассмотрим, как стилизовать ваше приложение Streamlit с помощью CSS. Мы начнем с оформления фона веселым желтым цветом и постепенно расширим структуру кода, чтобы организовать стиль в папке ресурсов. Мы также покажем, как добавить нотку элегантности, придав элементам страницы успокаивающий синий цвет.
Вы можете посмотреть соответствующий видеоурок на YouTube. Пожалуйста, подпишитесь на Ютуб-канал.
Прежде чем начать, давайте настроим структуру папок и файлов нашего приложения Streamlit. Создайте новую папку с именем «my_streamlit_app» и внутри нее создайте следующие файлы:
app.py: Этот файл будет содержать код приложения Streamlit.- Папка
assets: в этой папке будут храниться таблицы стилей CSS.
Шаг 1. Оформление фона желтым цветом:
Давайте начнем с применения яркого желтого цвета к фону нашего приложения Streamlit. Откройте файл app.py и добавьте следующий код:
import streamlit as st
def main():
# Add your Streamlit app content here
st.title("My Streamlit App")
st.write("Welcome to my awesome Streamlit application!")
if __name__ == "__main__":
main()
Сохраните файл, и вы готовы запустить приложение Streamlit. Откройте терминал и перейдите в папку my_streamlit_app. Запустите приложение, выполнив команду: streamlit run app.py.
Вы должны увидеть следующий контент:
Затем давайте щелкнем правой кнопкой мыши по телу страницы и выберите элемент проверки. Затем вы можете нажимать на разные части элементов, чтобы увидеть, какая часть экрана подсвечивается:
