HTML gyorsreferencia - Színek megadása

HTML gyorsreferencia	© Fejér Tamás, 2003 BME, Építészeti Ábrázolás Tanszék
Színek

* Kérdés, észrevétel Ő Vissza

Színek megadása

Színeket elsősorban stíluslapokon keresztül érdemes megadni. A következő módszerekkel adhatunk meg színeket stílusokkal (további példákat ld. lejjebb):

színnév formában (a 16 megadható nevet ld. Színek megadása névvel).
#RRGGBB formában, ahol RR, GG és BB egy 00-ff közötti, tizenhatos számrendszerbeli, kétjegyű szám lehet. Pl.: #000000: fekete, #ffffff: fehér, #ff0000: piros.
#RGB formában, ahol R, G és B egy 0-f közötti, tizenhatos számrendszerbeli, egyjegyű szám lehet. Ez az előbbi megadási mód rövidítése, ha a szín számának két jegye megegyezik (ld. Böngészőbiztos színek). Pl.: #000: fekete, #fff: fehér, #f00: piros, #c63: mint #cc6633. Csak ilyen esetekben használható.
rgb(R, G, B) formában, ahol R, G és B egy 0-255 közötti, tízes számrendszerbeli szám lehet. Pl.: rgb(0,0,0): fekete, rgb(255,255,255): fehér, rgb(255,0,0): piros.
rgb(R%, G%, B%) formában, ahol R%, G% és B% egy 0.0%-100.0% közötti lebegőpontos érték lehet. Pl.: rgb(0%, 0%, 0%): fekete, rgb(100%, 100%, 100%): fehér, rgb(100%, 0%, 0%): piros.
elem formában, ahol elem a felhasználói felület egy eleme (ld. Felhasználói színbeállítás). Pl.: ActiveBorder: aktív ablak kerete, Menu: menük háttere.

Egyes Html elemekhez is megadhatók színek különböző paraméterek segítségével (ld. Színek alkalmazása Html elemekhez), de ilyenkor csak az első három megadási mód használható.

Színek megadása névvel

A táblázat mutatja azt a 16 színt, amelyre névvel is hivatkozhatunk. Alatta ugyanannak a színek más megadási formái láthatók.

color: black; color: #000000; color: #000; color: rgb(0,0,0); color: rgb(0%,0%,0%);	color: navy; color: #000080; color: rgb(0,0,128); color: rgb(0%,0%,50%);	color: maroon; color: #800000; color: rgb(128,0,0); color: rgb(50%,0%,0%);	color: green; color: #008000; color: rgb(0,128,0); color: rgb(0%,50%,0%);
color: gray; color: #808080; color: rgb(128,128,128); color: rgb(50%,50%,50%);	color: teal; color: #008080; color: rgb(0,128,128); color: rgb(0%,50%,50%);	color: purple; color: #800080; color: rgb(128,0,128); color: rgb(50%,0%,50%);	color: olive; color: #808000; color: rgb(128,128,0); color: rgb(50%,50%,0%);
color: silver; color: #c0c0c0; color: rgb(192,192,192); color: rgb(75%,75%,75%);	color: blue; color: #0000ff; color: #00f ; color: rgb(0,0,255); color: rgb(0%,0%,100%);	color: red; color: #ff0000; color: #f00; color: rgb(255,0,0); color: rgb(100%,0%,0%);	color: lime; color: #00ff00; color: #0f0; color: rgb(0,255,0); color: rgb(0%,100%,0%);
color: white; color: #ffffff; color: #fff; color: rgb(255,255,255); color: rgb(100%,100%,100%);	color: aqua; color: #00ffff; color: #0ff; color: rgb(0,255,255); color: rgb(0%,100%,100%);	color: fuchsia; color: #ff00ff; color: #f0f; color: rgb(0,0,255); color: rgb(0%,0%,100%);	color: yellow; color: #ffff00; color: #ff0; color: rgb(255,255,0); color: rgb(100%,100%,0%);

Böngészőbiztos színek

