< WebKészítés /> interaktív webszerkesztő tananyagok
Szövegformázás
Szinte folyamatosan szükségünk van arra, hogy bizonyos szavakat, szövegrészeket emeljünk ki, színezzünk át stb. Az XHTML-ben szándékosan kerültem ezek tárgyalását, itt viszont látni fogjuk, CSS segítségével, ezt hogy tehetjük meg. A formázandó szövegrészek kijelölésére szokás használni a tanult <span címkét. Emlékezzünk csak vissza, hogy a class=""><span>class, style és id attribútumokkal hogy ruházhatók rá stílusok...
A font-style: dőlt betűs szöveg megjelenítését teszi lehetővé a következő értékekkel: italic és oblique. Ha normal-t használunk, akkor nem lesz dőlt szöveg.
A font-weight: a betűk vastagságát adja meg. Lehet: normal (normál), bold (félkövér), bolder (félkövérnél vastagabb), lighter (normálnál vékonyabb), vagy 100-tól 900-ig a kerek 100-as értékek. Ez utóbbi amolyan vastagítási skála, ahol a 400 a normálnak, a 700 pedig a félkövérnek felel meg. Bár elvileg széles skálán állítható a vastagítás, a böngészők csak a normal vagy a bold értéket veszik figyelembe! Tehát vagy vastagíthatjuk a betűket, vagy nem csinálunk vele semmit.
A font-size:-zel variálhatunk a méreten is. E tulajdonság értékéhez csak a következőket ajánlott megadni: %, em, smaller, larger. Ugyanis ezek az értékek a szülő elem méretéhez képest relatívan adják meg a betűméretet. Ha abszolút értékeket használunk, akkor a betűméret eltérhet a látogató által megszokottól a különböző eszközökön. Abszolút méretet csak nyomtatási stíluslaphoz használjunk, ezek a következők: xx-small, x-small, small, medium, large, x-large, xx-large. Ezek ebben a sorrendben növekednek. Ide sorolható még a pt-ban és px-ben megadott számérték is.
Talán a legismertebb formázási mód, a font-family:-vel elérhető betűtípus beállítás. Felmerül egy fontos probléma itt. Mit kezdjen a böngésző, ha az adott gépre nem lenne telepítve a kívánt betűtípus? Az elkerülés érdekében nem konkrét betűtípust adunk meg itt, hanem a használandó típusokról egy prioritásos listát. Ha az első megadott típus nem található, akkor próbálkozik a másodikkal és így tovább. Pl: Arial, ;"Times New Roman", Verdanaserif és sans-serif vagy cursive vagy fantasy vagy monospace.
Ismét eljött egy új rövidítő tulajdonság ideje. A font: az összes eddigi tulajdonságot beállítja, a következő sorrendben: font-style font-variant font-weight font-size font-family. Eggyel még lógok, tudom... az lejjebb kerül tisztázásra. (Jah, a következők már nem kezdődnek font-tal, így őket ne is próbáljuk beleerőszakolni ebbe a rövidítőbe.)
További klasszikus formázás lehet az aláhúzás, fölé húzás és áthúzás. Őket a text-decoration: underline, overline és line-trough értékeivel csalhatjuk elő. Ez a tulajdonság kaphat még: none és blink értéket is. Előbbi az imént felsoroltakat tiltja, utóbbi pedig villogó szöveget képez. Ezt sajnos nem támogatja az Internet Explorer.
A gyakorlottabb felhasználók általában a sorközök megadására is ügyelnek. Nekik a line-height: lesz hasznos tulajdonság, ami lehet: normal és hosszmérték Hasonló értékeket kaphat a karakterek közti távolságot (betűköz) szabályozó letter-spacing: is. Ugyanez a helyzet a word-spacing:-gel is, ami a szavak közti közöket állítja be.
A közök után térjünk át a betűk nagyságára. A text-transform: tulajdonság a szöveget kisbetűssé (lowercase), nagybetűssé (uppercase), vagy minden szót nagy kezdőbetűssé (capitalize) változtat. Természetesen ez is kaphat none értéket. A font-variant: hasonló funkcióval bír. Vele kis kapitális szöveget gyárthatunk, ha értéke small-caps. Más esetben, mint megszokhattuk, a normal használatos.
Ha igazítani szeretnénk a szövegünket valamely oldalra, akkor a text-align: tulajdonságot kell magdnunk a következő értékek egyikével: left (balra), right (jobbra), center (középre), vagy justify (sorkizárt). Ez utóbbi arra jó, aki nem ismerné a kifejezést, hogy a szóközök nyújtásával a margóhoz igazítja a sorok végét.
Előfordul, hogy a könyvekből ismert módon beljebb szeretnénk húzni a bekezdések első sorát. Erre a text-indent: hosszmérték;
Árnyékot is tehetünk egy-egy szövegrész alá a text-shadow: szín eltolás-x eltolás-y elmosás-sugara meghatározással. Az eltolások és a sugár számértékek! Alapesetben none az értéke.
Néhány ország esetén az írás nem balról jobbra (ltr), hanem jobbról balra (rtl) történik. A kettő közt a direction:-nal válthatunk, mely egy egész blokk elemre vonatkozik. Gyakran vele együtt jár az unicode-bidi: tulajdonság, mi az előbb megadott irányú blokkon belül képez embed és bidi-override esetén ellenkező irányt vagy (normal) nem tesz semmit. Engedelmetekkel ide sorolom még a white-space:, szóköz kezelő tulajdonságot is. Ha nowrap-ra állítjuk, akkor csak ott lesz sortörés, ahol azt <br />-rel jelöljük. A pre-vel gyakorlatilag egy <pre></pre>-t állítunk elő. Ha csak nem kimondottan szükséges, hagyjuk az alapértelmezett normal állapotban!
Legvégül pedig a betűszín tulajdonsággal zárnám soraim. Gondolom, mindenki tudja már, hogy color: tulajdonságról van szó. Ha mégsem lenne tiszta, az előző oldalakra visszalapozva megtalálható...
Eddig még senki sem írt hozzászólást... Légy te az első!
Új hozzászólás írásához lépj be fiókodba vagy regisztrálj oldalunkon!