HTML színek használata
A színek a weboldalak megjelenésének egyik legfontosabb elemei. Segítenek a hangulat kialakításában, a tartalom kiemelésében és az általános dizájnban. A HTML-ben többféle módon is megadhatjuk a színeket.
Színek megadási módjai
A HTML-ben színeket megadhatunk név szerint (pl. red), HEX kód segítségével (pl. #ff0000), RGB formátumban (pl. rgb(255, 0, 0)), vagy HSL formában (pl. hsl(0, 100%, 50%)).
Kód részletek
<p style="color: red;">Red text</p>
<p style="color: #00ff00;">Green text (HEX)</p>
<p style="color: rgb(0, 0, 255);">Blue text (RGB)</p>
<p style="color: hsl(60, 100%, 50%);">Yellow text (HSL)</p>
Előnézet
Red text
HEX formátum
A HEX (hexadecimális) kódok egy # jellel kezdődnek, és hat karakterből állnak. Az első két karakter a piros, a következő kettő a zöld, az utolsó kettő pedig a kék komponens értékét adja meg.
RGB formátum
Az RGB formátum három számot használ zárójelben: red, green és blue. Minden érték 0 és 255 közötti lehet. Például az rgb(255, 0, 0) a piros színt jelenti.
HSL formátum
A HSL (Hue, Saturation, Lightness) egy másik módszer a színek leírására. A Hue a szín árnyalatát adja fokokban, a Saturation a telítettséget százalékban, a Lightness pedig a világosságot.
Név szerinti színek
HTML-ben több mint 140 előre definiált színnevet használhatunk, például red, blue, green, orange stb. Ezek könnyen olvashatók és gyorsan beépíthetők a stílusba.
Szöveg és háttér kontraszt
Fontos, hogy elegendő kontraszt legyen a szöveg és a háttérszín között, különben a tartalom nehezen olvashatóvá válik. Használj világos szöveget sötét háttéren vagy fordítva.
Színek és akadálymentesség
A színek használata során mindig gondoljunk a látássérült felhasználókra is. Kerüljük azokat a kombinációkat, amelyek színvakok számára olvashatatlanok lehetnek. Fontos, hogy a tartalom ne csak a színekre épüljön.
Feladat: Húzd be a hiányzó sort, amely a szöveget zöldre színezi!
Kód
<!DOCTYPE html>
<html>
<head>
<style>
body {
Húzd ide az elemet
}
</style>
</head>
<body>
<blockquote>
<p>When you have something to say, silence is a lie.</p>
<footer>- Jordan B. Peterson</footer>
</blockquote>
</body>
</html>
Válaszok
Előnézet
Tippek színhasználathoz
- Használj konzisztens színsémát az egész oldalon.
- Kerüld az erős, vibráló színek túlzott használatát.
- Teszteld az oldal kinézetét sötét és világos módban is.
- Ne támaszkodj kizárólag a színekre az információ közléséhez.
- Használj színkontraszt ellenőrzőt, hogy megfelelj az akadálymentességi szabványoknak (WCAG).
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
