Előre szeretném bocsátani, hogy ez a megoldás inkább egy érdekesség bemutatása lesz, de a Photoshoptól még nem búcsúzhatunk el, ha tükröződéseket szeretnénk készíteni. Ennek két oka van. Egyrészt, amit itt be fogok mutatni az csak Webkit alapú böngészőkön, tehát Chrome és Safari alatt működik, máshol egyelőre nem. Másrészt a tükröződés minősége valahogy nem ugyanaz, mint amit egy képszerkesztő programmal elő lehet állítani. Tagadhatatlan előnye viszont, hogy dinamikus, tehát nem kell előre tudnunk, hogy mit tükrözünk, ami nagyon hasznos lehet például egy képgaléria esetén.

Nézzük tehát, hogy hogy működik a dolog. A CSS tulajdonság, aminek értéket kell adnunk, a -webkit-box-reflect. Három értéket kell megadnunk: hol legyen a tükörkép, milyen távolságra legyen az eredetitől és egy maszkot, ami eldönti, hogy mely pixel mennyire legyen látható a tükörképen. Az általános alak a következő:

	-webkit-box-reflect: direction offset mask-box-image;

A direction adja meg, hogy hol legyen a tükörkép. Az above (fölül), below (alul), left (balra) és right (jobbra) értékek közül választhatunk. Az offset segítségével állíthatjuk be, hogy az elem és a tükörképe között mekkora távolság legyen. A mask-box-image pedig az a “maszk”, ami a tükörkép tetejére kerül. Hogy a kívánt hatást elérjük, ennek a maszknak egy webkit-gradiensnek kell lennie. Nézzünk egy példát:

img.reflected {
	-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
	vertical-align: top;
}

Ezt a kódot most alkalmazzuk egy képre. A bal oldalon látható az általad használt böngésző segítségével készült tükröződés, jobb oldalon pedig egy képernyőmentés azok számára, akik nem Webkit alapú böngészőt használnak.

Nagyjából ennyi az egész. Még azt érdemes megemlíteni, hogy a dolog nemcsak képekre működik, hanem például a <video> elemre is, és ilyenkor az éppen futó video is tükröződik. Még egy jó pont, hogy a tükörkép nem veri szét a weboldal elrendezését, hanem szülő-elemének overflow-jaként funkcionál. Tehát ha nincs számára elég hely, és overflow: hidden; a beállítás, akkor a tükörkép csak részlegesen vagy egyáltalán nem látható.

A background-color segítségével beállíthatjuk a háttér színét. Ez főleg akkor hasznos, ha nem valamilyen képet akarunk beállítani háttérként vagy fennáll annak a lehetősége, hogy a háttérként beállítani kívánt kép mérete nem éri el a teljes kitöltendő területet, és a kép által nem takart rész színét mi akarjuk meghatározni. A legfontosabb az, hogy mindig ügyeljünk a háttér és a tartalom kontrasztjára, mert a fekete alapon sötétszürke betűk — és még rengeteg további példát sorolhatnék — olvasása rendkívül fárasztó, így látogatóink otthagyják az oldalt akármennyire érdekes is a tartalom. A következő beállítással például feketére állíthatjuk az egész oldal hátterét:

body {
background-color: black;
}

A background-image tulajdonság beállításával egy képet használhatunk háttérként. Mivel háttérképről van szó, ezért célszerű olyan képet választani, amely nem vonja el a figyelmet a tartalomról. Ehhez általában az kell, hogy a kép ne legyen nagyon harsány, lehetőleg legyen homogén és elegendő kontraszt maradjon közte és a tartalom között. A következő példa egy szakasz háttérképét állítja be:

div {
background-image: url(background.jpg);
}

