====== CSS II =====

===== Úvod =====
  * Pokračujte v práci na HTML z předchozího cvičení: [[https://gitlab.fel.cvut.cz/dzuremar/teaching-zwa/-/blob/main/cv4/index.html]]

==== Základní layout ====
  - **box model**: Viditelně oddělte od sebe elementy ''nav'', ''article'', ''footer'', ''header'' pomoci box model prvků (//padding//, //border//, //margin//).
  - **float**, **clear**: Vložte do úryvku mnohem více vygenerovaného textu ([[https://www.lipsum.com/|lorem ipsum]]). Stáhněte si libovolný obrázek, vložte ho do úryvku, vyzkoušejte si na něm různé způsoby obtékání obrázku textem.
  - **position**: Zkuste si různé nastavení pozice obrázku v úryvku (//static//, //relative//, //absolute//, //fixed//)
  - **display**: Označte pár po sobě jdoucích slov v úryvku tagem span. Zvýrazněte v něm barvu textu a zkuste si různé způsoby jeho zobrazení v rámci textu (//none//, //inline//, //block//, //inline-block//)

==== Pokročilý layout ====
  - **Flexbox**: Do tagu ''header'' přidejte ''button'' s nápisem "Login", zařiďte aby byl úplně vpravo. Zároveň zařiďte aby stávající tagy ''img'' a ''h1'' byli úplně vlevo a vedle sebe. Challenge - zkuste vyřešit bez použití flexboxu (//float//, //clear//, //position//, atd.).
  - **Responzivita**: Zařiďte, aby se tagy ''nav'' a ''article'' zobrazovali dynamicky vedle sebe na desktopu, anebo pod sebou na smartphonu (//@media//)
  - **Tisk**: Vytvořte a nalinkujte nový soubor CSS stylu, který se aplikuje jen při tisku stránky //<link media=...>//

==== Odkazy ====
  * [[https://www.w3schools.com/css/css_boxmodel.asp|box model]]
  * [[https://www.w3schools.com/css/css_float.asp|float a clear]]
  * [[https://www.w3schools.com/css/css_positioning.asp|position]]
  * [[https://www.w3schools.com/cssref/pr_class_display.asp|display]]
  * [[https://www.w3schools.com/css/css3_flexbox.asp|flexbox]]
  * [[https://www.w3schools.com/cssref/css3_pr_mediaquery.asp|@media]]
  * [[https://www.w3schools.com/tags/att_link_media.asp|print]]