Az újabb számítógépek többmillió színű képeket is megjelenítenek, de sok régebbi színrendszer maximum 256 színt tud egyidejűleg megjeleníteni. Ilyenkor a böngészők megpróbálják a valódi színeket a rendelkezésre álló (fix) palettából kikeverni, és ez néha a színek zavaró mintázottságához vezethet.

A legtöbb böngésző támogatja az ún. böngésző-biztos (browser safe) palettát, mely hat egyenlő fokozatra osztja (és úgy kombinálja) a piros, zöld, és kék színösszetevőket. Az összetevők megengedett értékei:

Dec	0	51	102	153	204	255
Hex	0	33	66	99	cc	ff
rövid Hex	0	3	6	9	c	f
Százalék	0%	20%	40%	60%	80%	100%

Ha a böngésző a böngésző-biztos palettát használja, a lap háttereként a legközelebbi paletta-színt fogja megjeleníteni, megelőzve ezzel a színek előbb említett (és főleg hátter-színek esetén zavaró) vibrálását. Viszont ha háttérszínként a palettán nem szereplő színt választunk, előfordulhat, hogy a háttér-szín megváltozik.

A böngészőbiztos paletta színeinek táblázata (Bob Stein elrendezésében):

#fff

#ccc

#999

#666

#333

#000

#fc0

#f90

#f60

#f30

#9c0

#c90

#fc3

#fc6

#f96

#f63

#c30

#c03

#cf0

#cf3

#330

#660

#990

#cc0

#ff0

#c93

#c63

#300

#600

#900

#c00

#f00

#f36

#f03

#9f0

#cf6

#9c3

#663

#993

#cc3

#ff3

#960

#930

#633

#933

#c33

#f33

#c36

#f69

#f06

#6f0

#9f6

#6c3

#690

#996

#cc6

#ff6

#963

#630

#966

#c66

#f66

#903

#c39

#f6c

#f09

#3f0

#6f3

#390

#6c0

#9f3

#cc9

#ff9

#c96

#c60

#c99

#f99

#f39

#c06

#906

#f3c

#f0c

#0c0

#3c0

#360

#693

#9c6

#cf9

#ffc

#fc9

#f93

#fcc

#f9c

#c69

#936

#603

#c09

#303

#3c3

#6c6

#0f0

#3f3

#6f6

#9f9

#cfc

#c9c

#969

#939#

#909

#636

#606

#060

#363

#090

#393

#696

#9c9

#fcf

#f9f

#f6f

#f3f

#f0f

#c6c

#c3c

#030

#0c3

#063

#396

#6c9

#9fc

#cff

#39f

#9cf

#ccf

#c9f

#96c

#639

#306

#90c

#c0c

#0f3

#3f6

#093

#0c6

#3f9

#9ff

#9cc

#06c

#69c

#99f

#99c

#93f

#60c

#609

#c3f

#c0f

#0f6

#6f9

#3c6

#096

#6ff

#6cc

#699

#036

#369

#66f

#66c

#669

#309

#93c

#c6f

#90f

#0f9

#6fc

#3c9

#3ff

#3cc

#399

#366

#069

#039

#33f

#33c

#339

#336

#63c

#96f

#60f

#0fc

#3fc

#0ff

#0cc

#099

#066

#033

#39c

#36c

#00f

#00c

#009

#006

#003

#63f

#30f

#0c9

#09c

#3cf

#6cf

#69f

#36f

#03c

#30c

#0cf

#09f

#06f

#03f

Felhasználói színbeállítás

Névvel vagy RGB értékkel megadott színek mellett a CSS2 lehetővé teszi, hogy színeket megadhassunk olyan módon is, hogy azok illeszkedjenek a felhasználói felülethez. Ezért mindenhol, ahol színt adunk meg, érvényes színek a táblázatban felsoroltak is.

Például ha azt szeretné, hogy a bekezdések háttér- és írásszíne ugyanaz legyen, mint ami az olvasó operációs rendszerében ablak háttér- és írásszínnek be van állítva, akkor a következőt kell megadnia:

P { color: WindowText; background-color: Window;}