A background-repeat segítségével adhatjuk meg, hogy a background-image-ként beállított háttérkép ismétlődjön-e vagy sem. A repeat, a repeat-x, a repeat-y és a no-repeat beállítások közül választhatunk. A repeat megadásával a képet – ha az kisebb, mint az elem, aminek a hátterének beállítottuk – mind függőlegesen, mind vízszintesen ismétli úgy, hogy az elemet teljesen lefedje. A no-repeat ennek pontosan az ellenkezője: nem ismétli meg a képet, akkor sem, ha így az elem valamekkora része háttérkép nélkül marad. Ilyenkor a képpel nem fedett rész a background-color tulajdonság által megadott színű, vagy ennek hiányában alapértelmezett színű (általában fehér). A repeat-x csak vízszintesen, a repeat-y pedig csak függőlegesen ismétli a beállított háttérképet. A következő beállítás nem ismétli a háttérképet:

body {
background-repeat: no-repeat;
}

Háttérképünknek nem kötelező az alapértelmezés szerinti középen lennie. A background-position beállításával megadhatjuk, hogy a háttérkép hova kerüljön. A beállításnál a top, bottom, center, left és right lehetőségeken kívül pontos értéket vagy százalékot is megadhatunk. A következő példa a háttérképet balra, és az elem tetejéhez képest 10 pixellel lejjebb igazítja:

div {
background-position: left 10px;
}

A végére hagytam a legérdekesebbet, a background-attachment tulajdonságot. Két beállítási lehetősége van: a scroll és a fixed. Ha a scroll van beállítva – ez az alapértelmezett -, akkor az elem görgetésével annak háttere is vele együtt mozog. A fixed beállítás esetén viszont a háttér helyben marad, és görgetéskor csak a tartalom mozog. A fixed beállítás ízléses alkalmazása sokszor feldobja az oldal összhatását. A következő példa rögzíti az oldal hátterét:

body {
background-attachment: fixed;
}

Ha szeretünk rövidíteni, használjuk a background tulajdonságot, amely lehetőséget ad a fentiek egyszerre való beállítására. A sorrend ilyenkor a következő kell legyen: background-color, background-image, background-repeat, background-attachment, background position. Például:

body {
background: black url(background.jpg) no-repeat fixed left 10px;
}

A fent bemutatott background-tulajdonságok minden elterjedt böngésző esetében használhatóak.

Mivel a tulajdonság pontos megvalósítása még változhat, ezért — ahogy már megszokhattuk — az egyes layout-motor fejlesztők itt is egyedi neveket vezettek be. A Webkit alapú böngészők esetén -webkit-transition, a Gecko alapúaknál -moz-transition, a Presto esetében pedig -o-transition a tulajdonság pontos neve. Szerencsére paraméterezésük minden motor esetén megegyezik. Akik fejből tudják, hogy melyik böngésző melyik layout-motort használja, azok az előző mondatból már kikövetkeztették, hogy a Chrome, a Safari, a Firefox és az Opera a szerencsés nyertesek. Viszont hozzátartozik az igazsághoz, hogy mivel a Gecko csak az 1.9.3 verziótól támogatja, ezért a Firefox csak a még meg nem jelent 3.7-es verziótól tudja az itt leírtakat. Az Opera pedig, bár elvileg támogatja, gyakorlatilag nem mindig a várakozásoknak megfelelően jeleníti meg az átmeneteket. Így végeredményben azt kell mondanom, hogy a példák maradéktalan élvezetéhez Webkit alapú böngésző (azaz Chrome vagy Safari) javasolt. Ha beállítjuk CSS-ben az alapértelmezett színt, akkor Opera alatt is a várakozásoknak megfelelően működik. A többi böngészőnél ez nem fontos.

A hosszas bevezető után lássuk a két példánkat, amelyeken keresztül a dolog működését szemléltetjük. Az alábbi képek élesebbek, ha az egeret föléjük mozgatjuk, egyébként elhalványodnak. Ami a lényeg: ez a változás nem egyből, hanem fél másodperc alatt zajlik le. (Akinél egyből megtörténik, annak a böngészője nem támogatja ezt a tulajdonságot).

A fenti példa létrehozásához a következő kódot alkalmaztam:

img {
	opacity: .5;
	-webkit-transition: opacity .5s ease-in;
	-moz-transition: opacity .5s ease-in;
	-o-transition: opacity .5s ease-in;
}
img:hover {
	opacity: 1;
}

