cviceni-custom-properties's Introduction

Cvičení: Custom properties

Zadání

Otevři si soubor moje-styly.css a doplň ho podle následujících instrukcí. V celém cvičení není potřeba upravovat žádné jiné soubory.
Na :root přidej custom property --hlavni-barva: #dd614a a --doplnkova-barva: #73a580.
Nadpisu h1 nastav barvu textu na hlavní barvu.
Odkazům nastav barvu doplňkovou.
Po najetí myši na odkaz ji změň na hlavní. Barvu změň jen tomu prvku, na kterém je myš.
Nastyluj tlačítka.
1. Barvu pozadí nastav na hlavní. U .tlacitko--doplnkove na barvu doplňkovou.
2. Na :root přidej custom property --vnitrni-vypln-tlacitek a nastav ji na 0.5em.
3. Hodnotu použij pro padding ve všech směrech a pro míru zaoblení rohů.
4. Tlačítka nemají mít žádný rámeček. Pouze barvu pozadí a bílý text uvnitř.
5. Tlačítko s tagem a i button by měly být stejně velká (font-size: inherit).
6. Po najetí myši podtrhni vnitřní text.

Pro obrazovky široké 800px a větší nastav vnitřní výplň u tlačítek na 1em.
Přidej podporu pro dark/light mode, tmavé a světlé téma.
1. Nastav custom property --barva-textu: #ffffff a --barva-pozadi: #15202b.
2. Aplikuj barvy na body. Stránka by se měla zatmavit.
3. Pokud zařízení uživatele má nastavenou preferenci pro světlé téma, obrať hodnoty na --barva-textu: #15202b a --barva-pozadi: #ffffff. Nápověda: Prozkoumej media query prefers-color-scheme (dokumentace na MDN). Pro variantu light změň hodnoty custom properties. Pro otestování hledej ve vývojářských nástrojích emulaci preference barevného schéma (tři tečky > Run command > Emulate CSS prefers-color-scheme: light).