LINKEK DÍSZÍTÉSE STÍLUSLAPPAL

Először próbáljuk ki, mi történik, ha az a címkére alkalmazunk egy stílust.

Itt beállítottuk, hogy a linkek ne legyenek aláhúzva, és piros színűek legyenek. Ez a stílus az összes linkre hat, függetlenül annak állapotától. Azonban olyan stílust is megadhatunk, ami a link állapotához kötődik.

Az alábbi táblázat a linkekre alkalmazható álosztályokat gyűjti össze. (Az álosztályokkal bővebben ez a fejezetfoglalkozik, de enélkül is könnyű megérteni őket.)

Álosztály neve	Leírás
:link	A még meg nem látogatott linkeket választja ki.
:visited	A már meglátogatott linkeket választja ki.
:hover	Azt a linket választja ki, amelyik felett éppen áll az egér.
:active	Azt linket választja ki, amelyiken állva az egérrel a felhasználó lenyomta az egérgombot, de még nem engedte fel.

A link mind a négy állapotának díszítése.

Nem kötelező mind a négy állapotra külön stílust megadni. Azonban ha megadjuk őket, akkor pontosan a fenti példában látható sorrendben alkalmazzuk őket! Ha nem így teszünk, akkor felülírhatják egymást az egyes állapotok. A következő példában először adtuk meg a :hover tulajdonságot, és utána a többit. Így a :visited álosztály color tulajdonsága felülírta a :hover álosztály color tulajdonságát. Így a már meglátogatott linkek fölé érve nem érvényesül a :hover-nél megadott szín.

BEKEZDÉSEN BELÜLI SZÖVEG KIJELÖLÉSE

Gyakran van szükségünk arra, hogy csak bizonyos szavak, szövegrészeket emeljünk ki, színezzünk át stb. Az ilyen formázandó szövegrészek kijelölésére kell használni a span címkét. Ehhez a címkéhez mindig adjuk meg a classértéket, hiszen így fogjuk tudni később elérni a stíluslapból.

