# Lekce 3

# Návrat a upřesnění * Zanořování elementů * Někdy vynucení potomci, většinou volné * URL - relativní vs absolutní * `https://mojeadresa.com/mujobrazek.jpg` * `mujobrazek.jpg` * pozor na místní adresy

# Pseudotřídy * `p:first-child{}`, `p:last-child{}` * `p:first-of-type{}`, `p:last-of-type{}` * `p:nth-child(n){}` * `a:link{}`, `a:visited{}` * `a:hover{}`, `a:active{}`, `a:focus{}`

DEMO

# Box Model Opakování * Blokové elementy * `h1`, `p`, `div`, `section`, ... * Řádkové elementy * `span`, `a`, `img`, ... * Řádkově blokové - hybrid * `button`, ...

# Box model obrázek ![](boxmodel.png)

# Vlastnosti bloku - velikost * Výška * `height: 100px;` * Šířka * `width: 100px;` * px vs % (pozor na výšku) * `min-height`, `max-height`

# Vlastnosti bloku - typ velikost * Nejlepší * `box-sizing: border-box;` * Nastavit všemu * `* {box-sizing: border-box;}`

DEMO

# Vlastnosti bloku - ohraničení (border) * Velikost, barva, typ * `border-width: 1px;` * `border-color: black;` * `border-style: solid;` * `border-radius: 15px`

# Vlastnosti bloku - ohraničení (border), rozpis * Shorthand - zkratka * `width: 1px black solid;` * Detail * `border-top-width: 0;` * Souhrn velikostí * `border-width: top right bottom left;`

DEMO

# Vlastnosti vnitřní výplň - padding * `padding: 1rem;`

DEMO

# Vlastnosti vnější odsazení - margin * `margin: 1rem;` * Slučuje se * `margin: 1rem auto;`

DEMO

# Nastavení typu zobrazení * `a {display: block;}` * `div {display: inline;}` * `li {display: inline-block;}`

DEMO

# Rozdělení na více stránek

DEMO

# DevTools - demo

# Děkuji za pozornost, domácí úkol * Rozdělte prezentaci na dvě stránky * Udělejte horizontální menu mezi stránkami * Vylepšete vizuálně prezentaci * přidejte rámečky * omezte maximální šířku stránky aby text nebyl od krajů do krajů