Základy CSS v Dash

Tvorba dashboardů s Dash a Plotly

Alex Scriven

Data Scientist

Co je CSS?

Zkratka pro „Cascading Style Sheets"
Určuje vzhled a rozmístění prvků webové stránky

Lze ovládat:
- Vlastnosti textu (velikost, barva a styl písma)
- Velikost a tvar HTML prvků
- Umístění objektů

CSS on the web

Most websites have CSS files;

They are read in on page load
This course: style property instead

A screenshot of Google's homepage with the chrome developer tools open where it can be seen that there is a tag that links to a stylesheet. The code notes "<link type="text/css" rel=Stylesheet href=" and a link after the href to the CSS file location

CSS on HTML elements

CSS can also be used on an HTML element

Use the style property of a tag
Accepts CSS written as key-value pairs
- Statements are "property:value; property:value;"

A screenshot of the HTML from a lesson in chapter 1 that created several divs of different sizes with background colors. It demonstrates the use of a style property on HTML.

Some CSS styling

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

An image of a black title "Welcome to the website!" and below this, in red, in bigger writing "Enjoy your stay!"

Úprava živého CSS

CSS lze upravovat na živém webu

Pravý klik na prvek > „Inspekce" > úprava CSS hodnoty
Poznámka – jde pouze o lokální změnu (po obnovení zmizí)

Animace úvodní stránky Googlu, kde je logo po kliknutí pravým tlačítkem myši a v nabídce vybrána možnost „Inspekce". Otevřou se Google Developer Tools. Šířka obrázku je nastavena na 100 pixelů, čímž se okamžitě zmenší.

CSS v Dash

Argument style v komponentách Dash
- Přijímá CSS jako slovník
Předchozí kód v komponentě Dash:

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

CSS pro barvy

CSS umožňuje nastavit:

Barvu pozadí prvku (background-color)
Barvu textu (color)

Obě metody přijímají řetězce (např. 'red') nebo RGB kódy (např. 'rgb(0,0,255)' je modrá!)

Tabulka se dvěma sloupci: levý je vyplněn barvami, pravý obsahuje odpovídající RGB kódy. Jsou zobrazeny buňky ve fialové, zelené, tmavě růžové a tmavě modré barvě s příslušnými RGB kódy.

CSS pro velikost

CSS umožňuje nastavit velikost pomocí vlastností width a height

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

CSS size as a percentage

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

50 % velikosti nadřazeného prvku

Let's practice!

Tvorba dashboardů s Dash a Plotly