Tulajdonság	Leírás	Lehetséges értékek
color	Szöveg színének megadása.	color-rgb color-hex color-name
Szöveg színének és háttérszínének megadása.
text-align	Szövegigazítás: bal, jobb, közép, sorkizárt.	left right center justify
Szövegek összes lehetséges igazítása.
text-decoration	Aláhúzást, felülhúzást, áthúzást, vagy villogást állít be a szövegre.	none underline overline line-through blink
Szöveg aláhúzása, felülvonása, áthúzása, vagy villogtatása. A villogó szöveget nem kezeli az Internet Explorer.
text-indent	Bekezdés első sorának beljebb kezdése.	length %
Bekezdés első sorainak beljebb kezdése.
line-height	Sorközök megadására szolgál.	normal number length %
Különböző sorközöket állít be a bekezdésre.
letter-spacing	A karakterek közti szóköz nagyságát szabályozza.	normal length
A karakterek közti szóköz nagyságának változatai.
word-spacing	A szavak közti szóköz nagyságát szabályozza.	normal length
A szavak közti szóköz nagyságának változatai.
text-transform	Szöveget kisbetűssé, nagybetűssé, vagy minden szót nagy kezdőbetűssé változtat.	none capitalize uppercase lowercase
Kisbetűs, nagybetűs, szavankénti nagy kezdőbetűs szöveg.
font-family	A használandó betűcsaládról ad prioritásos listát: Ha az első megadott font nem található, akkor próbálkozik a másodikkal és így tovább.	Betűcsalád neve, pl: Arial, "Times New Roman", Verdana; Vagy: általános típus: serif sans-serif cursive fantasy monospace
Példa különböző betűcsaládokra. Példa az általános típusokra.
font-style	Dőlt betűs szöveg megjelenítését teszi lehetővé.	normal italic oblique
Dőlt betűs szöveg. Előfordulhat, hogy semmilyen különbséget nem veszünk észre az italic és az oblique értékek között, mindegyik dőlt betűket eredményez. Talán van olyan betűcsalád, ahol érezhető a különbség. Dőlt betűs szöveghez használjuk az italic értéket!
font-size	Szöveg méretét lehet megadni.	xx-small x-small small medium large x-large xx-large pt px smaller larger % em
A font-size tulajdonság értékéhez csak ezeket az értékeket ajánlott megadni: %, em, smaller, larger. Ugyanis ezek az értékek a szülő elem betűméretéhez képest relatívan adják meg a betűméretet. Ha abszolút értékeket használunk, akkor az Internet Explorer 6 felhasználók nehezen fogják tudni átméretezni a szöveget, mert az IE 6 csak kis skálán engedi változtatni a betűméretet. Továbbá az abszolút betűméret eltérhet a látogató által megszokottól. 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, pt, px. Abszolút fontméretek használata. Itt először a body elemre 300% fontméretet állítottunk be. Azonban ez csak az első bekezdésre van hatással, mert ez a bekezdés örökli a body elem fontméretét. A többi bekezdésre viszont nincs hatással a szülő elem (azaz a body) fontmérete, mert abszolút méreteket használtunk. Relatív fontméretek használata. Ebben a példában a fontméretek a szülő elemhez képest (ami most a body) lettek megadva. A smaller azt jelenti, hogy az elem fontmérete eggyel kisebb legyen, mint a szülő elem fontmérete, a larger pedig azt, hogy eggyel nagyobb. A 2em és a 200% egyaránt azt jelenti, hogy az elem fontmérete legyen kétszerese a szülő elem fontméretének.
font-weight	Szöveg vastagságát adja meg.	normal bold bolder lighter 100 200 300 400 500 600 700 800 900
Szöveg vastagítása. Bár a vastagítás értéke elvileg széles skálán állítható, a böngészők csak a normal vagy a bold értéket veszik figyelembe! Tehát vagy vastagíthatjuk a szöveget, vagy nem csinálunk vele semmit.
font-variant	Kiskapitális szöveg megadása.	normal small-caps
Kiskapitális szöveg megadása. A kiskapitális szöveg olyan szöveg, ami először csupa nagybetűs lesz, aztán az eredetileg is nagybetűk egy kicsivel nagyobb méretűek leszenek, mint a többi nagybetű.
font	Rövidítő tulajdonság az összes eddigi tulajdonság beállításához, a jobb oldali sorrendben.	font-style font-variant font-weight font-size/line-height font-family
A font tulajdonság használata, ötféle meghatározás.

MÉRETEZÉS

Az alábbi tulajdonságok az elemek méretét állítják be.

Tulajdonság	Leírás	Lehetséges értékek
width	Egy elem szélességét adja meg.	auto % px, em
height	Egy elem magasságát adja meg.	auto % px, em
max-width	Egy elem maximális szélességét adja meg.	none % px, em
min-width	Egy elem minimális szélességét adja meg.	% px, em
max-height	Egy elem maximális magasságát adja meg.	none % px, em
min-height	Egy elem minimális magasságát adja meg.	% px, em
Div elemek szélességének és magasságának beállítása. A minimális méretek bemutatása.

POZÍCIONÁLÁS

CSS-ben az elemek helyzetét a position tulajdonsággal tudjuk megadni. Alapértelmezett értéke a static, amikor az elemek a normál helyzetükben jelennek meg.