Most lássunk egy példát egy olyan űrlapra, ahol az éppen kiválasztott beviteli mező háttere megváltozik:

A varázslat a következő beállításoknak köszönhető:

input, textarea {
    background-color: white;
	-webkit-transition: background-color .5s linear;
	-moz-transition: background-color .5s linear;
	-o-transition: background-color .5s linear;
}
input:focus, textarea:focus {
	background: #eeeeee;
}

Most következzen a kód magyarázata. A fenti példákban a transition ún. shorthand formáját alkalmaztam, azaz egyben adtam meg több beállítást:

transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

Lássuk az egyes tulajdonságokat külön-külön:

transition-property

Itt kell megadnunk azt a tulajdonságot, amelyre az átmenetet alkalmazni akarjuk. Ez lehet egy szín (color), lehet az áttetszőség (opacity), de lehet az elem szinte bármely tulajdonsága, mint például a  left, a border-width, stb. Nyilvánvalóan nem értelmezhető viszont az olyan tulajdonságokra, amelyekből nem lehet átmeneteket képezni, mint például a position, a display, stb.

transition-duration

Itt állíthatjuk be, hogy mennyi idő alatt menjen végbe az átmenet. Például 1.5s beállítása esetén — nem meglepő módon — másfél másodperc alatt fog az átmenet lezajlani.

transition-timing-function

Itt egy függvényt adhatunk meg az átmenet sebességének meghatározására. Ha a linear beállítást használjuk, akkor az átmenet egyenletes sebességgel megy végbe. Az ease-in hatására az átmenet lassan kezdődik és később gyorsul fel. Az ease-out ennek az ellenkezője: gyorsan indul, és a végén lassabb. Vagy megadhatunk tetszőleges Bézier-görbét a sebesség meghatározásához: cubic-bezier(x1, y1, x2, y2).

transition-delay

Ha azt szeretnénk, hogy az átmenet ne egyből, hanem egy bizonyos idő elteltével kezdődjön, akkor ennek a tulajdonságnak is érteket kell adnunk. A fenti példákban ezt nem használtam.

A transition tulajdonságok részletes leírását az egyes layout-motorok szemszögéből ezeken a linkeken találjátok: Webkit, Gecko, Presto.

A CSS 3 tehát ismét kezünkbe adott egy lehetőséget, hogy egy, a modern web designban népszerű, effektet jQuery vagy egyéb Javascript megoldás nélkül alkalmazhassunk. Ráadásul mivel az ehhez hasonló effektek ritkán nélkülözhetetlen elemei egy weboldalnak, még azért sem kell aggódnunk, hogy mi van akkor ha egy nem kompatibilis böngészőben az átmenet nem fokozatosan, hanem egyből végbemegy. A web design szakma egyre inkább egyetért abban, hogy itt az ideje a weboldal építésnél azt a szemléletet magunkévá tenni, hogy a funkcionalitásnak működnie kell minden népszerű böngészőben, viszont ha a egy-két spéci effekt csak a legkorszerűbb böngészőkben látható az még nem a világ vége.

-moz-transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

Egy kép többet ér ezer szónál, ezért kezdjük az ismerkedést egy példával. Igyekeztem egy olyan példafájlt szerkeszteni, ahol együtt tudom bemutatni mindazt, amiről ebben a posztban írni szeretnék. Elég nehéz volt minden lehetőségre olyan példát kitalálni, ami akár hasznos is lehet a való életben, de remélem, hogy ez a pszeudo-osztályok többségében sikerült. A példafájl első látásra valószínűleg kínai lesz, de az alábbi magyarázatokkal talán hasznosnak bizonyul.

