css-3Blog

Ahogyan azt az első részben megígértem, következzék a CSS további tipográfiai eszközeinek bemutatása.

A font-variant tulajdonságot arra használjuk, hogy a “normál” és a kiskapitális betűszedési mód között váltsunk. Három különböző érték egyikét veheti fel. Az első lehetséges érték az inherit, ami az alapértelmezett beállítás. Hatására az elem a szülő stílusát veszi át. Ha például van egy bekezdésünk (<p>) ami egy szakasz (<div>) része, és a szakaszra vonatkozóan beállítjuk a font-variant tulajdonságot, akkor ez a tulajdonság átöröklődik a bekezdésre, amennyiben a bekezdés font-variant tulajdonságát inherit állapotban hagytuk, és nem adtunk neki explicit más értéket. A másik két lehetséges érték a normal és a small-caps. A normal nem igényel sok magyarázatot, hatása annyi, hogy a vonatkozó szöveg nem kiskapitálisokkal lesz szedve. A small-caps hatására viszont azzal lesz. Személyes véleményem, hogy rövid szövegrészek kiemelésére remekül használható , de ne használjuk hosszabb szövegekhez, mert az így szedett szöveg olvasása fárasztóbb. Példa:

p {
    font-variant: small-caps;
}

A line-height tulajdonság a sormagasság beállítására való. Ez egy olyan tulajdonság, amelyhez szinte mindig hozzá kell nyúlni, ha weboldalt tervezünk. Az alapbeállítás ugyanis normál (egyszeres) sortávolságot eredményez, amit ha változatlanul hagyunk, nagyon zsúfolt hatást kelt. A vonatkozó szakirodalom szerint az ideális sortávolság – többsoros szövegek esetén – a 1.5 sor. Ezt a legegyszerűbben a következő módon állíthatjuk be:

p {
    line-height: 1.5em;
}

Egyébként ennek a tulajdonságnak van még egy nem magától értetődő, de nagyon hasznos felhasználási módja, mégpedig a függőlegesen középre való pozicionálás. A dolog csak egysoros szövegeknél működik, de tekintettel arra, hogy milyen nehéz a CSS segítségével függőlegesen középre pozicionálni, sokszor ez is aranyat ér. A példa erre a következő:

div#main {
    height: 100px;
    background-color: #999;
}

#main p {
    line-height: 100px;
}

Ezzel a trükkel a legfeljebb 1 sor hosszú szövegünket pont a #main nevű szakaszunk középvonalára tudjuk pozicionálni, mert az az egy sor teljesen kitölti a rendelkezésre álló helyet. Ettől a betű nem lesz nagyobb, viszont a szakasz tetejétől és aljától egyenlő távolságot tart. A line-height: 100%; nem működne, ugyanis a 100% ekkor a sor alapértelmezett magasságát jelentené, nem pedig a rendelkezésre álló területet.

A text-transform tulajdonság segítségével felülbírálhatjuk a szöveg eredeti kapitalizációját. A lowercase beállítás segítségével minden szöveg, amire a tulajdonság vonatkozik kisbetűs lesz, függetlenül attól, hogy egyébként milyen volna. Ugyanígy, az uppercase hatására nagybetűs szöveget kapunk. Ha a capitalize beállítást választjuk, akkor pedig minden szó első betűje nagy lesz, a többi pedig változatlan marad. Van még két további beállítás is: a none hatására nem változtat az eredeti szövegen, az inherit pedig átveszi a szülő elem beállítását. Példa:

p {
    text-transform: uppercase;
}

A text-decoration tulajdonság az eszköz néhány további stilisztikai hatás megvalósítására. Ezek közül szinte csak a line-through tulajdonságnak van gyakorlati haszna, hatására az adott szöveget áthúzásra kerül. Példa:

p {
    text-decoration: line-through;
}

A text-decoration többi beállítására ritkán lesz szükségünk, de azért felsorolom:

• blink: Emlékeztek még a ‘90-es évek weboldalainak villogó szövegeire? Ezzel a beállítással lehet bekapcsolni a villogást. Merénylet a közízlés ellen, ezért még példát sem mutatok rá.
• inherit: Mint fent.
• none: Mint fent.
• overline: felülvonás
• underline: alulvonás. Ennek a használata nem javasolt. Az alulvonás mint kiemelés ugyanis az írógépek korszakából való, a weben ennek a megfelelője a dőlt betűkkel való szedés. Az alulvonás ugyanis a linkek számára van fenntartva, és megzavarja az oldal látogatóját, ha az aláhúzott szó nem hiperhivatkozást jelöl.

Tipográfiai körutunk utolsó állomása a color tulajdonság, amely számára hexadecimális kódban kell megadnunk a választott színt (bár néhány alapvető színt kiírva is megért). Bármilyen színt beállíthatunk, a web-biztos (web-safe) színek világa már rég a múlté. Gyakoroljunk azért önmérsékletet: ne állítsunk be hosszabb szövegrészek számára olyan színt, amit fárasztó olvasni, és ügyeljünk a háttér és az előtér közti megfelelő kontrasztra. Alapdolognak tűnik, de sajnos még mindig nagyon sok olyan weboldal van, ahol fekete alapon szürkével olvastatnak velünk hosszabb szövegeket, a végére pedig kifolyik a szemünk. A színekkel kapcsolatban még annyit, hogy sok webes szolgáltatás segít a megfelelő szín kiválasztásában. Van olyan, ahol kiválaszthatunk 1-2 színt, és megmondja, hogy mit érdemes mellé választani, hogy harmonizáljon (ilyen például a ColorSchemeDesigner); van ahol komplett paletták közül választhatunk (pl. a Kuler-en); és van ahová feltölthetünk egy képet (ami mondjuk a weboldalunk fő képe), és az alapján ad tanácsot, hogy milyen színeket használjunk, ami a képpel harmonizál. Utóbbira példa a ColorSuckr. Ha nem vagyunk biztosak színválasztásunkban, ne féljünk használni ezeket a szolgáltatásokat. Sokkal jobb megoldás, mint elindulni egy ízléstelen vagy szemfárasztó weboldallal, és csodálkozni, hogy nem özönlenek a látogatók. Végül a példa a color tulajdonsághoz:

p {
    color: #555555;
}