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ě

Formáty: (camelCase / snake_case / PascalCase)

HTML tagy sémanticky, v CSS používat volné selektory.

Proč bychom ale měli mít správný kód?

Formátování kódu je důležité. Používáme tedy buď mezery a nebo taby. Nekombinujeme je.

Pro formátování můžeme využít F1 → Format document.

Vlastnost gap

Vlastnost row-gap a
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

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/