:target Bizonyára ismeritek az egyes oldalakon belül elhelyezhető ún. “horgonyokat”, amelyek lehetővé teszik, hogy egy link ne egy adott oldalra, hanem az oldalon belül valahova mutasson. Ha egy ilyen linkre kattintunk, akkor az URL végén #valami látható, ahol a valami a horgony neve. Pl. a http://www.css-3.hu/wp-content/code-samples/css-pseudo-class.html#section1 jelenik meg a címsorban ha a példa fájl tartalomjegyzékének első hivatkozására kattintunk, ahol a link célpontjaként az első bekezdésre mutató horgony van beállítva. Az ilyen “célpontokhoz” lehet stílusokat rendelni a :target pszeudo-osztállyal. Ezt a lehetőséget a példában arra használtam fel, hogy a horgony célpontját képező h3 fejlécnek saját stílust adjak. Tehát ha a felhasználó a tartalomjegyzékről egy adott horgonyra ugrik, akkor a horgony mellett megjelenik egy piros csík, jelezve, hogy “ide ugrottál”. A szükséges kód a következő volt:

h3:target {
border-left: red thick solid;
padding-left: 20px;
}

:nth-child A CSS pszeudo-osztályokkal foglalkozó korábbi posztban foglalkoztam a :first-child pszeudo-osztállyal, ami lehetővé tette, hogy egy elemre akkor vonatkozzon a megadott stílus, ha ő a DOM struktúrában a szülő elemének az első gyermeke. Ezt a lehetőséget bővíti ki az :nth-child pszeudo-osztály, úgy hogy ne csak az első, hanem tetszőleges sorszámú elem vagy elemek legyenek kiválaszthatóak. A 3. elem kiválasztása például az :nth-child(3) megadásával történhet. De itt még nem ér véget az örömünk, ugyanis ennél lényegesen többet tud ez a pszeudo-osztály! A zárójelek között ugyanis nem csak egy konstanst adhatunk meg, hanem egy an+b alakú kifejezést, tehát előírhatjuk, hogy a stílus minden valahányadik elemre vonatkozzon. A példában ezt a táblázat páros sorainak alászínezésére használtam föl, a következő kóddal:

tbody tr:nth-child(2n+2) {
background-color: #C4EAEA;
}

Minden 2. sort akartam alászínezni, és mivel az n 0-ról indul (erre nincs befolyásunk), ezért kellett a +2.

:only-of-type Ez az érdekes pszeudo-osztály azokat az elemeket választja ki, akik egyedüliként léteznek adott típusúként a szülő elemükön belül. A példába tettem egy olyan sort, amiben csak egy kép van és egy olyat, amiben három. Az :only-of-type segítségével beállítottam, hogy abban az esetben, ha csak egy kép van az adott sorban, akkor az kapjon egy bordó keretet. Ehhez a következő kódot használtam.

img:only-of-type {
border: #990000 solid thick;
}

Persze lehet vitatkozni azon, hogy ennek mennyi haszna van, de el tudok képzelni olyan design-t, ahol más stílust akarunk adni egy elemnek ha egyedül áll, és mást, ha több egyforma is van belőle.

:not() Ez is egy érdekes pszeudo-osztály. Segítségével a stílus hatálya alól kizárhatunk egy adott osztálynak megfelelő elemet. A példában ezt arra használtam fel, hogy lent, a Hozzászólások részben minden olyan hozzászólás-fejlécet szürkével jelenítsek meg, amelyet nem az admin írt, azaz nem rendelkezik az admin_comment osztállyal. Ez a kizárás a következő kóddal valósult meg:

.comment_header:not(.admin_comment) {
color: gray;
}

Kompatibilitás tekintetében egész jól állunk a pszeudo-osztályokkal. Az Internet Explorer kivételével minden fontos böngésző támogatja őket. De még őt is rá lehet a legtöbb CSS 3 pszeudo-osztály támogatására egy javascript framework, például a jquery használatával. Az Operának a :target pszeudo-osztállyal gyűlik meg a baja egy kicsit, mert nem frissíti megfelelően a stílusokat a Back és a Forward gombok használatakor. Ezeket leszámítva minden működik, de itt is érvényes az, ami a CSS 3 megoldásokra általában: mivel a szabvány még nem végéleges, ne használjuk olyan dolgokra amelyek működése nélkülözhetetlen a weboldalunkon.

