ARCHIV

CSS (3.) - Barvy

V dnešním díle se seznámíme se způsoby zadávání barev v kaskádových stylech.

2.8.2004 13:00 | Vasek | Články autora | přečteno 24874×

Pomocí stylu lze samozřejmě určit i barvu elementu. Barvy používané v CSS jsou z RGB barevného prostoru a jsou uzpůsobeny možnostem koncových zobrazovacích zařízení. K nastavení barvy slouží atribut color. Hodnotou tohoto atributu lze zadat několika způsoby.

• Jménem v angličtině
• Číselně v RGB
  • desítkově
  • procentuálně
  • hexadecimálně
  • hexadecimálně zkráceně

Jménem v angličtině

Barvu lze definovat jejím anglickým jménem. Existuje 140 pojmenovaných barev, které lze rozdělit do dvou skupin: základní barvy, barvy X11. Při zadávání jména barvy se nerozlišují velká a malá písmena.

Základní barvy

Základních barev je 16 a jsou uvedeny v dokumentaci W3C. Výhoda používání těchto barev tkví v jejich snadné zapamatovatelnosti.

Barvy X11

Jedná se o sadu 124 barev. Tyto barvy naleznete často na webu pod označením Pojmenované barvy nebo Barvy X11.

Systémové barvy

Sada 28 barev, které lze uvést v definování stylu. Nejde však o barvy, které bychom předem jednoznačně stanovovali. Jejich skutečná hodnota bude nastavena až při zpracování prohlížečem nebo převaděčem HTML a to podle barev, které jsou nastaveny v systému. Srozumitelněji řečeno, převezmou se barvy nastaveného pozadí, textu, oken atd. na konkrétním PC. Systémové barvy jsou obsaženy v dokumentaci k CSS 2 a jedná se o tyto barvy: ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText.

h1 {color: red;}
.test {background-color: Mediumslateblue;}
#prac {color: HighlightText;}

Číselně v RGB

V tomto modelu používáme k vytvoření barvy tří základních barev - červenou (Red), zelenou (Green) a modrou (Blue). Každá složka je ve výsledné barvě zastoupena určitým podílem. Při míchání barev ve schématu RGB vlastně specifikujeme kolik dílů dílčí barvy bude zastoupeno v barvě cílové.

Desítkově

K zápisu barvy je použito funkce rgb, která má tři parametry oddělené čárkou, udávající po řadě složky R, G a B. Rozsah hodnot parametrů je v intervalu 0 až 255. Proč je maximum zrovna 255? Pro intenzitu pixelu mají počítače (v hi color) vyhrazeno 8 bitů, což znamená 2⁸ = 256 možností, jelikož je použita i 0, je maximální hodnota 255. Pokud tedy v RGB schématu je zastoupeno 255 dílů červené, 0 dílů zelené a 0 dílů modré, pak je výsledná barva červená.

h1 {color: rgb(255,0,0);}
.test {background-color: rgb(0,255,0);}
#prac {color: rgb(255,255,255);}

Procentuálně

Procentuální zápis barvy opět využívá funkci rgb se třemi parametry. Místo dekadické zápisu jednotlivých složek se používá procentuální vyjádření (255 - 100%, 0 - 0%).

h1 {color: rgb(100%,0%,0%);}
.test {background-color: rgb(0%,100%,0%);}
#prac {color: rgb(100%,100%,100%);}

Hexadecimálně

Zapisují se ve tvaru #RRGGBB, kde RR, GG a BB jsou po řadě hodnoty červené, zelené resp. modré složky barvy (255 - FF, 0 - 0).

h1 {color: #FF0000;}
.test {background-color: #00FF00;}
#prac {color: #FFFFFF;}

Hexadecimálně zkráceně

Pro barvy, jejichž složky jsou zapsány vždy dvěma stejnými číslicemi (např #FF00000), můžeme použít zkrácený zápis #RGB (např. #F00).

h1 {color: #F00;}
.test {background-color: #0F0;}
#prac {color: #FFF;}

Paleta bezpečných barev

Paleta bezpečných barev (Web Save Palet) je soubor 216 barev, které by se měly zobrazit na libovolném zobrazovacím zařízení stejně. Tyto barvy mají v šestnáctkovém zápisu pro každou barvu pouze šest možných hodnot: 00, 33, 66, 99, CC nebo FF. V procentuálním zápisu se mohou používat násobky 20%, což odpovídá násobkům čísla 51 v zápisu desítkovém.

Závěr

Jak je zřejmé z předcházejících řádků, způsobů jak zadat v CSS konkretní barvu je více, a je jen na vás, který se naučíte a budete používat. Nejčastěji se používá hexadecimální zápis.

Verze pro tisk