Основи CSS у Dash

Створення дашбордів з Dash і Plotly

Alex Scriven

Data Scientist

Що таке CSS?

Розшифровується як «Cascading Style Sheets»
Керує виглядом і розміщенням елементів вебсторінки

Можемо керувати:
- Властивостями тексту (розмір шрифта, колір, стиль)
- Розміром і формою елементів 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 з уроку в розділі 1, де створено кілька 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 на живому сайті

Клацніть правою кнопкою на елементі > виберіть «Inspect» > змініть значення CSS
Зауважте: це локальна зміна (зникне після перезавантаження)

GIF головної сторінки Google: логотип клацають правою кнопкою, у меню обирають 'inspect'. Відкриваються засоби розробника 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. Є фіолетова, зелена, темно-рожева та темно-синя комірки з кодами поряд.

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