css-3Blog

A CSS alapjairól szóló cikksorozat jelenlegi és következő részében arról lesz szó, hogy hogyan szabhatjuk testre szöveges tartalmainkat CSS segítségével. Vágjunk is mindjárt a közepébe.

A legfontosabb tulajdonság ebben a kategóriában a font-family. Segítségével megadhatunk egy sor betűkészletet, amelyek közül az első olyan lesz felhasználva, amelyik a felhasználó gépén rendelkezésre áll. Példa:

p {
    font-family: Arial, Helvetica, sans-serif;
}

Ezzel a beállítással azt érjük el, hogy a böngésző előbb megpróbálja Arial betűtípussal szedni a szöveget, majd ha nincs a gépen Arial, akkor megpróbálja a Helvetica-t, és ha az sincs, akkor a rendszer alapértelmezett sans-serif, azaz talapzat nélküli betűtípusát fogja használni. A helyes gyakorlat egyébként az, ha a speciálistól haladunk az általános felé a betűtípus meghatározásakor. Elsőnek nyugodtan választhatjuk azt a típust, amivel igazán úgy néz ki a szövegünk, ahogy szeretnénk. Másodikként válasszunk egy elterjedtebbet, ami stílusában hasonló. Harmadikként pedig adjunk meg egy kategóriát (serif, sans-serif, vagy monospace), arra az esetre, ha még a gyakoribb típus sem elérhető valamiért.

A font-size tulajdonság a betűméret beállítására való. Rengeteg különböző mértékegységben megadhatjuk, de igazából pixelben, em-ben vagy esetleg pt-ben érdemes. Példa:

p {
    font-size: 12px;
}

A font-weight tulajdonság segítségével állíthatjuk félkövér stílusúra a szöveget. Személy szerint jobban szeretem erre a font-weight tulajdonság helyett a <strong> HTML tag-et használni. Hogy miért? A probléma elvi síkú. Amikor egy szövegből valamit ki akarunk emelni, az általában szemantikai és nem stilisztikai kérdés. A szemantika reprezentálása a HTML dolga, a CSS-t a prezentációra használjuk. Ráadásul keresőoptimalizálás szempontjából is jobb a <strong> ugyanis a keresőmotorok nagyobb relatív súllyal kezelik az így jelölt tartalmat. Végül, de nem utolsó sorban, a <strong> tag-nek is adhatunk CSS stílust, ha tehát úgy gondoljuk, hogy a vastagítás helyett ezentúl más eszközt használunk a kiemeléshez (pl. alászínezés), akkor egyetlen CSS sorral elegánsan meg is oldhatjuk a váltást az egész websiteon. Azért természetesen olykor szükséges a font-weight is, úgyhogy beszéljünk róla egy keveset. Az általa felvehető lehetséges értékek 100-tól 900-ig terjednek, valamint a bold, bolder, normal és a lighter megengedett. Ebből a hétköznapokban egyedül a normal és a bold fontos, ugyanis a legtöbb böngésző nem valósítja meg a többit. Illetve megvalósítja, csak megfelelteti őket a normal-nak vagy a bold-nak, így használatukkal nem érünk el valódi különbséget. Példa:

p {
    font-weight: bold;
}

A következő részben megismerkedünk a font-variant, a line-height, a text-transform, a text-decoration és a color attribútumokkal.