CSS Színek és Tipográfia

CSS színkódok (HEX, RGB) és webes tipográfia beállítása

A Box Model megértése után rátérhetünk a webdizájn leglátványosabb részére. A színek és a betűtípusok (tipográfia) határozzák meg egy weboldal hangulatát és olvashatóságát. Ebben a leckében megnézzük, hogyan kezeli a böngésző a színkódokat, és hogyan húzhatunk be egyedi betűtípusokat anélkül, hogy lelassítanánk az oldalt.

Színek megadása a CSS-ben

A CSS-ben a szöveg színét a color, a háttérszínt pedig a background-color tulajdonsággal állítjuk be. A böngészők többféle formátumot is megértenek, amikor színekről van szó.

1. Előre definiált színnevek (Named Colors)

A HTML és a CSS 140 előre elnevezett színt támogat (pl. red, blue, tomato, dodgerblue). Ezeket gyors prototipizálásra használjuk, de éles projektekben szinte soha, mert túlságosan korlátozott a paletta.

2. HEX (Hexadecimális) kódok

A webfejlesztés abszolút standardja. Egy kettőskereszttel (#) kezdődik, amit 6 darab szám vagy betű követ (0-9 és A-F). Az első két karakter a piros (Red), a második kettő a zöld (Green), az utolsó kettő a kék (Blue) csatorna intenzitását jelöli.

.gomb {
    background-color: #0f766e; /* Egy sötétebb smaragdzöld */
    color: #ffffff; /* Tiszta fehér */
}

3. RGB és RGBA

Az RGB (Red, Green, Blue) ugyanazt a logikát követi, mint a HEX, csak 0-tól 255-ig terjedő számokkal. A zsenialitása az RGBA formátumban rejlik, ahol az "A" az Alpha csatornát (átlátszóságot) jelöli. Az érték 0.0 (teljesen átlátszó) és 1.0 (teljesen tömör) között mozoghat.

.atlatszo-doboz {
    /* Fekete háttér, 50%-os átlátszósággal */
    background-color: rgba(0, 0, 0, 0.5); 
}

Tipográfia: A betűtípusok kezelése

A szövegek formázása a weboldal olvashatóságának (UX) alapja. A legfontosabb CSS tulajdonságok a következők:

font-family: A betűtípus neve (pl. Arial, Helvetica).
font-size: A betű mérete. Ma már ritkán használunk pixelt (px), helyette a relatív rem vagy em mértékegységeket preferáljuk a reszponzivitás miatt.
font-weight: A betű vastagsága (pl. normal, bold, vagy számokkal: 400, 700).
line-height: A sorköz. A jó olvashatóság érdekében a bekezdéseknél érdemes 1.5 vagy 1.6 értéket használni.

body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 1rem; /* Általában 16px-nek felel meg */
    line-height: 1.6;
    color: #333333;
}

Figyeld meg a font-family értékét! Több betűtípust is megadtunk vesszővel elválasztva. Ezt "Font Stack"-nek hívják. Ha a látogató gépén nincs telepítve az Open Sans, a böngésző automatikusan az Arial-t fogja használni. A legvégén lévő sans-serif egy utasítás: "ha semmit nem találsz, használj egy tetszőleges talpatlan betűtípust".

Külső betűtípusok: Google Fonts

Ha nem akarsz a felhasználó gépén lévő unalmas betűtípusokra (Arial, Times New Roman) hagyatkozni, külső forrásból is behúzhatsz betűkészleteket. A legnépszerűbb és ingyenes megoldás a Google Fonts.

A beillesztéshez a HTML fájlod <head> szekciójába kell tenned egy link taget, amit a Google ad:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Ezután a CSS-ben már hivatkozhatsz is rá:

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

Teljesítmény (SEO) tipp: Soha ne húzz be 2-3 betűtípusnál többet, és csak azokat a vastagságokat (font-weight) válaszd ki, amiket tényleg használni fogsz. Minden egyes betűtípus egy újabb hálózati kérés a szerver felé, ami drasztikusan lassíthatja a weboldalad betöltését.

← Előző lecke Következő lecke: Pozicionálás →