Tulajdonság	Leírás	Lehetséges értékek
position	Egy elem helyzetét adja meg.	static relative absolute fixed
Elemek megjelenése alapértelmezett helyzetben. A böngésző alapesetben elindul a HTML forráskódban felülről lefelé, és a talált sorrendben jeleníti meg az elemeket. Ez a példa megmutatja, hogyan jelenít meg a böngésző 4 div elemet alapértelmezett pozícionálással. Különböző színű háttereket adtam az elemeknek, hogy a határaik láthatóak legyenek. Ezt a megjelenést a position tulajdonság static értékével is el lehet érni, mert neki ez az alapértelmezett értéke. Elem pozícionálása a normális helyzetéhet képest. Először be kell állítani a position tulajdonság értékét relative-ra. Ezután a top (fent), right (jobb), bottom (lent), left (bal) tulajdonságokkal lehet megadni, hogy az elem mennyivel legyen eltolva a normális helyzetéhez képest. Elem abszolút helyzetmegadása. Abszolút helyzetmegadáskor a position értéke absolute legyen, és ezután is a fenti négy tulajdonsággal tudunk pozícionálni. Az abszolút pozícionálású elemek a (dokumentumfában) legközelebb eső olyan szülő elemhez képest lesznek pozícionálva, amelyikre szintén meg van adva a position tulajdonság MÁS értékkel, mint a static. A felső példában nincs ilyen elem, ezért a body elemhez képest lesznek elhelyezve a div elemek, a bodyelem bal felső sarka a (0;0) pont. Elem abszolút helyzetmegadása a szülő elemhez képest. Az oldal közepén van egy div elemünk, amiben szintén van egy másik div elem. Ha ezt a belső div elemet akarjuk a középső div-hez képest abszolút módon pozícionálni, akkor a külső div-nek egyszerűen adjuk meg a position: relative meghatározást! Elem abszolút helyzetmegadása a szülő elemhez képest 2. Ugyanaz mint előbb, csak kihagytuk a position: relative meghatározást, így a body elemhez képest lett elhelyezve a belső div. Elem fix helyzetmegadása. Ha az absolute tulajdonság értékét fix-re állítjuk, akkor az elem mindig a helyén marad, nem lesz a többi elemmel együtt elgörgetve a gördítősáv használatakor. Ekkor is lehet pozícionálni a top, right, bottom, lefttulajdonságokkal. Az IE 6 és régebbi verziói nem ismerik fel ezt a tulajdonságot. Viszont emlékezzünk arra, hogy háttérképet is tudunk fixen megadni, tehát ha csak képet akarunk így rögzíteni, inkább a backgroundtulajdonságot használjuk. A position: fixed akkor lehet hasznos, ha pl. egy menüt kívánunk úgy megjeleníteni, hogy az mindig látható legyen.
vertical-align	Egy elem függőleges igazítását állítja be. Csak sorbeli elemekre, vagy táblázatcellákra érvényes!	baseline sub super top text-top middle bottom text-bottom length %
Kép függőleges igazítása. A vertical-align tulajdonsággal tudunk például képet a szöveghez igazítani. Táblázatcellák szövegének igazítása. A top, middle, bottom értékek használhatók táblázatok szövegének vízszintes igazításához.

BLOKK-SZINTŰ ELEMEK ÉS SORBELI ELEMEK, ELEMEK MEGJELENÍTÉSE

Léteznek úgynevezett blokk-szintű elemek, és sorbeli elemek. A blokk-szintű elemek egy teljes sort kitöltenek, és nem lehet mellettük alapesetben másik elem, az elem elé és mögé egy sortörés kerül. A sorbeli elemek mellett viszont lehet, de csak egy másik sorbeli elem. A sorbeli elemek mindaddig egy sorban jelennek meg egymás mellett, amíg az adott sorban van hely. Ha már nincs hely az adott sorban, akkor új sorban kezdi el kirakni a böngésző az ilyen elemeket.

A display tulajdonsággal többek között a blokk-szintű és a sorbeli megjelenést is szabályozni tudjuk. Ezenkívül még számos más megjelenést tudnánk vele elérni, csak ezeket az Internet Explorer semelyik verziója nem támogatja, ezért sajnos nem is ajánlott a használatuk.

Tulajdonság	Leírás	Lehetséges értékek
display	Egy elem megjelenítési módját adja meg.	inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption none
Listaelemek egy sorban történő megjelenítése. Ez a példa a display tulajdonság inline értékét mutatja be. Ha a li címkére alkalmazzuk, akkor a listaelemek sorbeli elemként fognak megjelenni, és a kis fekete karika és eltűnik előlük. Űrlapmezők blokk-szintű megjelenítése. Ezzel a módszerrel nagyon egyszerűen ki lehet alakítani az űrlap elrendezését. Táblázat kialakítása div elemekkel és stíluslappal. Ez a példa a display tulajdonság table, table-row és table-cell értékeinek működését szemlélteti. Nem ajánlott használni, mert az Internet Explorer 7- nem ismeri fel.
visibility	Megadja, hogy egy elem látszódjon-e vagy sem.	visible hidden collapse
A visibility: hidden és a display: none közötti különbség. A visibility: hidden meghatározás esetén megmarad az elem által elfoglalt hely, csak nem lesz látható az elem. A display: none meghatározás esetén viszont az elem kirajzolási helye is eltűnik, egyáltalán nem fog teret elfoglalni.
cursor	Beállítja az elem feletti egérmutató alakját.	auto url crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait progress help
Kurzor beállítása. Kurzort egyrészt megadhatunk az előre definiált nevek segítségével. Ennél azonban izgalmasabb, hogy saját kurzort is készíthetünk, ekkor a kurzor URL-jét kell megadnunk. Ebben az esetben több URL-t is felsorolhatunk, de a lista végén mindig álljon ott egy előre definiált kurzornév (a példánkban ez az auto). A böngésző végigmegy ezen a listán, és az általa megjeleníteni képes kurzort fogja mutatni. Az ani kiterjesztést csak az Explorer, míg a cur kiterjesztést a Firefox is kezeli. A Firefox nem kezeli az animált kurzorokat, csak az Explorer.

