Podstawy CSS w Dash

Tworzenie dashboardów z Dash i Plotly

Alex Scriven

Data Scientist

Czym jest CSS?

Skrót od 'Cascading Style Sheets'
Kontroluje wygląd i układ elementów strony

Możemy sterować:
- Właściwościami tekstu (rozmiar, kolor, styl czcionki)
- Rozmiarem i kształtem elementów HTML
- Rozmieszczeniem obiektów

CSS w internecie

Większość stron korzysta z plików CSS;

Są wczytywane podczas ładowania strony
W tym kursie: zamiast tego właściwość style

Zrzut ekranu strony głównej Google z otwartymi narzędziami deweloperskimi Chrome, gdzie widoczny jest tag linkujący do arkusza stylów. Kod zawiera "<link type="text/css" rel=Stylesheet href=" oraz link do pliku CSS.

CSS na elementach HTML

CSS można stosować bezpośrednio na elementach HTML

Użyj właściwości style tagu
Przyjmuje CSS jako pary klucz-wartość
- Format: "property:value; property:value;"

Zrzut ekranu kodu HTML z lekcji w rozdziale 1, w którym utworzono kilka divów o różnych rozmiarach i kolorach tła. Ilustruje użycie właściwości style w HTML.

Przykładowe stylowanie CSS

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

Obraz z czarnym tytułem "Welcome to the website!" i poniżej, na czerwono, większym pismem "Enjoy your stay!"

Edytowanie CSS na żywo

Możemy edytować CSS na działającej stronie

Kliknij prawym przyciskiem element > 'Inspect' > zmień wartość CSS
Uwaga: tylko lokalna zmiana (znika po odświeżeniu)

Animacja strony głównej Google, gdzie logo jest klikane prawym przyciskiem myszy i z menu wybierana jest opcja 'inspect'. Otwierają się narzędzia deweloperskie. Szerokość obrazu ustawiana jest na 100 pikseli, co natychmiast zmniejsza obraz.

CSS w Dash

Argument style komponentów Dash
- Przyjmuje CSS jako słownik
Poprzedni kod w komponencie Dash:

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

CSS – kolor

CSS pozwala ustawić:

Kolor tła elementu (background-color)
Kolor tekstu (color)

Obie właściwości przyjmują ciągi znaków (np. 'red') lub kody RGB (np. 'rgb(0,0,255)' to niebieski!)

Tabela z dwiema kolumnami: lewa wypełniona kolorami, prawa zawiera odpowiadające kody RGB. Widoczne są komórki w kolorze fioletowym, zielonym, ciemnoróżowym i granatowym z kodami RGB.

CSS – rozmiar

CSS ustawia rozmiar za pomocą właściwości width i height

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

Rozmiar CSS jako procent

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

50% rozmiaru elementu nadrzędnego

Czas na ćwiczenia!

Tworzenie dashboardów z Dash i Plotly