HTML gyorsreferencia |
© Fejér Tamás, 2003 |
Színek |
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):
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ó.
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
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 |
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. |
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. |