VÝUKA.CSS

Box model

Box model je základní koncept v CSS, který popisuje, jak jsou prvky na webové stránce vykresleny a jak mezi sebou interagují.

Každý HTML prvek je považován za obdélník, který se skládá z několika vrstev...


Zobrazit více Ukázat kód

Stíny

Stíny v CSS umožňují přidávat vizuální efekty stínu k prvkům na webové stránce.

Existují dvě hlavní vlastnosti pro přidávání stínů..


Zobrazit více Ukázat kód

Position

V CSS vlastnost position určuje, jak je prvek umístěn na webové stránce a jak interaguje s ostatními prvky. Tato vlastnost může nabývat několika hodnot, které určují různé způsoby umístění prvku...


Zobrazit více Ukázat kód

Display : flex

V CSS vlastnost display: flex aktivuje flexbox model, což je způsob uspořádání a zarovnání prvků v kontejneru.

Flexbox je ideální pro vytváření dynamických rozvržení, které se přizpůsobují velikosti obrazovky a různým zařízením.


  1. Flex Container
    • Prvek s nastavenou vlastností display: flex nebo display: inline-flex.
    • Tento prvek se stává kontejnerem pro všechny své přímé potomky, kteří se stanou flex položkami.
  2. Flex Items
    • Přímí potomci flex kontejneru. Tyto prvky se řídí pravidly flexboxu.
  • display: flex; nebo display: inline-flex;
  • flex-direction: Určuje směr hlavní osy (řádku nebo sloupce).
  • justify-content: Zarovnání položek podél hlavní osy.
  • align-items: Zarovnání položek podél křížové osy (kolmo na hlavní osu).
  • flex-wrap: Určuje, zda se flex položky mají zabalit do dalšího řádku, pokud se nevejdou do kontejneru.
  • align-content: Zarovnání více řádků flex položek podél křížové osy, pokud je dostupné více řádků.

Zpět 
css
1
2
3
                .flex-container {
                    display: flex;
                    justify-content: space-between;
                    background-color: DodgerBlue;
                }
                .flex-container div{
                    background-color: blue;
                    margin: 10px;
                    padding: 20px;
                    font-size: 30px;
                    justify-content: space-between;
                }

Float

V CSS vlastnost float umožňuje umístění prvku na jednu stranu kontejneru, což umožňuje textu a dalším prvkům obtékat kolem něj.

Tato vlastnost byla hojně používaná v dřívějších verzích CSS pro tvorbu layoutů, než byla představena moderní metoda flexbox a grid.


Zobrazit více Ukázat kód