GÖRDÍTŐSÁV HOZZÁADÁSA EGY ELEMHEZ

Tulajdonság	Leírás	Lehetséges értékek
overflow	Gördítősáv megjelenését állíthatjuk be vele egy olyan elemre, amiben nem fér ki a tartalom.	visible hidden scroll auto
Az overflow: visible meghatározás. Ez az alapértelmezett viselkedés. Ha a tartalom nem fér ki a tárolóelemben, akkor ki fog lógni. Az overflow: hidden meghatározás. A tartalom nem fog kilógni a tárolóelemből, de nem is fog gördítősáv megjelenni, ezért a kilógó szöveget nem tudjuk elolvasni! Az overflow: scroll meghatározás. A tartalom nem fog kilógni, és gördítősávok jelennek meg a tartalom eléréséhez. Az overflow: auto meghatározás. Az előzőhöz képest az a különbség, hogy most csak akkor fog gördítősáv megjelenni, ha szükséges. A scrolltulajdonság használatakor viszont minden esetben megjelenik a gördítősáv. Próbáljuk ki úgy, hogy növeljük és csökkentsük a betűméretet!

A FLOAT ÉS A CLEAR TULAJDONSÁG

Ezt a két tulajdonságot gyakran kell használni, azonban elsőre nem mindig egyértelmű a működésük.

Tulajdonság	Leírás	Lehetséges értékek
float	Egy elemet úsztat jobbra vagy balra.	none left right
clear	Megakadályozza, hogy egy elem bal, jobb, vagy mindkét oldalon legyen egy olyan elem, amire be van állítva a float tulajdonság.	none left right both
Kép szöveggel való körbefuttatása. Ebben az egyszerű példában a képek jobbra vagy balra fognak kiúszni attól függően, hogy milyen értéket adtunk a float tulajdonságnak. Arra figyeljünk, hogy csak olyan elemre vonatkoztathatjuk a float tulajdonságot, aminek be van állítva a szélessége. Ez esetben például a képeknek meg van adva a szélességük. Kép és felirat úsztatása jobbra és balra. Ez hasonló az előző példához, csak itt a div elemre alkalmaztuk a float tulajdonságot. Egyszerre több kép és felirat úsztatása jobbra. Ez a példa a clear tulajdonság használatát mutatja be. Próbáljuk ki, hogy milyen lenne a kinézet a clearhasználata nélkül. Mivel egyidejűleg a float: right és a clear: right tulajdonság is be van állítva minden képre, ezért fognak egy oszlopban megjelenni. A clear nélkül egy sorban jelennének meg. A clear: right letiltja, hogy a képtől jobbra megjelenljen egy másik úsztatott kép. Három oszlopos, fejléccel és lábléccel ellátott elrendezés kialakítása div elemekkel és a float,clear tulajdonságokkal. A float és a clear tulajdonságok kiválóan alkalmasak weboldalak tartalmának elrendezéséhez. Ezzel a témával a következő fejezetben foglalkozunk részletesebben. Hat kép úsztatása balra, három kép után sortöréssel. A trükk abban van, hogy a div elemre alkalmaztuk a clear: both meghatározást. Ha csak sortörést alkalmazunk, akkor a második három kép nem jelenne meg új sorban!