Színek - Szín megadási módok
A CSS szabvány több lehetőséget is kínál a szín értékének megadására.
Szín megadása névvel
Elvileg az a legegyszerűbb, ha abból a 16 színből választasz, amelyik az angol megnevezésével is definiálható a stíluslapokon. Ez a 16 szín a következő:
| Szín | Név | Színkód | Szín | Név | Színkód |
|---|---|---|---|---|---|
| Black | #000000 | Green | #008000 | ||
| Silver | #c0c0c0 | Lime | #00ff00 | ||
| Gray | #808080 | Olive | #808000 | ||
| White | #ffffff | Yellow | #ffff00 | ||
| Maroon | #800000 | Navy | #000080 | ||
| Red | #ff0000 | Blue | #0000ff | ||
| Purple | #800080 | Teal | #008080 | ||
| Fuchsia | #ff00ff | Aqua | #00ffff |
Példa:
h1 {color: blue}
Szín megadása RGB komponensekkel
Általában a fent felsorolt 16 szín nem elég egy weblap elkészítéséhez. További színeket az RGB (Red-Green-Blue) színskálán lehet megadni. Ez azt jelenti, hogy a képernyőn lévő színek a vörös, a zöld és a kék megfelelő arányú keveréséből alakulnak ki. Mindhárom komponens értéke 0 és 255 között változhat, amivel már közel 17 millió árnyalat definiálható.
A színkomponensek
megadására több lehetőség is van, például
a következő módon:
h1 {color: rgb(0, 0, 255) }
A színkomponensek
értéke százalékosan is megadható:
h1 {color: rgb(0%, 0%, 100%) }
ahol a 0% megfelel a 0 értéknek, 100% pedig a 255-nek.
A legelterjedtebb
megoldás az, amikor a színkomponensek értékei
16-os számrendszerben vannak megadva. Ebben az esetben a #
karakter után egyszerűen felsoroljuk a három
színösszetevő 16-os számrendszerbeli értékét
(ezt hexadecimális színkódnak nevezzük),
ami a fentieknél lényegesen tömörebb
írásmódot tesz lehetővé:
h1 {color: #0000ff}
A színkód
tovább tömöríthető abban az esetben, ha
mindhárom színkomponens 16-os számrendszerben
megadott értéke két azonos karakter, például a
h1 {color: #a2b}
egyenértékű a
h1 {color: #aa22bb} deklarációval.
Tehát amennyiben a böngésző háromjegyű
színkóddal találkozik, akkor annak mindhárom
karakterét megduplázza és az így kapott
színnel jeleníti meg az érintett elemet.
A hexadecimális színkód kiszámolásához a Színválasztó oldalon találhatsz egy kis támogatást illetve a sablonjaimhoz is tartozik egy-egy oldal, amelyik a weboldal különböző színvariációinak kipróbálásában és a színkódok meghatározásában segít.