A stíluslapok megjelenésével a HTML oldalak kinézetét nagyon pontosan, egységes formában adhatjuk meg. Használatukkal kiküszöbölhetõek az olyan megjelenési problémák, amik akkor léphetnek fel, ha ugyanazt az oldalt egy másik böngészõvel vagy csak ugyanazon böngészõ másik verziójával szeretnénk megtekinteni. Ebben az esetben ugyanis elõfordulhat, hogy látványban valami egészen mást kapunk, mint amit szerettünk volna. Lényegében a stíluslapokkal a HTML-tõl részben független nyelveken adhatunk meg formázási utasításokat, így kiválthatunk hasonló célt szolgáló HTML elemeket. Stíluslapok használatának elõnyei:
A dokumentumon belül is és akár egy külsõ fájlban is elhelyezhetünk stílusinformációkat.
Nyelvfüggetlenség:
A HTML 4 csak a HTML és a stílusinformációk kapcsolatát határozza meg, nem pedig a stílusleíró nyelvet.
Teljesítménynövelés:
Ugyanazon stílust képviselõ HTML oldalak stílusleíró információit tárolhatjuk külsõ fájlban, így a böngészõnek elég csak egyszer letöltenie azt.
Alternatív stílusok:
A HTML oldal készítõjének lehetõsége van arra, hogy egy HTML dokumentumot többféle stílusban is elkészítsen. Ilyenkor a felhasználóra bízza, hogy az elkészült stílusváltozatok közül melyiket választja.
Médiafüggetlenség:
Lehetõség van különbözõ médiákra elõre elkészíteni a stíluslapokat. Ez azt jelenti, hogy a kész HTML oldal rendelkezhet nyomtatóra, képernyõre, esetleg hang alapú böngészõre készült formázási utasításokkal.
A HTML elemeknek különbözõ tulajdonságaik vannak (szín, szélesség, magasság, stb...), amiknek a stíluslapon is külön-külön értékeket adhatunk. A Cascading Style Sheets azaz CSS stílusleíró nyelvnél ennek a formája a következõ.
Elem {tulajdonság: érték}
ahol az elem legyen például a <H1> tag, aminek color tulajdonságát red értékûre állítjuk. Ebben az esetben, ha egy szöveget a <H1> tag-gel jelölünk, akkor az piros színnel fog megjelenni. Több elem ugyanazon tulajdonságát egyszerre, illetve egyetlen helyen leírva is megváltoztathatjuk. Ekkor az adott elemeket vesszõvel elválasztva írjuk a tulajdonság és érték páros elé.
H1,H2,H3,H4 {color: red}
Elõállhat olyan eset is, amikor egy bizonyos tag-gel jelölt szövegnek csak egy részét kellene más tulajdonsággal felruházni. Ilyenkor kijelölünk egy plusz tag-et és ha annak is a hatáskörébe esik a szöveg, akkor a beállítottnak megfelelõen módosulnak a megjelenési tulajdonságai.
H1 EM {color: red}
Tehát ha a <H1> tag-en belül alkalmazzuk az <EM> tag-et is, akkor az <EM> által jelölt szöveg fog pirossal megjelenni, a többi a korábban megadott H1 tulajdonságainak megfelelõen viselkedik.
Ha egy HTML oldalon belül egy HTML tag-hez nem feltétlenül ugyanazt a tulajdonságot szeretnénk végig használni, osztályok definiálásával egy tag-hez több különbözõ tulajdonságot is megadhatunk.
Elem.osztálynév {tulajdonság: érték}
Használata pedig a következõ:
<Elem CLASS="osztálynév">Szöveg</Elem>
Definiálhatunk még osztályokat elemek használata nélkül, általánosan is:
.osztálynév {tulajdonság: érték}
#osztálynév {tulajdonság: érték}
Ezeknek az az elõnye, hogy bármelyik elemhez szabadon felhasználhatóak. Az utóbbi megoldás esetében nem a CLASS paraméterrel hivatkozunk a stílusinformációra, hanem az ID-vel:
<DIV ID="osztálynév">Egy példa</DIV>
Stíluslap leírásokban elhelyezhetõek megjegyzések is, amiket a böngészõk figyelmen kívül hagynak, csak a készítõjének, illetve a felhasználónak nyújthatnak segítséget. Ezt ugyanúgy jelöljük, mint a C programozási nyelvben: /* megjegyzés */
Mint már a fentiekben kiderült, stílusinformációkat a dokumentumon belül is és a dokumentumon kívül, egy külön fájlban is megadhatunk. A dokumentumon belül használt stílusleírásnak módja a következõ: a <STYLE>...</STYLE> tag-ek között a HTML oldal fejlécében helyezzük el a formázó utasításokat. A stílusleíró nyelv típusát a STYLE paramétereként kell megadni. Ha figyelembe vesszük azt, hogy a régebbi típusú böngészõk némelyike nem tudja kezelni a stíluslapokat, akkor azok elõl el kell rejteni ezeket az információkat. Az elrejteni kívánt utasításokat úgynevezett komment jelek közé helyezzük el, így azok a böngészõk, amelyek tudják kezelni a stílusinformációkat, használni fogják azt. Amelyek nem tudják kezelni, azok figyelmen kívül hagyják az ott elhelyezett utasításokat. Egy, a fejlécben elhelyezett stíluslap információ formája CSS leírónyelv használata esetén az alábbi:
<STYLE type="text/css">
<!--
H1 {background-color: red;}
-->
</STYLE>
Abban az esetben, amikor az oldalra vonatkozó stílusinformációkat egy külsõ fájlban tároljuk, a HTML dokumentum fejlécében egy LINK elemmel hivatkozhatunk az adott leíró kódot tartalmazó fájlra.
Például:
<LINK href="css_fájl_neve" rel="STYLESHEET" type="text/css" title="cím">
<STYLE type="text/css">
</STYLE>
A HREF paraméter értéke a formázó utasításokat tartalmazó fájl elérési útja és neve. A REL paraméter a hivatkozás típusára vonatkozik, ami STYLESHEET és ALTERNATE STYLESHEET értékeket vehet fel. A TYPE a beillesztendõ stíluslap nyelve. A TITLE paraméterrel pedig egy-egy stílusbeállításnak adhatunk címet. Jelentõsége a választható stíluslapok használatánál van.
A stíluslapok használatából egyenesen adódik a kérdés, hogy ugyanarra a tag-re megadott egymástól eltérõ stílusinformációk közül melyik jut érvényre. Például: a <DIV> tag-re a fejlécben megadott paraméterek a mérvadóak vagy pedig az ID-vel megadottak? A böngészõ az oldal megjelenítésekor a következõ szabályokat alkalmazza:
A STYLE paraméterrel megadott jellemzõk felülbírálják az általánosabb beállításokat.
Két azonos súlyú beállítás közül mindig a HTML szövegben késõbb szereplõ jut érvényre. Kivételt képez az !important jelzõ használata. Ez a jelzõ emeli az adott stílusdefiníció precedenciáját.
A HTML oldal szerzõjének a beállításai felülbírálják a felhasználó beállításait.
Az osztályokkal egy bizonyos elemre megadott információk erõsebbek, mint az elem általános beállításai.
Az ID-vel megadott paraméterek felülbírálják az összes addigi beállítást.
A stíluslapokon megadott tulajdonságoknak értékeket kell adni. Ezek az értékek lehetnek kulcsszavak, karakterláncok, hosszúságértékek és színeket meghatározó kódok. A használható kulcsszavakat a CSS definíciója határozza meg. A karakterláncok általában URL-ek. Hosszúságértékeket kétféle képpen adhatunk meg: abszolút módon konkrét számérték és a hozzátartozó mértékegység megadásával, illetve relatíven a böngészõablak százalékos értékében. A CSS által támogatott hosszmértékegységek a következõek:
Mm milliméter
cm centiméter
in incs
pt tipográfiai pont (1/72 incs)
pc tipográfiai pica-pont (12 pont)
em az aktuális font mérete (kb. az M betû magassága)
en az aktuális font kisbetûinek mérete (kb. az x magassága)
px pixel, az aktuális mejelenítõ eszköz pontmérete
A hosszméretekhez hasonlóan a színek megadása is többféle módon történhet, a színek nevével vagy pedig a színösszetevõk meghatározásával. A CSS a HTML-hez hasonlóan 16 elõre definiált színt ismer. Ezek a színek a következõek: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white és a yellow.
Használhatjuk ezenkívül az RGB kódolás szerinti meghatározást is, ami azt jelenti, hogy a kívánt színben fellelhetõ piros, zöld és kék színek mennyiségét számokkal határozzuk meg. Ezek az értékszámok lehetnek hexadecimálisak és decimálisak is. Megadásuk az alábbi módon történhet:
color: #F00 alapszínekkel 16 lépcsõben
color: #FF0000 alapszínekkel 256 lépcsõben
color: rgb (256,0,0) decimálisan
color: rgb (100%,0%,0%) százalékosan
color: red elõre definiált névvel
A stíluslapokon tulajdonságként URL-ek is elõfordulhatnak, amiket kétféle módon adhatunk meg:
url (URL)
"URL"
A HTML oldalainkon elhelyezett elemek mindegyike helyet foglal el az adott oldalon. Ez a hely a tartalom által elfoglalt helybõl, a tartalom és az azt befoglaló keret közötti helybõl (padding), a keret szélességébõl (border) és a kereten kívül hagyott üres helybõl (margin) áll. Ezeket a helyeket a tartalom körül rendre külön-külön is állíthatjuk, mindegyikhez csak a megfelelõ top, left, right vagy bottom jelzést, jelzéseket kell elhelyezni.
A width és a height paraméterekkel a tartalom részére fenntartott helyet állíthatjuk a kívánt méretûre. Ha ezeknek az értéke nem auto, akkor a megjelenítendõ szöveg a paramétereknek megfelelõen változik.
A padding-left, padding-right, padding-top és padding-bottom az elem tartalma és az azt körülvevõ keret közötti távolságot határozza meg. Minden oldalnak külön-külön adhatunk meg értéket, de ha a padding-et magában használjuk, akkor minden oldal ugyanazt az értéket veszi fel. Lehetõség van egy harmadik féle megadási mód használatára is. Abban az esetben, ha nem akarjuk kiírni a top, right, bottom, left paramétereket és mégis különbözõ értéket szeretnénk az oldalaknak adni, akkor elegendõ a beállítani kívánt méreteket a felsõvel kezdõdõen, az óramutató járásával megegyezõ irányban és szünettel elválasztva megadni.
P {padding-top: 1cm
padding-right: 2cm
padding-bottom: 3cm
padding-left: 4cm
}
vagy rövidebben:
P {padding: 1cm 2cm 3cm 4cm}
Ez a rövid megadási módszer minden olyan elemnél alkalmazható, amelynél lehetõség van az oldalakra különbözõ értékeket beállítani.
A használt keret vastagságát a border-width illetve a border-oldal-width paraméterrel határozhatjuk meg. Háromféle elõre meghatározott értéket kaphat. Ezek a thin, medium, thick lehetnek, illetve ezeken felül bármilyen hosszúságértékeket választhatunk.
A keret színét a border-color-ral állíthatjuk be akár minden oldalra külön is.
A border-style segítségével a szöveget körbevevõ keret stílusát változtathatjuk meg. A border-style paraméter a következõ értékeket veheti fel:
none: nincs keret
dotted: pontozott keret
dashed: szaggatott keret
solid: normál vonal
double: dupla vonal
groove: 3D keret, várárok szerû
ridge: 3D keret, sánc szerû
inset: 3D keret, a tartalom kiemelkedik
outset: 3D keret, a tartalom besüpped
A margin és a margin-oldalak segítségével a keret körüli margó szélességét határozzuk meg. Ennek az értéknek az alapértelmezése nem nulla, hanem egy kicsi szám.
HTML-ben sok problémát okozott az elemek pontos elhelyezése egy lapon, mert az erre vonatkozó utasítások nem léteznek. Így a stílulapok megjelenéséig, illetve elterjedéséig különféle trükköket kellett használnia a HTML oldalt készítõ személyeknek. Ezen trükkök egyike a <SPACER> tag és például a speciális karakter, ami egy üres helyet hoz létre az elkészült oldalon. Ezeket a szüneteket lehet egymás után is halmozni, ellenben a sima szünetjeleket (space) nem, mert az utóbbit böngészõk figyelmen kívül hagyják és csak egyet jelenítenek meg belõlük. Az így kialakított lapok bonyolult, áttekinthetetlen szerkezetûekké válhatnak és csak bizonyos feltételek mellett élvezhetõek az elkészült dokumentumok. Stíluslapok segítségével viszont nagyon pontosan meghatározhatjuk egy-egy elem helyét. A CSS-ben négyféle módon végezhetjük el ezeket a beállításokat, ezek közül hármat már a böngészõk is ismernek. A három féle mód közül a position kulcsszó megfelelõ értékûre állításával választhatjuk ki a nekünk legjobban megfelelõt.
static: azon a helyen jelenik meg, ahol egyébként is megjelenne.
relative: relatív pozícionálás, az elem pozícióját az elem eredeti helyéhez viszonyítva adjuk meg.
absolute: abszolút pozícionálás, az elem koordinátáit az oldalhoz viszonyítva adjuk meg.
Egy-egy rövid példa a relatív, majd az abszolút pozícionálásra:
<STYLE>
.pozicio1 {position: relative ;}
</STYLE>
<BODY>
az eredeti helyén levõ szöveg
<DIV CLASS="pozicio1" STYLE="left:1cm">
egy centivel jobbra tolt szöveg
</DIV>
</BODY>
<STYLE>
.pozicio2 {position: absolute ;}
</STYLE>
<BODY>
az eredeti helyén levõ szöveg
<DIV CLASS="pozicio2" STYLE="left:3cm">
három cm-rel a lap bal szélétõl
</DIV>
</BODY>
A relatív pozícionálást alkalmazva az eltolt elemek eredeti helyén minden esetben üres téglalap jelenik meg, ellenben az abszolút pozícionálással, ahol az üres téglalap nem jelenik meg. Az eltolt elemek eltakarják a helyükön maradt elemek azon részét, ami az eltolás hatására alájuk került.
A height és width paraméterekkel abszolút pozícionálás esetén az eltolt elemek megjelenési területének a nagyságát adhatjuk meg. Ha ezekkel a magasság és szélesség méretekkel megadott hely a megjelenítendõ elemnek nem lenne elég nagy, akkor a böngészõ az owerflow értéknek megfelelõen cselekszik.
A stíluslapok segítségével a HTML oldalon megjelenõ minden elemnek különbözõ színt, illetve háttérszínt definiálhatunk. Ez a HTML <BODY> tag BACKGROUND és BGCOLOR paraméterének, valamint néhány elem COLOR paraméterének a leegyszerûsítése. Az elemeknek a background-color kulcsszó megfelelõ értékûre állításával jelölhetünk ki háttérszínt. Ennek az értéke lehet egy szín, illetve a transzparent elõre definiált szimbólum, amelynek hatására az elem háttere átlátszó lesz. Az elemek elõtérszínét a color paraméterrel adhatjuk meg ugyanolyan módon, mint a háttérszínnél. Az elemek hátterének nemcsak színeket adhatunk meg, hanem tetszõleges háttérmintát is. Ezt a <BODY> tag BACKGROUND paraméterének megfelelõ background-image kódszó használatával érhetjük el.
FONT {background-image:
url (file://c:/dokumentumok/hatter.gif)}
Ha a háttérminta elég kicsi, illetve a dekorálni kívánt elem foglal el viszonylag nagy helyet, akkor a background-repeat kulcsszó használatával megismételhetjük a mintát és így teljesen kitölti a rendelkezésre álló helyet. A background-repeat négyféle értéket vehet fel:
repeat: a minta vízszintes és függõleges irányban is ismétlõdik
repeat-x: a minta csak vízszintesen ismétlõdik
repeat-y: a minta csak függõlegesen ismétlõdik
no-repeat: a minta nem ismétlõdik
A backgroung-attachment kódszóval megadható, hogy az oldal görgetésekor a megadott háttérgrafika az oldallal együtt gördüljön-e vagy maradjon az eredeti helyén. Ennek megfelelõen a scroll vagy a fixed értékek valamelyikét állíthatjuk be.
A háttérgrafikákat a böngészõk alapesetben az oldal bal felsõ sarkában kezdik el megjeleníteni. Ezt az oldal készítõje a background-position kulcsszóval háromféle módon befolyásolhatja. Az egyik, hogy két hosszértéket ad meg, amelyek az ablak oldalától és tetejétõl mért távolságot határozzák meg. Továbbá ezt a két hosszúságot helyettesítheti százalékosan megadott számokkal, vagy harmadik lehetõségnek elõre definiált szimbólikus értékeket használhat. Ezek a szimbólumok center, left, top, right és bottom lehetnek.
A weboldalak szerkesztésekor annak tartalmán kívül a megjelenítésre szánt betûk típusa is nagyon fontos. Egy rosszul megválasztott vagy nagyon extra betûtípus tönkreteheti a fáradtságos munkával elkészített weblapot. Ha csak azt vesszük figyelembe, hogy egy nekünk tetszõ, esetleg általunk kreált betûtípus nagyon szépen mutat az oldalunkon, ez önmagában kevés. Elõfordulhat ugyanis, hogy egy másik felhasználó gépén nem található meg ugyanaz a betûtípus és ez nála teljesen tönkreteheti a látványt. Ezért a megfelelõ betûtípus kiválasztása a HTML-ben nem a konkrét típus meghatározásával történik, hanem úgynevezett fontcsaládok-at vezettek be és ezek közül lehet választani. Egy fontcsaládba a tipográfiailag és elnevezésükben is hasonló fontok kerülnek. Ezek általában gond nélkül helyettesíthetõek egymással. A CSS-ben a font-family kulcsszóval, vesszõvel elválasztva adhatjuk meg a fontcsaládokat. A felhasználó böngészõje a kulcsszó után megadott értékeket sorra veszi és ha nem talál a gépen ennek megfelelõ betûtípust, akkor a lista további elemeit veszi szemügyre.
P {font-family: "ariel, geneva, helvetia"}
Ezen három család elemei körülbelül ugyanolyan típusú betûket takarnak, így szinte biztos, hogy a felhasználó gépén is van telepítve közülük legalább egy . A CSS viszont felkészült minden eshetõségre és élõre definiált öt olyan általános betûfajtát, aminek minden számítógépen meg kell feleljen legalább egy konkrét betûtípus. Ezek a következõek:
serif: Talpas betû. A serifek a betûk vonalai végén található kicsiny talpak. Folyószöveg írására tökéletesen alkalmas, mert a sor alapvonalán a talpak szinte vezetik a szemet.
sans-serif: Talpatlan betû. Általában rövid feliratok készítéséhez használják.
cursive: Dõlt betûk.
fantasy: Kalligrafikus betûk.
monospace: Írógép betûk, minden betû egyforma szélességû helyet foglal el.
A betûtípusokon túl még számos paraméterét állíthatjuk a szöveg karaktereinek. Ilyenek a betûstílus, betûvastagság, betûméret, sortávolság és a fontvariáns. Ezek sorban az alábbi értékeket vehetik fel:
font-style
normal: normál betû
italic: dõlt betû
oblique: egy vonallal megrajzolt betû
font-weight
normal: normál széles
bold: kövér
100, 200, 300,...,900: Ezekkel a számértékekkel finoman szabályozható a betûvastagság. A normal-nak a 400-as, a bold-nak a 700-as felel meg.
lighter: A környezõ betûkhöz képest véknyabb betû.
bolder: A környezõ betûkhöz képest vastagabb betû.
font-size
Hoszúságérték megadásával.
Százalékos értékkel, ami azt jelenti, hogy a környezõ betûkhöz viszonyítva adjuk meg a százalékos értéket.
Ez egy <SPAN STYLE="font-size: 200%">rövid</SPAN> példa.
Szimbólikus értékekkel: xx-small, x-small, small, medium, large, x-large, xx-large.
Környezõ betûk nagyságához viszonyítva: nagyobb (larger), illetve kisebb (smaller).
line-height: két egymás alatti sor alapvonalának távolsága.
normal
Pozitív numerikus érték lehet. A sortávolság az aktuális fontméret ennyiszerese lesz.
Százalékosan. A sortávolság az aktuális fontméret ennyi százaléka lesz.
Hosszúságérték megadásával.
font-variant
normal: Nincs hatása
small-caps: Kiskapitális írásmód
<DIV STYLE="font-variant: small-caps">Kiskapitális</DIV>
A dokumentum szövegének a szavait a szövegsorhoz viszonyítva függõlegesen is igazíthatjuk. Ezt a vertical-align kulcsszó értékeinek megfelelõre állításával érhetjük el.
baseline: A szöveg alapvonalát az azt tartalmazó szöveg alapvonalához igazítja.
top: A szöveg tetejét a sor tetejéhez igazítja.
text-top: A szöveg tetejét az azt tartalmazó szöveg tetejéhez igazítja.
middle: A szöveg közepét az azt tartalmazó szöveg közepéhez igazítja.
text-bottom: A szöveg alját az azt tartalmazó szöveg aljához igazítja.
bottom: A szöveg alját a sor aljához igazítja.
sub: alsó index.
super: felsõ index
Az ily módon definiált értékeken túl a függõleges igazítást, azaz függõleges irányba történõ eltolást megadhatjuk százalékosan is. Ez a százalékos érték az éppen aktuális sortávolság line-height százalékos hányada, ami annak megfelelõen, hogy pozitív vagy negatív, a szöveget fölfelé vagy lefelé csúsztatja el.
A kiírandó szöveget a laphoz viszonyítva vízszintesen a text-align kódszó left(balra), right(jobbra), center(középre) és justify(sorkizártra) értékeivel igazíthatjuk.
A böngészõben megjelenõ, képernyõre optimalizált oldalak nagyon mutatósak lehetnek mindaddig, amíg ki nem akarjuk nyomtatni azokat, mert a képernyõrõl olvasás rontja a szemet, fárasztó vagy csak egyszerûen nem szeretünk monitorról olvasni. Ebbõl az oldalkonverzióból adódó problémák (mint például az, hogy a képernyõre tervezett oldalak túl szélesek az A4-es lapokhoz és ebbõl adódóan a képek lelógnak a lapokról) kiküszöbölésére használhatunk bizonyos kulcsszavakat, amik befolyásolják a HTML oldalak kinyomtatott képét. Ezek közül az elsõ kettõ az oldaltörésre vonatkozik. A page-break-before és a page-break-after kulcsszavakkal azt meghatározhatjuk, hogy az elemek elõtt vagy mögött legyen-e oldaltörés. A fenti kulcsszavak a következõ értékeket vehetik fel:
auto: Oldaltörés bárhol, ahol szükség van rá.
always: Az elem elõtt vagy után kötelezõ oldaltörés.
left: Egy vagy két oldaltörés, aminek az az eredménye, hogy a megjelenítés a következõ bal oldal tetején folytatódik.
right: Egy vagy két oldaltörés, aminek az az eredménye, hogy a megjelenítés a következõ jobb oldal tetején folytatódik.
avoid: A blokkon belül lehetõség szerint kerülni kell az oldaltörést.
Ezen két paraméteren felül még a nyomtatandó oldalak margóját is beállíthatjuk a margin-left, margin-right, margin-top és margin-bottom kulcsszavak értékeivel. Ezeket a kulcsszavakat a CSS által bevezetett pszeudóelemmel, a @page elemmel együtt használhatjuk.
@page {margin-right: 2cm}A size kulcsszóval az oldal méretét, illetve orientációját is megadhatjuk. Értékei a következõek lehetnek:
portrait: Álló oldal.
landscape: Fekvõ oldal.
auto: Az elõre definiált alapérték jut érvényre.
Egy vagy két hosszúságérték, ami vagy amik az oldal abszolút magasságát, illetve abszolút szélességét jelentik.
A marks kulcsszó segítségével a nyomdai munkálatok segítésére alkalmas (crop) vágójeleket és (cross) illesztõjeleket helyezhetünk el a nyomtatandó területek szélein.