Formázás stílusalapok használatával

Stílusalapok (röviden CSS, azaz Cascading Style Sheets - egymásba ágyazott stíluslapok) segítségével a
webdokumentumok széleskörűen és igen hatékonyan formázhatók. A hagyományos, HTML-alapú formázáshoz
képest, fontos különbség továbbá, hogy a CSS szétválassza a dokumentumok megjelenését a tartalomtól.
Kezdetben a HTML dokumentumok csaknem minden megjelenéshez kapcsolódó része a HTML kódon belül volt: a
betűtípusok, színek, háttér stílusok, elrendezések és méretek külön-külön meg voltak adva minden egyes elemhez,
gyakran ismétlődően. Bármilyen változtatására volt szükség a megjelenésben, azt globálisan nem lehetett
elvégezni - minden elem formázását külön-külön kellett megoldani.
CSS használatával a webfejlesztők a formázásra vonatkozó információkat áthelyezhetik a stíluslapra, mely így, a
lényegesen könnyebb kezelhetőségen túl, egy sokkal egyszerűbb, kevésbé redundáns HTML kódot is
eredményez. CSS-sel mindezek mellett, olyan formázási műveletek is megvalósíthatók, amelyek a hagyományos
HTML attribútumokkal nem, vagy csak körülményesen oldhatók meg.

A CSS használata előtt a webfejlesztők, ha módosítani akarták a h2 elemek színét, betűtípusát, méretét, vagy más jellemzőit, akkor a
HTML font elemét kellett használniuk a címsor minden egyes használatakor. Egy középre igazított, dőltbetűs, vörös, Times New Roman
típusú címsorhoz a következőt kellett használni:

<h2 align="center"><font color="red" size="+4" face="Times New Roman, serif">

<em>A CSS használata</em></font></h2>

A kiegészítő formázás miatt a HTML dokumentum sokkal bonyolultabb lesz, és nehezebb karbantartani is. Ha azt szeretnénk, hogy
minden ilyen címsor ugyanígy jelenjen meg, akkor mindegyikre külön használni kell ezt a kiegészítést.
A CSS használatával a h2 elem csak tartalmi információt hordozhat (a megjelenítendő szöveget), míg a stíluslap megadja a formázási
tulajdonságokat. A fenti kód itt így nézne ki:

<h2>A CSS használata</h2>

Az alábbi stílus pedig definiálja az összes h2 címsor megjelenését a teljes dokumentumban:

h2 {
text-align:center;
color:#ff0000;
font-size:large;
font-family:"Times New Roman", serif;
font-style:italic;
}

CSS általános felépítése

példa:
kijelölő { p {
tulajdonság1:érték1; font-family:arial;
tulajdonság2:érték2; font-weight:bold;
tulajdonság3:érték3; color:#0000ff;
... }
}

CSS típusai

A CSS formázásokat háromféle módon is meg lehet adni:

1. Taghez rendelt stíluslap

CSS kiegészítést a HTML taghez külön-külön is illeszthető. A példában látható h1-es címsor csak az adott helyen
rendelkezik majd 20 pixeles betűnagysággal és 2 pixeles betűtávolsággal.

<h1 style="font-size:20px; letter-spacing:2px;">Bevezetés</h1>

2. Beágyazott stílusalap

Beágyazott CSS esetében a kijelölők a HTML dokumentum HEAD részébe kerülnek

a <style type="text/css"> és a </style> parancsok közé.
<style type="text/css">
p {
font-family:Tahoma;
font-size:14px;
}
a {
text-decoration:none;
color:#ff0000;
}
</style>

A fenti példában a bekezdés (p) és a hivatkozás (a) tag megjelenését változtatja meg a CSS, mégpedig úgy, hogy
a továbbiakban minden bekezdés Tahoma betűtípusú és 14 pixel nagyságú lesz, a hivatkozások pedig nem
lesznek aláhúzva és piros betűvel jelennek meg.

3. Külső stílusalap

A CSS kijelölőket tárolhatjuk külső fájlban is, így a létrehozott formázást több HTML dokumentumban is
alkalmazhatjuk, amennyiben hivatkozunk az adott fájlra. Ebben az esetben természetesen a CSS-ben végrehajtott
változások minden HTML oldalon láthatóak lesznek, mely oldalak erre a fájlra hivatkoznak.
A külső CSS fájl (hasonló képpen a HTML fájlhoz) szövegalapú, elkészítéséhez a legtöbb szövegszerkesztő program használható, csak a
.css típusú fájlmentésre kell ügyelni.

A külső CSS fájl hivatkozást a HTML dokumentum HEAD részébe kell írni - ha egy proba.css-re szeretnénk
hivatkozni, akkor a következő képpen:

<link rel="stylesheet" href="proba.css" type="text/css">

A proba.css fájlban már csak a kijelölőket kell elhelyezni:

p {
font-family:Tahoma;
font-size:14px;
}
a {
text-decoration:none;
color:#ff0000;
}

Az elemhez "legközelebb" lévő formázás fogja meghatározni az elem végső megjelenését. Ezt jelenti, hogy ha egy
elem tulajdonságára több helyen is beállítottunk értéket, akkor a külső CSS-ben lévőt felülírja a belső CSS-ben
lévő, a belső CSS-ben lévőt pedig a taghez rendelt CSS.

Osztályok használata