A CSS pszeudo-osztályai olyan nyelvi megoldások, amelyek segítségével külön stílusokat rendelhetünk az elemek egyes állapotaihoz. Legismertebb megnyilvánulása az, amikor egyes weboldalakon egy link fölé visszük az egérkurzort, és ennek hatására annak megváltozik a színe, vagy — ha addig nem volt aláhúzva — megjelenik az aláhúzás esetleg éppen fordítva. Persze ez csak a jéghegy csúcsa, íme az összes példa egy csokorba gyűjtve, alább pedig az egyes pszeudo-osztályok részletesen.

:link A linknek az az állapota, amelyet akkor vesz fel, amikor nincs fölötte a kurzor, és a link még nem lett meglátogatva. Az alábbi beállítással elérhetjük, hogy a linkünk ilyenkor sötétkék legyen.

a:link { color: #0000CC; }

:visited A linknek az az állapota, amelyet akkor vesz fel, amikor a linket már meglátogattuk. Az alábbi beállítással elérhetjük, hogy a linkünk ilyenkor lila legyen.

a:visited { color: #990066; }

:hover Az elem akkor kerül ebbe az állapotba, ha az egérkurzor fölötte áll. Nem csak linkre használható, szinte tetszőleges elemre vonatkozhat. A következő beállítással világoskékre változtathatjuk az egérkurzor alatti bekezdés színét.

p:hover { color: #0099FF; }

:active Az elemnek az az állapota, amikor rákattintottunk, de még nem engedtük fel az egeret. Az alábbi beállítással elérhetjük, hogy bekezdésünk ilyenkor piros legyen.

p:active{ color: #FF0000; }

:focus Az elemnek a fókuszált állapota, amikor az adott elem kapja a billentyűzetről érkező információt. Tipikus példa az input szövegmező, amely a következő beállítással világosszürke alapszínt kap fókuszált állapotban. Ez például egy hosszabb űrlapon segít követni, hogy épp melyik mezőnél tartunk.

input:focus { background-color: #CCCCCC; }

:first-child Ezzel olyan elemeket választhatunk ki, amelyek a szülő elemük első gyermekei. Ha például van egy <div>-ünk, és abban <p> bekezdéseink, akkor a p:first-child alatt megadott beállítások csak az első bekezdésre vonatkoznak majd. Az alábbi beállítás például narancssárgára színezi az első bekezdést.

p:first-child { color: #FF6600; }

:lang(xx) Ezzel a pszeudo-osztállyal nyelv-specifikus beállításokat adhatunk meg. (Az egyes nyelvek kódjai itt érhetők el.) A nyelvet nekünk kell megadnunk a html fájlban (pl. a <p lang="la"> latin nyelvű bekezdést jelöl), a CSS-ben pedig azt adhatjuk meg, hogy a html-ben adott nyelvi szövegként megjelölt rész milyen stílusbeállításokat kapjon. A következő beállítás például kékre színezi a latin nyelvű bekezdéseket.

p:lang("la") { color: #0000FF; }

Végezetül néhány szó a kompatibilitásról. Az Internet Explorer-en kívül más népszerű böngészővel nem lesz gondunk, így a következők csak az IE támogatásról szólnak:

• :link, :visited — IE6
• :hover — IE6 csak linkekre, IE7-től egyéb elemekre is
• :active — IE6, IE7 csak linkekre, IE8 egyéb elemekre is
• :first-child — IE7
• :focus, :lang — IE8

Részletesebb információk a támogatásról itt találhatók.

De aztán helyreállt a világ rendje, kiderült, hogy működik az, csak már nem azt a szintaxist kell használni, mint az alpha verzióban. Az új szintaxis a következő:

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* );
-moz-radial-gradient( [<point> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* );

A lineáris gradiens változóinak magyarázata a következő. A point jelenti a gradiens kezdőpontját. Ugyanazok az értékek elfogadhatóak, mint a background-position esetében. Ha csak egy értéket adunk meg (pl. left), akkor a másik tengely menti értéket center-nek tekinti. Az angle jelenti a gradiens irányszögét. Megadható fokban, gradban vagy radiánban. A stop pedig egy színt jelölt, amelyhez opcionálisan egy helyet is megadhatunk a gradiensen belül, ahol a gradiensnek azt a színt fel kell vennie. Lássunk egy példát is (balra a gradiens, jobbra ugyanaz képként, arra az esetre, ha valaki nem Firefox 3.6-tal nézi):

background: -moz-linear-gradient(top, #000, #FFF);

A körgradiens esetében további változók szorulnak magyarázatra. A point alapértelmezett értéke az objektum középpontja. A shape változó a circle vagy az ellipse értéket veheti fel, ebből az utóbbi az alapértelmezett. A circle választásával kapunk tehát valódi körgradienst, egyébként elipszis alakú lesz. A size változó segítségével beállíthatjuk azt, hogy a gradiens hol érjen véget (meddig terjedjen). A lehetséges értékek a következők:

closest-side

A gradiens a doboz legközelebb eső oldaláig terjed. A closest-side szinonímája a contain.

closest-corner

A gradiens a doboz legközelebb eső sarkáig terjed.

farthest-side

A gradiens a doboz legtávolabb eső oldaláig terjed.

farthest-corner

A gradiens a doboz legtávolabb eső sarkáig terjed. A closest-side szinonímája a cover.

Íme erre is egy példa (balra a gradiens, jobbra a kép, mint fent):

background: -moz-radial-gradient(cover, white, black);

A Firefox a 3.6 verzióval tehát jelentősen ledolgozta a hátrányát a Webkit-es böngészőkkel szemben. Egyetlen kellemetlenség, hogy aki még az alpha verzióhoz optimalizálta a CSS-t, annak újra kell írnia (pl. nekem). Részletesebb információkat a témáról a Mozilla Developer oldalakon találtok (Using gradients, -moz-linear-gradient, -moz-radial-gradient), angol nyelven.

::selection {
background: #FFFF00;
color: #00FF00;
}

::-moz-selection {
background: #FFFF00;
color: #00FF00;
}

Az egyszerűen selection néven futó tulajdonságot a Webkit és a Presto érti, a Gecko számára pedig a -moz-selection tuladonságra van szükségünk. Az eredményt mindenki kipróbálhatja az alábbi szövegen.

A dolog gyakorlati haszna elenyésző, de ha a designt odáig akarjuk finomítani, hogy a kijelölés színét is szeretnénk az oldal színvilágához igazítani, akkor nem teljesen haszontalan. Talán még az is lehet, hogy visszakerül a CSS 3 specifikációi közé.

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;
}

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.

Ez a tulajdonság a word-wrap, amely a hosszú szavak problémáját hivatott megoldani. Segítségével azok a szavak, amelyek hosszabbak, mint amilyen széles az őket tartalmazó entitás, nem lógnak ki, hanem “betördelődnek” a rendelkezésre álló helyre.

Ezt kapjuk word-wrap nélkül, vagy a word-wrap: normal; beállítással:

Ezt pedig akkor, ha a word-wrap: break-word; beállítást használjuk.

Megtörni egy szót az elválasztási szabályok figyelmen kívül hagyásával persze nem szerencsés, de általában még mindig jobb megoldás, mint hagyni, hogy a szépen megtervezett weboldalunkon egy ilyen csúnya sebhely éktelenkedjen, mint amilyet az első változat okoz. Persze mindennek akkor van leginkább értelme, ha a tartalom változik az oldalon – mondjuk fájlból vagy adatbázisból olvasunk be -, így nem tudhatjuk előre, milyen hosszú lesz a leghosszabb szó. De ne felejtsük el, hogy még egy statikus oldalt is “elronthat” a látogató, ha ki vagy be zoom-ol böngészője segítségével, tehát a beállítás még ilyenkor sem teljesen haszontalan.

Az Internet Exploreren kívül támogatja még a Firefox, a Safari és a Chrome, sajnos az Opera nem.