Pojmenované barvy

Barvy dělají stránku hezčí na pohled a snáz čitelnou. V této lekci obarvíme naši stránku o kočkách a vyzkoušíme všechny způsoby, jakými se v CSS dá barva zapsat:

• pojmenované barvy, například green (zelená) nebo white (bílá),
• barvy RGB, namíchané z červeného, zeleného a modrého světla,
• hexadecimální barvy, které jsou jen kratším zápisem barev RGB,
• barvy HSL, popsané odstínem, sytostí a světlostí.

Pro tuto lekci jsme stránku o kočkách připravili znovu, s krátkým souborem se styly. Podívejte se na style.css v editoru: má dvě pravidla a každé z nich používá jinou vlastnost pro barvu:

• color (barva) nastavuje barvu textu, které se také říká barva popředí. Díky pravidlu pro #nadpis je hlavní nadpis bílý.
• background-color (barva pozadí) nastavuje barvu pozadí prvku, tedy plochy za jeho obsahem. Díky pravidlu pro .nadpis-pozadi je plocha kolem hlavního nadpisu černá.

Obě vlastnosti přijímají barvu v kterémkoli z uvedených zápisů.

Nejjednodušší je zapsat barvu jejím anglickým názvem. CSS zná 148 názvů barev. Kromě základních, jako je red (červená), blue (modrá) nebo gray (šedá), mezi nimi najdete třeba tomato (rajčatová), gold (zlatá), skyblue (blankytná) nebo orchid (orchidejová). Na velikosti písmen nezáleží, názvy barev ale obvykle píšeme malými písmeny:

p {
	color: tomato;
}

Názvy se snadno čtou i pamatují, je jich ale jen 148. Ostatní zápisy dokážou popsat přes 16 milionů barev, takže si můžeme vybrat přesně ten odstín, který chceme.