Ha ugyanazt a megjelenést szeretnénk alkalmazni több helyen, de nem általánosan mindenhol, ajánlott osztályokat
használni. Osztályalapú (class) formázással előre kialakított megjelenést alkalmazhatunk az osztályra való
hivatkozással egy dokumentumon belül több helyen is.
Ha például szeretnénk bizonyos esetekben eltérni az előre megformázott bekezdésektől, azt a következő képpen
is megtehetjük:

p.megjegyzes {
font-size:10px;
font-style:italic;
}
Az osztályokat a stílusalapon egy ponttal és az osztály nevével jelezzük. A fenti beállítások után minden olyan
bekezdés, mai a megjegyzes osztályba lesz besorolva, 10px nagyságú, dőlt betűkkel fog megjelenni. Ebben az
esetben a megjegyzes osztály csak bekezdésekre értelmezhető, ami egyben azt is jelenti, örökli a bekezdésekre
beállított összes formázást.
 Az osztályt így alkalmazhatjuk egy bekezdésre:

<p class="megjegyzes">szöveg</p>
Egy osztályt több tagre is alkalmazhatunk, és egy taghez több osztályt is megadhatunk. Utóbbi esetben az osztályokat szóközzel kell
egymástól elválasztani. <p class="keretes megjegyzes">szöveg</p> azt jelenti, hogy az adott bekezdésre a keretes és a megjegyzes
osztály beállításai is érvényesek lesznek.

Egyedi azonosítók használata

A stíluslapon belül megadhatunk olyan szabályokat, melyek csak egy elemre vonatkoznak. A HTML tagek id
attribútumával egyedi azonosítót, illetve saját megjelenést rendelhetünk a kiválasztott taghez.
Ezt a módszert használjuk az oldalak megjelenésének kialakításához is. A következő beállításokkal ún. tömbszerű
elemet hozhatunk létre, mely tároló eleme lesz a megjelenített tartalomnak.

#container {
width:600px;
height:400px;
border:10px solid #ff0000;
padding:50px;
}

A CSS a kettős kereszt (#) azonosítóval (és egy általunk megadott névvel, itt container) jelzi, hogy a megadott
szabály csak egy adott eleme vonatkozik. A fenti beállítások egy 600×400 pixel tartalomterületű (!) tároló elemet
hoznak létre, ami 10 pixel vastagságú piros szegéllyel, és 50 pixeles belső margóval fog rendelkezni.
Az így létrehozott tároló elemre a dokumentumtörzsben a következő képen lehet hivatkozni:
<body>
<div id="container">

a tárolóelem tartalma

</div>
</body>

Kijelölők gyakoribb tulajdonságai és értékei (további lehetőségek: http://w3schools.com/css/)

betűtípus, betűcsalád
font-family Arial, Helvetica, sans-serif
"Times New Roman", Times, serif

betűméret
font-size 14px vagy 0.875em (viszonyított méret, 16px × 0.875em = 14px)

betűstílus
font-style normal, italic normál, dőlt

betűvastagság
font-weight normal, bold normál, vastag

betűszín
color #ff5500 vagy #f50 színkóddal megadva

szövegigazítás
text-align left, right, center balra zárt, jobbra zárt, középre zárt
justify sorkizárt

bekezdés első sorának behúzása

text-indent 4px de lehet -5px

szavak távolsága
word-spacing 10px de lehet -0.5px
betűk távolsága
letter-spacing 20px de lehet -1px

sorok távolsága
line-height 10px de lehet 1.5px

aláhúzás
text-decoration none, underline nem aláhúzott, aláhúzott

margó
margin-top 10px felső margó A margók esetében
margin-right 3px jobb oldali margó negatív hosszérték is
margin-bottom 10px alsó margó megadható.
margin-left 3px bal oldali margó
vagy
margin 10px 3px 10px 3px felső jobb alsó bal
10px auto az elem felső margója 10px, a többi a
szülőelemtől (pl. böngésző) függő érték.
A példában látható beállítással vízszintesen középre
igazított elrendezést lehet elérni.

belső margó
padding-top 10px felső belső margó
padding-right 3px jobb belső oldali margó
padding-bottom 10px alsó belső margó
padding-left 3px bal belső oldali margó
vagy
padding 10px 3px 10px 3px belső felső jobb alsó bal margó

szegély
border-top 1px solid #00f 1px vastag, egyszerű, kék felső szegély
border-right 5px dotted #fff000 5px vastag, pontozott, sárga jobb szegély
border-bottom ... ... alsó szegély
border-left ... ... bal szegély
vagy
border 1px solid #000 1px vastag, egyszerű, fekete összszegély
border-style none szegélyek eltüntetése

háttérszín
background-color #ff0000 háttérszín

háttérkép
background-image url('hatter.jpg') háttérkép

háttérkép helyzete
background-position left top balra fent
left center balra középen
left bottom balra alul
center ... középen ...
right ... jobbra ...
10px 40px vízszintesen 10px-re, függőlegesen 40px-re

háttérkép ismétlődése
background-repeat repeat háttérkép ismétlődik
repeat-x háttérkép csak vízszintesen ismétlődik
repeat-y háttérkép csak függőlegesen ismétlődik
no-repeat háttérkép nem ismétlődik

ajánlott irodalmak és források: http://www.w3schools.com  http://www.w3.org/  http://weblabor.hu/  http://hu.wikipedia.org/wiki/CSS

Robert W. Sebesta: A World Wide Web programozása (Panem Kiadó, Budapest 2005)
A. Meyer: CSS zsebkönyv (Kiskapu Kft. Kiadó, Budapest 2006)