10. CSS - nastavení barev

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR EU PENÍZE ŠKOLÁM
Číslo projektu CZ.1.07/1.4.00/21.2732
Název projektu školy EU Peníze školám
Klíčová aktivita III/2 Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_ 1ICT9roč_10

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - nastavení barev

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Použití vybraných CSS vlastností pro nastavení barvy.

Klíčová slova: barva, color, background-color

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení barvy.

Ověřeno: 14. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

10.1 CSS - nastavení barev (studijní text)

Zápis barev

Barvy se dají zapisovat různými způsoby. Důležité je určit si jeden způsob a toho se držet.

  1. anglické pojmenování barvy
    • např.: red, green, blue, yellow,
    • nejjednodušší, ale omezené množství barev
  2. RGB kódem s hexadecimální (šestnáctkovým) číslem 00 až FF
    • např.: #FF00FF, zkráceně při stejných hodnotách v páru: #F0F = #FF00FF),
    • na začátku se vždy píše křížek #,
    • nejpoužívanější, přes 16 milionů možných barev
  3. RGB kódem s desítkovým číslem 0 až 255:
    • např.: rgb(128,0,255),
    • totéž jako v předchozím případě.

Na druhou stranu je však nutné říci, že v praxi nelze použít všech 16 milionů možných barev, jelikož lidské oko není schopno všechny odstíny odlišit a také z důvodu kompatibility různých zobrazovacích zařízení. Proto se určil systém tzv. bezpečných barev, které se na 100% zobrazí na všech zařízení. Na odkazech níže najdete články o pojmenovaní barev.

Generátor RGB kódů barev

Barva popředí (text)

color

  • barva čehokoliv se definuje vlastností COLOR a hodnotou barvy (viz výše)
selektor {color: #FF0000}
selektor {color: yellow}
selektor {color: rgb(128,128,128)}

Barva pozadí

background-color

  • barva pozadí čehokoliv se definuje vlastností BACKGROUNG-COLOR a hodnotou barvy
selektor {background-color: #FF0000}
selektor {background-color: yellow}
selektor {background-color: rgb(128,128,128)}

10.2 CSS - nastavení barev (cvičení)

Úkol

  • Ve složce WWW si vytvořte složku CV10.
  • Ze složky CV09 si zkopírujte všechny HTML a CSS soubory a složku IMG.
  • Soubor style.css upravte podle následujícího klíče:
    • přidejte komentář "cv10"
    • barva pozadí těla dokumentu: HEX kódem barva LightBlue,
    • barva nadpisu 1. úrovně: HEX kódem barva MidnightBlue,
    • barva nadpisu 2. úrovně: HEX kódem barva DarkBlue,
    • barva nadpisu 3. úrovně: HEX kódem barva MediumBlue,
    • barva nadpisu 4. úrovně: HEX kódem barva Blue,
    • barva odstavců, odkazů, seznamů a tabulky: HEX kódem barva Navy.
  • Zkontrolujte na případné chyby a uložte.