Bazele CSS în Dash

Crearea dashboardurilor cu Dash și Plotly

Alex Scriven

Data Scientist

Ce este CSS?

Prescurtare pentru „Cascading Style Sheets"
Controlează aspectul și aranjarea elementelor unei pagini web

Putem controla:
- Proprietăți text (dimensiune font, culoare, stil)
- Dimensiunea și forma elementelor HTML
- Poziționarea obiectelor

CSS pe web

Majoritatea site-urilor au fișiere CSS;

Sunt încărcate la deschiderea paginii
În acest curs: folosim proprietatea style

Captură de ecran a paginii principale Google cu instrumentele pentru dezvoltatori deschise, unde se vede un tag care face referire la o foaie de stiluri. Codul indică "<link type="text/css" rel=Stylesheet href=" și un link după href către locația fișierului CSS

CSS pe elemente HTML

CSS poate fi aplicat și pe un element HTML

Se folosește proprietatea style a unui tag
Acceptă CSS scris ca perechi cheie-valoare
- Instrucțiunile sunt "property:value; property:value;"

Captură de ecran cu codul HTML dintr-o lecție din capitolul 1, care a creat mai multe div-uri de dimensiuni și culori de fundal diferite. Demonstrează utilizarea proprietății style în HTML.

Stilizare CSS

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

O imagine cu titlul negru „Welcome to the website!" și dedesubt, cu roșu, cu litere mai mari, „Enjoy your stay!"

Editarea CSS live

Putem edita CSS pe un site live

Clic dreapta pe element > „Inspect" > editați o valoare CSS
Notă - modificare locală (dispare la reîncărcare)

Un gif al paginii principale Google unde logo-ul este accesat cu clic dreapta, iar din meniu se selectează „inspect". Se deschid Instrumentele pentru dezvoltatori Google în partea de jos. Acolo, lățimea imaginii este setată la 100 de pixeli, ceea ce reduce instantaneu dimensiunea imaginii.

CSS în Dash

Argumentul style al componentelor Dash
- Acceptă CSS ca dicționar
Cod anterior într-o componentă Dash:

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

CSS pentru culoare

CSS poate seta:

Culoarea de fundal a unui obiect (background-color)
Culoarea textului (color)

Ambele metode acceptă șiruri (ex., 'red') sau coduri RGB (ex., 'rgb(0,0,255)' înseamnă albastru!)

Un tabel cu două coloane: coloana din stânga conține culori, iar cea din dreapta codurile RGB asociate. Există celule mov, verde, roz-închis și albastru-închis cu codurile RGB corespunzătoare în celula alăturată.

CSS pentru dimensiune

CSS poate seta dimensiunea prin proprietățile width și height

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

Dimensiune CSS în procente

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

50% din dimensiunea elementului părinte

Să exersăm!

Crearea dashboardurilor cu Dash și Plotly