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 | přečteno 24877×
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.
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ích barev je 16 a jsou uvedeny v dokumentaci W3C. Výhoda používání těchto barev tkví v jejich snadné zapamatovatelnosti.
black | white | green | maroon | ||||
olive | navy | purple | gray | ||||
yellow | lime | aqua | fuchsia | ||||
silver | red | blue | teal |
Jedná se o sadu 124 barev. Tyto barvy naleznete často na webu pod označením Pojmenované barvy nebo Barvy X11.
ivory | lightyellow | snow | floralwhite | ||||
lemonchiffon | cornsilk | seashell | lavenderblush | ||||
papayawhip | blanchedalmond | mistyrose | bisque | ||||
moccasin | peachpuff | navajowhite | gold | ||||
pink | lightpink | lightsalmon | orange | ||||
darkorange | coral | hotpink | tomato | ||||
orangered | deeppink | magenta | oldlace | ||||
lightgoldenrodyellow | linen | antiquewhite | salmon | ||||
ghostwhite | mintcream | whitesmoke | beige | ||||
wheat | sandybrown | aliceblue | azure | ||||
honeydew | khaki | lightcoral | palegoldenrod | ||||
violet | darksalmon | lavender | lightcyan | ||||
burlywood | plum | gainsboro | crimson | ||||
goldenrod | orchid | thistle | palevioletred | ||||
lightgrey | tan | chocolate | peru | ||||
indianred | mediumvioletred | darkkhaki | rosybrown | ||||
mediumorchid | darkgoldenrod | firebrick | powderblue | ||||
lightsteelblue | paleturquoise | greenyellow | lightblue | ||||
darkgray | brown | sienna | yellowgreen | ||||
darkorchid | palegreen | darkviolet | mediumpurple | ||||
lightgreen | darkseagreen | saddlebrown | darkmagenta | ||||
darkred | blueviolet | lightskyblue | skyblue | ||||
mediumslateblue | aquamarine | chartreuse | lawngreen | ||||
lightslategray | slategray | slateblue | dimgray | ||||
olivedrab | mediumauquamarine | cornflowerblue | cadetblue | ||||
darkolivegreen | indigo | mediumturquoise | darkslateblue | ||||
steelblue | royalblue | turquoise | mediumseagreen | ||||
limegreen | darkslategray | seagreen | forestgreen | ||||
lightseagreen | dodgerblue | midnightblue | springgreen | ||||
mediumspringgreen | darkturquoise | deepskyblue | darkcyan | ||||
darkgreen | mediumblue | darkblue | cyan |
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;}
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é.
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á 28 = 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í 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%);}
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;}
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 (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.
#ffffff | #000033 | #000066 | #000099 | ||||
#0000cc | #0000ff | #003333 | #003366 | ||||
#003399 | #0033cc | #0033ff | #006633 | ||||
#006666 | #006699 | #0066cc | #0066ff | ||||
#009933 | #009966 | #009999 | #0099cc | ||||
#0099ff | #00cc33 | #00cc66 | #00cc99 | ||||
#00cccc | #00ccff | #00ff33 | #00ff66 | ||||
#00ff99 | #00ffcc | #00ffff | #330033 | ||||
#330066 | #330099 | #3300cc | #3300ff | ||||
#333333 | #333366 | #333399 | #3333cc | ||||
#3333ff | #336633 | #336666 | #336699 | ||||
#3366cc | #3366ff | #339933 | #339966 | ||||
#339999 | #3399cc | #3399ff | #33cc33 | ||||
#33cc66 | #33cc99 | #33cccc | #33ccff | ||||
#33ff33 | #33ff66 | #33ff99 | #33ffcc | ||||
#33ffff | #660033 | #660066 | #660099 | ||||
#6600cc | #6600ff | #663333 | #663366 | ||||
#663399 | #6633cc | #6633ff | #666633 | ||||
#666666 | #666699 | #6666cc | #6666ff | ||||
#669933 | #669966 | #669999 | #6699cc | ||||
#6699ff | #66cc33 | #66cc66 | #66cc99 | ||||
#66cccc | #66ccff | #66ff33 | #66ff66 | ||||
#66ff99 | #66ffcc | #66ffff | #990033 | ||||
#990066 | #990099 | #9900cc | #9900ff | ||||
#993333 | #993366 | #993399 | #9933cc | ||||
#9933ff | #996633 | #996666 | #996699 | ||||
#9966cc | #9966ff | #999933 | #999966 | ||||
#999999 | #9999cc | #9999ff | #99cc33 | ||||
#99cc66 | #99cc99 | #99cccc | #99ccff | ||||
#99ff33 | #99ff66 | #99ff99 | #99ffcc | ||||
#99ffff | #cc0033 | #cc0066 | #cc0099 | ||||
#cc00cc | #cc00ff | #cc3333 | #cc3366 | ||||
#cc3399 | #cc33cc | #cc33ff | #cc6633 | ||||
#cc6666 | #cc6699 | #cc66cc | #cc66ff | ||||
#cc9933 | #cc9966 | #cc9999 | #cc99cc | ||||
#cc99ff | #cccc33 | #cccc66 | #cccc99 | ||||
#cccccc | #ccccff | #ccff33 | #ccff66 | ||||
#ccff99 | #ccffcc | #ccffff | #ff0033 | ||||
#ff0066 | #ff0099 | #ff00cc | #ff00ff | ||||
#ff3333 | #ff3366 | #ff3399 | #ff33cc | ||||
#ff33ff | #ff6633 | #ff6666 | #ff6699 | ||||
#ff66cc | #ff66ff | #ff9933 | #ff9966 | ||||
#ff9999 | #ff99cc | #ff99ff | #ffcc33 | ||||
#ffcc66 | #ffcc99 | #ffcccc | #ffccff | ||||
#ffff33 | #ffff66 | #ffff99 | #ffffcc |
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.