Moderní rozložení 2

19. hodina WBA


Matěj Cajthaml — SSPŠ

©

Opakování

Jak prohodíme osy ve flexboxu?
K čemu slouží tagy thead, tbody, tfoot? Co pro ně platí?
K čemu slouží na tagu ol atribut start?
Jak zapíšeme komentář v CSS?
Jaké známe jednotky CSS?

Správný kód

Jak by dle Vás měl vypadat správný kód?

Názvy tříd a identifikátorů:

Anglicky, krátce, výstižně

(camelCase / snake_case / PascalCase)

Proč ale?

Stránky vidí lidi a umí si zobrazit zdrojový kód. Kód můžou vidět ostatní lidé a nemusí být jasné co vše má znamenat.

Formátování kódu

Proč je formátování kódu podstatné?

VSC F1 → Format document

Online nástroje, ...

Vlastnost gap

Vlastnost row-gap
column-gap

Vlastnost box-shadow

  • vytvoří na daném prvku stín
  • hodnoty:
    • horizontální offset (povinné)
    • vertikální offset (povinné)
    • rozmazání
    • šířka / šíření
    • barva (povinné)
    • pozice (inset)

Vlastnost box-shadow

Stínu lze aplikovat více pomocí rozdělení hodnot pomocí znaku ,.

Vlastnost box-shadow

Vlastnost filter

Vlastnost filter

Dvě strany

Práce

Moderní rozložení s navigací

Práce

SSPŠuper

Práce

Poselství

Práce

https://ssps.cajthaml.eu/2-wba/work/20-poselstvi

Shrnutí

Co dělá pseudotřída :nth-child(5)?
Co to znamená kaskáda? Jak se projevuje v CSS?
K čemu slouží tag aside? Co označuje?
Jak zarovnáme prvky na vedlejší ose?
K čemu slouží vlastnost filter?

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/