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.

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.

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.

A position tulajdonság négy lehetséges értéket vehet fel. Ezek az absolute, a relative, a static és a fixed. Az alapértelmezés ezek közül a static, amely azt közli a layout motorral, hogy nem kell semmi különöset tenned, csak jelenítsd meg a DOM elemeket érkezési sorrendben.

A relative beállítás segítségével megadhatjuk, hogy az adott elem pozíciója, mennyivel tolódjon el ahhoz képest, ahová static beállítással kerülne. Tehát például a következő beállítással az ind osztályú bekezdések 30 pixellel beljebb kezdőnek, mint azok, amelyekre ezt a szabályt nem alkalmaztuk:

p.ind {
    position: relative;
    left: 30px;
}

A position tulajdonságot absolute értékre állítva nagyobb szabadságot kapunk, ugyanis így elvileg mindent oda tehetünk, ahová akarunk. Ha ezt állítjuk be, akkor a vele együtt alkalmazott left, right, top vagy bottom értékek nem ahhoz képest lesznek kiszámolva, hogy hova került volna az elem eredetileg, hanem abszolút viszonyítási rendszerben értendő. Hogy mi minősül abszolút viszonyítási rendszernek? Az absolute pozicionált elem azon őse a DOM fában, amelyik utoljára relative-nak lett beállítva. Ha nem volt ilyen, akkor a body lesz az.

Azért mondom, hogy elvileg tehetünk oda mindent ahová akarunk, mert ugyebár az egyes felhasználók nagyon különböző felbontású kijelzőkön és böngészőkön olvassák vagy nézegetik a weboldalunkat. Ha valamiért egy adott elem nem tud oda kerülni, ahová az absolute beállítással szántuk – mondjuk azért, mert nincs elég hely -, akkor az egész design széteshet. Hasonló problémákkal szembesülünk akkor is, ha bővül az oldal tartalma. Az összes elem koordinátáját nekünk kell újraszámolnunk, mert innentől kezdve a tartalom nem fog önmagának helyet biztosítani, hanem egyik elemünk rálóg majd a másikra. Tehát bár az elején nagy lehet a kísértés az absolute beállítás mértéktelen használatára, mert kicsiben ezzel a legkönnyebb dolgozni, hosszú távon mégis megéri inkább a többi lehetőség használata. Ugyanis azok sokkal rugalmasabbak, és könnyebben karbantartható weboldalt eredményeznek.

Persze az absolute beállításnak is megvan a létjogosultsága, de hagyjuk meg a speciális eseteknek: én személy szerint oldalanként maximum 1-2 elemet helyezek el így, amelyet másképp nem volna praktikus. Például ezen az oldalon a fejlécben levő My Web logó azért kattintható, mert egy linket absolute módon a tetejére pozicionáltam. Megtehettem, mert az oldal layoutja olyan, hogy a logó mindig ugyanazon a helyen lesz, nem kellett attól tartanom, hogy egyszer csak máshol lesz a link, mint a logó.

Hogy példa is legyen, a következő beállítással a bekezdést kirakjuk jó messzire a többitől:

p.abs {
    position: absolute;
    width: 800px;
    right: 10px;
    bottom: 100px;
}

Végezetül térjünk rá a fixed beállítása, amely segítségével egy elemet “odaragaszthatunk” a viewport egy pontjára, és onnan még az oldal scrollozásának hatására sem tűnik el. Leggyakoribb példaként a sok weboldalon feltűnő “feedback” linket tudnám említeni, ami sokszor van ily módon a képernyő valamelyik szélére illesztve. Vigyázat, az Internet Explorer a fixed beállítást csak a 8-as verziótól támogatja! Beállítása semmivel sem bonyolultabb az eddigieknél, de használata legfeljebb ilyen speciális esetekben indokolt:

img.fix {
    position: fixed;
    right: -6px;
    top: 25%;
}

Ezek voltak tehát a legfontosabbak a position tulajdonságról. Érdemes még megjegyezni, hogy egy jól szerkesztett weboldalon nem mindent pozicionálnak ezzel a módszerrel. Az a legjobb, ha a html struktúra, illetve a CSS-ben használt float beállítások segítségével az alapvető layout a helyére kerül. De azért a position így is nagyon fontos tulajdonság, egyenesen a CSS egyik alapkövének tekinthető.

Minden elem, amit a HTML body tag-ben használunk egy téglalap alakú dobozba kerül a weboldalon. Persze ezt a téglalapot alap esetben nem látjuk, de attól még ott van, és a CSS segítségével mindenféle stílussal ruházhatjuk fel. Készítettem két ábrát, hogy megmutassam, hogyan is kell ezt az egészet elképzelni. Az első képen a doboz “robbantott ábrája” látható, míg a másodikon az, ahogyan a böngészőben végül is megjelenik.

A doboz következő tulajdonságait szabhatjuk testre:

• border: A doboz szegélye. Alapértelmezés szerint nem látszik. Megadhatjuk a vastagságát, a stílusát, a színét, stb.
• background: A doboz háttere. Megadhatunk egy színt és/vagy egy képet, továbbá beállíthatjuk, hogy a kép ismétlődjön-e, ha kisebb, mint a doboz.
• margin: A minimális távolság a doboz széle és a weboldal már elemei között.
• padding: A távolság a doboz széle és belső tartalma között.
• width: A doboz szélessége, padding és margin nélkül.
• height: A doboz magassága, padding és margin nélkül.

Ez pedig itt egy példa, ahol a következő CSS beállításokat alkalmaztam:

div {
    width: 500px;
    border-style: dashed;
    border-width: medium;
    background-color: #CFC;
    background-image: url(box-modell-bg.jpg);
    background-position: center;
    padding: 10px;
}

Persze szinte mindegyik felsorolt tulajdonságról lehetne akár egy külön posztot is írni, ugyanis a gyakorlatban sokszor meggyűlik az ember baja azzal, hogy ezen tulajdonságok beállítása nem a kívánt eredményt hozza. Ez lehet azért, mert a böngésző nem szabványos módon jeleníti meg a tartalmat – erre főleg az IE 6 és a korább verziók hajlamosak -, vagy azért, mert olyan HTML elemre akarjuk alkalmazni a beállítást, amelyre nem lehet. Érdemes sokat gyakorolni, de ajánlanék két remek forrást is a tanuláshoz, amelyeket én is használok. Az egyik egy weboldal, a másik egy könyv:

• www.w3schools.com
• Charles Wyke-Smith: Stylin with CSS

Persze lesz még a CSS alapokról szó ezen a blogon is. És persze kérdezzetek nyugodtan, mert ez csak a jéghegy csúcsa.