Основы CSS в Dash

Создание дашбордов с помощью Dash и Plotly

Alex Scriven

Data Scientist

Что такое CSS?

Расшифровывается как «Cascading Style Sheets»
Управляет внешним видом и расположением элементов веб-страницы

С помощью CSS можно задавать:
- Свойства текста (размер, цвет, стиль шрифта)
- Размер и форму HTML-элементов
- Расположение объектов

CSS в вебе

На большинстве сайтов есть CSS-файлы:

Они загружаются при открытии страницы
В этом курсе: вместо этого используется свойство style

Снимок экрана главной страницы Google с открытыми инструментами разработчика Chrome, где виден тег, ссылающийся на таблицу стилей. В коде указано "<link type="text/css" rel=Stylesheet href=" и ссылка после href на расположение CSS-файла

CSS в HTML-элементах

CSS также можно применять к HTML-элементам

Используйте свойство style тега
Принимает CSS в виде пар ключ–значение
- Записываются как "property:value; property:value;"

Снимок экрана HTML-кода из урока первой главы, где создаются несколько блоков div разного размера с цветом фона. Демонстрируется использование свойства style в HTML.

Пример CSS-стилизации

<h1>Welcome to the website!</h1>
<h2 style="font-size:50px;color:red">
      Enjoy your stay!
</h2>

Изображение с чёрным заголовком «Welcome to the website!» и красным более крупным текстом ниже «Enjoy your stay!»

Редактирование CSS в браузере

CSS на живом сайте можно редактировать прямо в браузере

Нажмите правой кнопкой на элемент > выберите «Просмотреть код» > измените значение CSS
Важно: изменение только локальное (сбрасывается при обновлении)

GIF главной страницы Google, где правой кнопкой мыши нажимают на логотип и в выпадающем меню выбирают «Просмотреть код». Открываются инструменты разработчика, в которых ширина изображения задаётся равной 100 пикселям, и изображение мгновенно уменьшается.

CSS в Dash

Аргумент style компонентов Dash
- Принимает CSS в виде словаря
Предыдущий код в компоненте Dash:

app.layout = [
  html.H1('Welcome to the website!'), 
  html.H2('Text',
  style={'font-size':'50px',
          'color':'red'})
]

CSS для цвета

С помощью CSS можно задать:

Цвет фона объекта (background-color)
Цвет текста (color)

Оба свойства принимают строки (например, 'red') или RGB-коды (например, 'rgb(0,0,255)' — это синий!)

Таблица из двух столбцов: левый заполнен цветами, правый содержит соответствующие RGB-коды. Показаны фиолетовая, зелёная, тёмно-розовая и тёмно-синяя ячейки с кодами RGB в соседнем столбце.

CSS для размера

CSS задаёт размер с помощью свойств width и height

app.layout = [
  # Add & resize the company logo
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]

Размер в CSS в процентах

app.layout = [
  # Add & resize the company logo
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]

50% от размера родительского элемента

Давайте потренируемся!

Создание дашбордов с помощью Dash и Plotly