Cvičení na kaskádové styly
Tahle stránka vypadá tak, jak jí říká její CSS styl.
Měnit ji v rámci cvičení vůbec nebudete, proto můžeme obsah použít pro popis samotného zadání:
- Otevřte v prohlížeči tuhle stránku (to už máte) a uložte ji celou na disk.
- Klikněte kamkoliv pravým tlačítkem a vyberte Uložit jako, a potom typ nastavte na Webová stránka, kompletní.
- Můžete si všimnout, že se tím vytvořil nejen soubor
2023-12-01-css.html, ale také složka 2023-12-01-css_files, ve které jsou dva obrázky a soubor base.css.
- Dejte pozor, abyste původní stránku v prohlížeči zavřeli a otevřeli tu právě staženou.
- Otevřte soubor se stylem
base.css tak, abyste jej mohli upravovat.
- Nejpohodlnější je, otevřít stránku v prohlížeči Firefox, zmáčknout F12 a přepnout na záložku Style Editor. Veškeré úpravy se vám průběžně budou ukazovat a kliknutím na malý nápis Save u souboru
base.css pak svoji práci rovnou uložíte.
- Nastavte celé stránce barvu písma a barvu na pozadí.
- Nastavte oběma obrázkům stejnou výšku, a to přesně 300 pixelů:
- Nastavte obrázkům, aby se zobrazovaly v řádku (to znamená, pokud možno vedle sebe).
- Libovolným způsobem změňte čáru pod nadpisem
h1.
- Původně je nastavená
border-bottom: 5px solid lightgrey;.
- Můžete změnit umístění čáry (
bottom, top, left), tloušťku, styl tahu (solid, dashed, double) a barvu.
- Vytvořte rozestupy mezi položkami seznamu.
- To znamená, nastavit položce seznamu vlastnost hodnotu
margin-bottom, aby před následující položkou vznikla mezera.
- Je na vás, jak velkou tu mezeru uděláte, ale snažte se, aby stránka šla ještě číst (to je pro vás).
- Jestli vám tohle celé zadání přijde příliš jednoduché, můžete místo selektoru
li použít li:not(:last-of-type) a nastudovat si, jak to funguje.
- Nastavte tagu
<body> (tedy celému obsahu stránky), aby zabíral 50% šířky okna, ale maximálně 700px a minimálně 300px.
- Jestli máte otevřený postranní panel F12, můžete jej teď využít pro vyzkoušení, jak se stránka chová v různě velkém oknu.
- Nastavte, aby odkazy při přejetí výrazně změnily barvu.
- K tomu slouží speciální selektor
:hover, v tomhle případě a:hover.
- (nepovinné) Vyberte si jakýkoliv font na Google Fonts a nastavte jej celé stránce.
- U vybraného fontu nejdřív klikněte na Select (typ) (velikost), např. Select Regular 400.
- V pravém panelu, který se otevřel, přepněte na
@import a zkopírujte kód uvnitř tagu <style> (ten samotný tag nekopírujte).
- Zkopírovaný kód
@import vložte samostatně na první řádek do vašeho style.css.
- V pravém panelu u zvoleného fontu najděte jeden řádek s pravidlem
font-family a ten přikopírujte do stylu tagu body.
Svůj upravený soubor base.css odevzdejte do Teams do zadání CSS styl.
