CSS szövegformázás

A CSS szövegformázás lehetővé teszi, hogy testre szabjuk a szövegek megjelenését: beállíthatjuk a színt, méretet, igazítást, betűközt, díszítéseket és a sorközt. Ezek a beállítások kulcsszerepet játszanak az olvashatóságban és a vizuális élményben.

Alap szövegformázás tulajdonságok

A szövegekhez megadhatunk színt, betűméretet és igazítást. Ezek a tulajdonságok határozzák meg a szöveg legelső vizuális benyomását.

Az alábbi példában a bekezdés sötétkék színt, 18px betűméretet és középre igazítást kap:

Szöveg igazítása

A <text-align> tulajdonsággal a szöveget balra, jobbra, középre vagy sorkizártra igazíthatjuk.

Szöveg átalakítása és díszítése

A <text-transform> segítségével nagybetűssé, kisbetűssé vagy mondatkezdővé alakíthatjuk a szöveget. A <text-decoration> lehetővé teszi például az aláhúzást vagy áthúzást, a <letter-spacing> pedig a betűk közötti távolságot szabályozza.

Az alábbi példában a szöveg teljesen nagybetűs, aláhúzott és extra betűközzel jelenik meg:

Sorköz és szótávolság

A <line-height> beállítja a sorok közötti távolságot, míg a <word-spacing> a szavak közötti teret szabályozza. Ezek fontos eszközök a szövegek olvashatóságának javítására.

Az alábbi példa 1.8-as sorközt és 5px szótávolságot ad a szöveghez:

Szöveg árnyék (text-shadow)

A <text-shadow> segítségével árnyékot adhatsz a szöveghez, amivel kiemelheted vagy díszítheted azt.

Fejlettebb tipográfiai beállítások

A <white-space> és <word-break> tulajdonságok segítségével szabályozhatod, hogy a szöveg mikor törjön új sorba vagy hogyan kezelje a hosszú szavakat.

Tippek a szövegformázáshoz

Az alábbi tanácsok segítenek abban, hogy a szöveg olvasható és esztétikus legyen:

• Mindig ügyelj a megfelelő kontrasztra a háttér és a szöveg között.
• Kerüld a túl sokféle díszítést, mert zavaróvá teheti a szöveget.
• Használj megfelelő sorközt, hogy a szöveg könnyebben olvasható legyen különböző eszközökön.