color: ActiveBorder;	aktív ablak keretszíne
color: ActiveCaption;	aktív ablak fejléce
color: AppWorkspace;	asztal háttérszíne (?)
color: Background;	asztal háttérszíne
color: ButtonFace;	gomb felszínének színe
color: ButtonHighlight;	3D elemek (gombok) sötét árnyéka
color: ButtonShadow;	3D elemek (gombok) árnyéka
color: ButtonText;	Nyomógombok feliratának a színe
color: CaptionText;	Legördülő listák szövege
color: GrayText;	Letiltott gomb vagy menüpont színe
color: Highlight;	Vezérlőben kiválasztott elem
color: HighlightText;	Vezérlőben kiválasztott elem szövege
color: InactiveBorder;	Inaktív ablak kerete
color: InactiveCaption;	Inaktív ablak fejléce
color: InactiveCaptionText;	Inaktív ablak fejlécszövege
color: InfoBackground;	Eszköztipp háttérszíne
color: InfoText;	Eszköztipp írásszíne
color: Menu;	Menü háttérszíne
color: MenuText;	Menü írásszíne
color: Scrollbar;	Gördítősáv színe
color: ThreeDDarkShadow;	3D hatású elemek sötét árnyéka
color: ThreeDFace;	3D hatású elemek felülete
color: ThreeDHighlight;	3D hatású elemek színe kattintáskor
color: ThreeDLightShadow;	3D hatású elemek fény felöli árnyéka
color: ThreeDShadow;	3D hatású elemek sötét árnyéka
color: Window;	Ablak háttérszíne
color: WindowFrame;	Ablakkeret színe
color: WindowText;	Ablakon belüli szöveg írásszíne

Színek alkalmazása stíluslapon

Az itt bemutatott formázási tulajdonságok bármilyen Html elemhez használhatók. Itt a <span> és <div> elemen keresztül mutatjuk be használatukat.

<div style="background-color: white">…</div>;	Háttérszín megadása
<div style="border-top-color: gray; border-right-color: silver; border-bottom-color: blue; border-left-color: silver; border-style: solid;">…</div>	Keretszín megadása
<span style="border-color: gray silver blue silver; border-style: solid;">…</span>	Keretszín megadása rövidebben
<span style="border-color: black; border-style: solid;">…</span>	vagy még rövidebben
<span style="color: teal;">…</span>	írásszín megadása
<span style="outline-color: invert;">…</span>	Kontúrszín megadása. A négy oldalra csak egyszerre adható meg. Speciális, csak itt használható szín az invert, ami biztosítja, hogy a kontúr bármilyen szín használata esetén is látszik. Jelenlegi böngészők nem ismerik.
<span style="text-shadow: aqua 2px 1px 5px;">…</span>	Szöveg körüli árnyékhatás. Jelenlegi böngészők nem ismerik.

Színek alkalmazása Html elemekhez

Html-ben az alábbi elemekhez adható meg szín. Ezek mind elavult módszerek, csak régi böngészőkkel való kompatibilitás miatt lehetnek szükségesek. Html-ben a színmegadási módok közül csak az első három használható, mert az rgb() függvényt nem ismeri.

HTML elem	CSS tulajdonság	Leírás
<body bgcolor="white" text="black" link="blue" vlink="fuchsia" alink="blue">	body {background-color: white; color: black;} a:link {color: blue} a:visited {color: fuchsia} a:active {color: blue}	Régi böngészők számára megadható az ablak háttérszíne, az írásszín, a linkek, a már látott linkek és az aktív linkek színe.
<table bgcolor="#699">	<table style="background-color: #699;">	A teljes táblázat háttérszíne.
<tr bgcolor="#9c9">	<tr style="background-color: rgb(60%, 80%, 60%)">	A táblázat egy sorának háttérszíne.
<td bgcolor="#c0c0c0"> <th bgcolor="teal">	<td style="background-color: #c0c0c0;"> <td style="background-color: teal;">	Egy cella háttérszíne.
<font color="gray">	<span style="color: gray">	Közrezárt szöveg színe.