A HTML jellnyelvben a megjelentend tartalomba cmkket (angolul tag=cmke) helyeznk el, melyek megszabjk, hogy a bngszk hogyan rtelmezzk a megjellt tartalmi rszeket.
A cmkket a < s > jelek kz kell zrnunk. Egy-egy utasts hatst (nhny kivteltl eltekintve) a zr utastsprja sznteti meg (</>). A HTML utasts a szabvny szerint lehet kisbets s nagybets is, de csupa kisbett clszer hasznlni.
A cmknek lehetnek jellemzi ( attribute=jellegzetes tulajdonsg ) s a jellemzknek rtkei ( value=rtk ):
<cmke jellemz=rtk> tartalom </cmke>
2. A HTML oldal szerkezete
Minden HTML oldal 3 f rszbl ll: a) dokumentumtpus meghatrozs b) fej c) trzs
a) A dokumentumtpus meghatrozs:
A HTML kdot az alkalmazand dokumentumtpus (DOCTYPE, vagy DTD) megadsval kezdjk. Ezzel informljuk a bngszprogramot, hogy milyen szabvny szerint ksztettk a dokumentumot, hogy az megfelel mdon tudja megjelenteni. Ha elhagyjuk a dokumentumtpus megadst azzal azt kockztatjuk, hogy az oldal nem jelenik meg megfelelen a bngszben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Cm</title> </head> <body> Trzs </body> </html>
b) A fej (head=fej) az adott HTML-fjlra vonatkoz meta-adatokat tartalmazza. A metaadatok a fjlal kapcsolatos klnfle jellemzk s utastsok trolsra szolglnak. Nhny meta- adatnak sajt cmkje van ( pl. title=cm, link=kapocs, style=stlus ) a tbbiek a meta cmke jellemzjeknt adhatk meg
Karakterkszlet megadsa (charset): Ahhoz, hogy a weblapunk a bngszkben karakterhelyesen jelenjenek meg, meg kell adnunk, hogy annak szerkesztsekor milyen karakterkdolst hasznltunk. Az ISO 8859-2 a kzp-kelet eurpai, gy a magyar karakterkszletet is definilja.
Unicode a klnbz rsrendszerek egysges kdolst s hasznlatt ler nemzetkzi szabvny.
A cm tartalmazhat magyar kezetes szavakat. A tartalmat jl kifejez cm segti a keresk helyes tallatt. A cm a bngsz cmsorban, ill. a keresk tallatainak felsorolsban jelenik meg.
A HTML elemeket ltalnosan kt nagy kategrira bonthatjuk, amelyek megfelelnek az elem ltal megjelentett tartalom s struktra tpusainak ezek a blokk szint s az inline elemek.
A blokk szint (block level) elem egy felsbb szint elemet jelent, amely ltalban a dokumentum struktrjt jelzi. Ezek olyan elemek, amelyek egy j sort kezdenek, vagy elvlasztanak valamit a korbbi tartalomtl. A leggyakoribb blokk szint elemek a bekezdsek (paragrafusok), listaelemek s tblzatok. Az inline (azaz soron belli) elemek ezzel szemben azok az elemek, amelyeket a blokk szint elemek tartalmaznak, s csak a dokumentum kis rszeit fogjk kzre, nem teljes bekezdseket vagy csoportokat. Egy inline elem nem fog j sort generlni a dokumentumban. Ezek azok az elemek, amelyek egy bekezds szvegn bell tallhatak. A leggyakoribb inline elemek a hiperhivatkozsok, a kiemelt szavak vagy mondatok s a rvid idzetek.
a) Bekezds (paragraph) <p></p>
A <p> tag segtsgvel a szveget bekezdsekre oszthatjuk. Az adott bekezds tartalmt a <p> s </p> elemek kz kell tenni.
Plda: <p>Ez alaprtelmezett (balra igaztott) bekezds.</p> <p>Ez pedig egy jabb bekezds </p>
A bngszk a bekezdseket is blokkszint elemknt kezelik, azaz kln sorban kezddnek s az utnuk kvetkez elem automatikusan j sorba kerl. Szvegbehzs nincsen, kt
5
bekezds kztt egy res sort hagy a bngsz.
b) Sortrs <br> vagy <br/>
Amennyiben a szvegen bell egy sortrst szeretnnk elhelyezni, a <br> elemet kell hasznlnunk. Ez is egy olyan tag, amelynek nincs zr prja.
Plda:
Ez az els sor<br>Ez pedig a msodik
c) Cmsor (heading) <h1></h1>, stb.
A cmsorok (heading) az oldalak logikai felosztst teszik lehetv. Pldul h1 az oldal cme, h2 egy alcm, h3 egy mlyebb szint alcm s gy tovbb. A HTML oldalak esetn 6 cmsort hasznlhatunk.
Egy cmsor a HTML szerint blokkszint elem, azaz kln sorban kezddik s az utna kvetkez elem automatikusan j sorba kerl. A bngszk alaprtelmezett belltsa szerint flkvr betvel van szedve, a betmret a h1-nl a legnagyobb, majd a szm nvekedsvel ( h2, h3, ) egyre kisebb. Az ettl eltr megjelentst CSS-el kell ltrehozni.
d) Vzszintes vonal (horizontal line) <hr>
A dokumentum tovbbi tagolst teszi lehetv.
Plda:
Ez az els sor<hr>Ez pedig a msodik
e) Megjegyzsek a kdban
6
A megjegyzs cmke <!--.--> ltal befoglalt rsz a forrskdban benne marad, de a bngsz nem jelenti meg, nem veszi figyelembe.
Plda:
<!-- Ez itt egy szveg, amely nem jelenik meg a bngszben-->
Msik alkalmazsa a megjegyzsnek, ha ideiglenesen ki akarunk hagyni rszeket a kdolsbl. A megjegyzs cmkben foglalt rsz gy olyan, mintha ott sem lenne, de nem kell trlni, s brmikor ismt felhasznlhat vagy ismt figyelmen kvl hagyhat, ha a megjegyzst kivesszk a kdolsbl vagy jbl berjuk.
4. Listk hasznlata <ol><ul><li>
A HTML nyelv lehetsget ad arra, hogy klnbz listkat (felsorols, sorszmozott, meghatrozs) hozzunk ltre.
a) Egyszer felsorolslista (unordered list) <ul></ul>
Egyszer felsorols esetn az <ul> s </ul> tagek kz kell elhelyeznnk a listaelemeket, amelyeket az <li> (list item) cmkk vezetnek.
Eredmny: 1. Els 2. Msodik 3. Harmadik A rendezett listkat tbbfle szmozssal s alfabetikus rendszerrel is jellhetjk. Az alaprtelmezett jells a bngszkben a decimlis szmozs, de tovbbi lehetsgek is vannak: Betk o ASCII kisbetk (a, b, c) o ASCII nagybetk (A, B, C). o Klasszikus kis grg betk: (?, , ?) Szmok o Decimlis szmok (1, 2, 3) o Decimlis szmok nullval kiegsztve (01, 02, 03) o Kisbets rmai szmok (i, ii, iii) o Nagybets rmai szmok (I, II, III) o Tradicionlis grz szmozs (an, ban, gan) o Tradicionlis rmny szmozs (mek, yerku, yerek) A lista stlust ebben az esetben is CSS-sel vltoztathatod meg, ha szksges. Listk egymsba is gyazhatk, pl. az egyes listaelemekbe jabb al-listkat helyezhetnk. Szmozott s szmozatlan listk is egymsba foglalhatk. Plda: <ol> <li>kenyr <ol> <li>fehr kenyr</li> <li>barna kenyr</li> </ol> </li> <li>tej <ol>
c) Meghatrozs (vagy defincis) lista (definition list) <dl><dt><dd>
Meghatrozs lista esetn az <dl> s </dl> tagek kz kell elhelyeznnk a listaelemeket, amelyek a fogalom megadsbl (<dt> tag vezeti be) s a magyarzatbl (<dd> tag vezeti be) llnak.
Egy egyszer defincis lista a kifejezsekkel s a defincikkal gy nz ki: <dl> <dt>Kifejezs</dt> <dd>A kifejezs defincija</dd> <dt>Kifejezs</dt> <dd>A kifejezs defincija</dd> <dt>Kifejezs</dt> <dd>A kifejezs defincija</dd> </dl>
Ez a kvetkezkppen jelenik meg: Kifejezs A kifejezs defincija Kifejezs A kifejezs defincija Kifejezs A kifejezs defincija
5. Tblzatok hasznlata <table></table>
9
Hossz idn keresztl a tblzatok a weboldalak formzsnak egyik f eszkzei voltak, de ennek az idnek a CSS elterjedse vget vetett.
Tblzatokat a <table> tag segtsgvel lehet ltrehozni. A vzszintes sorokat egyenknt a <tr></tr> pros cmke (table row), a cellkban lv adatokat egyenknt a <td></td> (table data), pros cmke definilja. A tbla celli szveget, kpet, bekezdst, listt, rlapokat, jabb tblzatokat is tartalmazhatnak.
Plda:
<table border="1"> <tr> <td>1. sor, 1. cella</td> <td>1. sor, 2. cella </td> </tr> <tr> <td>2. sor, 1. cella </td> <td>2. sor, 2. cella </td> </tr> </table>
Eredmny:
Fontosabb ms tbla elemek: o <th> - ez az elem jelli a tblzat oszlopainak a fejlct o <caption> - ezzel az elemmel adhatsz egy cmet a tblzat adatainak
Plda:
<table border="1"> <caption>Ez egy tblzat</caption> <tr> <th>1.Fejlc</th> <th>2.Fejlc </th> </tr> <tr> <td>1. sor, 1. cella</td> <td>1. sor, 2. cella </td>
10
</tr> <tr> <td>2. sor, 1. cella </td> <td>2. sor, 2. cella </td> </tr> </table>
Eredmny:
Cellk egyestse a colspan s rowspan attribtumok segtsgvel:
A hiperhivatkozsokkal (rviden link) hozhatunk ltre kapcsolatot a klnbz oldalak (objektumok) kztt. A bngszk a linkeket ltalban alhzssal, illetve eltr sznnel jellik. Oldalon belli hivatkozsokat is ltrehozhatunk, az ott elhelyezett "knyvjelzre".
Az <a> (anchor = horgony) cmke paramterei: o href webcm (URL), itt kell megadnunk a hivatkozs webcmt. o Szintaxis: <a href="url">Szveg, kp</a> o target A clkeret neve, ahova az oldalt be akarjuk tlteni. o rtkei: _blank, _self, _top, _parent o name nevet adhatunk a hivatkozsnak, gy egy "knyvjelzt" hozhatunk ltre. o Szintaxis: <a name="cimke">Szveg</a> o Hivatkozs szintaxisa egy knyvjelzre: <a href="#cimke">Szveg</a>
b) Azonos webhelyen belli msik weblapra hivatkozs esetn:
<a href=fajlnev.html>szveg s/vagy kp</a>
Alaprtelmezetten a hivatkozott weboldal tetejre trtnik az ugrs.
c) Ha az oldalon bellre, egy kivlasztott rszhez kvnunk ugrani, akkor a kivlasztott rszhez egy nvvel elltott horgonyt ( name jellemzvel elltott a cmkt ) kell kdolni:
<a name="elol">Szveg</a> <a href="#elol"> Ugrs az oldal elejre</a>
7. Kpek beillesztse a weboldalra
llkpet az <img> tag segtsgvel helyezhetnk el az oldalon. Hasznlhat kpformtumok: GIF, JPG, PNG. A kp inline elem (elhelyezkedse folyamatosan, az eltte lv elemet kveten trtnik, ill. a kvetkez elem folytatlagosan kveti), alaprtelmezetten
13
nincsen kerete. Ha HTML-ben nllan kvnjuk pozcionlni, akkor vagy j paragrafus elembe, vagy egyb trol elembe kell helyezni.
Az <img> tag fontosabb paramterei: o src - itt adhatjuk meg a kp webcmt (ktelez jellemz) o alt - kpet helyettest szveges informci. Csak akkor ltszdik, ha a kp nem jelenik meg ( nem tltdik le, nem rhet el, stb. ), o width - a kp szlessge kppontokban o height - a kp magassga kppontokban.
Pldk:
<p>Ez a kp <img src="logo.jpg"/> a Sapientia logoja.</p> <p>Ez a kp <img src="logo2.jpg" alt=Sapientia logo/> a Sapientia logoja.</p> <p>Ez a kp <img src="logo.jpg" height="50px"/> a Sapientia logoja.</p>
8. Logikai (Tartalmi) formzs
A HTML cmkk egy csoportja, melyeknek korbban a formzsban volt szerepe, a CSS alkalmazsa ta olyan mdon hasznlatos, hogy br a megjelentsre is hatnak, tartalmi okok miatt hasznljk ket, s a vgs formzst tovbbra is CSS-el lehet ellltani.
a) Rvid idzet: <q></q>
<p>A vilg egyik legismertebb idzete a Hamlet-bl a <q>Lenni, vagy nem lenni, ez itt a krds.</q></p>
b) Hosszabb idzet: <blockquote></blockquote>
A bngszk idzjel nlkl, mindkt oldali behzssal, eltte s utna trkzzel, blokkszint elemknt jelentik meg a idzetblokkot.
<blockquote> Ez egy hossz idzet. Ez egy hossz idzet . Ez egy hossz idzet Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet </blockquote>
c) Dltbets megjelents: <i></i>
<p><i>Ez egy dlt bets szveg</i></p>
d) Cmhivatkozs: <cite></cite>
14
Nem szerzre, hanem mre - knyvre, jsgra, versre, dalra, szndarabra, msik forrsra - lehet gy hivatkozni.
<p>A vilg egyik legismertebb idzete a <cite>Hamlet</cite>-bl a <q>Lenni, vagy nem lenni, ez itt a krds.</q></p>
e) Kulcssz kiemels: <b></b>
A bngszk alaprtelmezetten flkvr bett hasznlnak ebben az esetben.
<p>A digitlis <b>videokamerk</b> egyre nvekv hnyadban a Full HD felbontst alkalmazzk.</p>
f) Tartalmi kiemels, kihangslyozs: <strong></strong> ( strong= ers kiemels ) s <em></em> ( emphasis=hangsly)
A bngszk a strong esetben flkvr betkkel, az em esetn dltbetvel jelentik meg a jellt szavakat.
<p>A medencbe ugrlni veszlyes s <strong>szigoran tilos!</strong></p>
g) Elre formzott szveg: <pre></pre>
A kzjk zrt szveg pontosan annyi szkzzel, pontosan annyi sorban s olyan llapotban fog a dokumentumban megjelenni, mint ahogy azt a HTML fjl tartalmazza.
<pre> Este van, este van ki-ki nygalomba! Feketn blintgat az eperfa lombja, zg az ji bogr, nekimegy a falnak, nagyot koppan akkor, azutn elhallgat.
rta: Arany Jnos </pre>
9. Klnleges karakterek (karakter entitsok)
A HTML dokumentum tartalmnak kialaktsa sorn a foglalt karakterek ill. a billentyzetrl nem, vagy nehezen elrhet klnleges karakterek esetben un. karakter entitsokat (character entity) kell alkalmazni, ami az adott karakter/szimblum/jel kdolt megadst
15
jelenti. Ilyen foglalt karakterek pldul azok amellyel tagolunk egy weboldalt. Ilyen a kisebb mint jel: <. Nagyobb mint jel: >, idzjel, & s de elfordulhatnak ms karakterek is amit valamirt szeretnnk klnleges karakterknt megadni.
Billentyzetrl nem (vagy nehezen) bevihet klnleges karakterek: grg betk, pnznemek (euro, yen, font, cent) matematikai szimblumok (mnusz, vgtelen, gyk, hatvnykitev, sszesen, kzel egyenl, azonos), stb.
A klnleges karaktereket a & karakter vezeti be, s ; karakter zrja. A klnleges karaktereknek van egy kdjuk, ami egy szm. A legtbbnek azonban neve is van. A & s a ; karakterek kzz ezt a kdot vagy nevet kell rnunk.
Megjegyzs: a nem trhet szkznek (non-breaking space) nincsen megjelensi formja - az a funkcija, hogy tbb szbl ll kifejezs/informci esetn a szavak kz helyezve megakadlyozza azt, hogy a sor vgn a bngsz a kifejezs/informci kzben trhesse meg a sort, hanem egy sorban, sortrs nlkl tartja egyben azt
Plda:
A bekezdst <p> s </p> tagek kz kell rni.
A CSS az angol Cascading Style Sheets kifejezs rvidtse, jelentse rangsorolt stluslapok. A stluslapot egy szveges fjlban kell megrni, amit .css kiterjesztssel kell elmenteni.
A stluslap nem ms, mint kijellk (selector) s meghatrozsblokkok (declaration) felsorolsa. A meghatrozs kt rszbl ll: tulajdonsgbl (property) s rtkbl (value).
A kijell egy cmkt jell ki a HTML dokumentumban, s erre a kijellt cmkre vonatkozik a formzs.
Plda:
h1 { color: red; }
a) Mrtkegysgek
Mretek megadsakor szmos mrtkegysg ll rendelkezsnkre, beszlhetnk abszolt s relatv rtkekrl. A mrtkegysget mindig kzvetlenl a szm utn kell rnunk, minden elvlaszt nlkl. Ha nem egsz szmot szeretnnk hasznlni, akkor tizedespontot kell hasznlnunk.
a.1. Relatv mrtkegysgek: px, em, ex s a szzalk
px: A pixelben, azaz kppontban megadott rtkek a megjelent egysgtl fggenek, ltalban egy konkrt kppont mrett jellik
em: Ez a mrtkegysg az adott elemnl (vagy szl elemnl) felhasznlt bettpus betmrethez viszonytott rtket jelenti. Amennyiben a dokumentumhierarchia legfels elemnek betmrete is ebben a mrtkegysgben van megadva, gy a legfels elem betmrete az alaprtelmezett font-size kiindulsi rtke. Alaprtelmezett esetben, ha a dokumentum gykerben
17
hasznljuk ezt a mretet, 16 pixelt szokott jelenteni (bngsz belltsoktl fggen). Egy lehetsges rtk pldul az 1.2em.
ex: Az ex szintn egy relatv rtket jell, s hasonlt az em-hez, azzal a kivtellel, hogy ez nem az adott betkszlet magassghoz viszonytott mretet, hanem a betkszlet kis x bet magassgt jelli (br azoknl a betkszleteknl is definilva van, ahol nem ltezik x bet). ltalban a bngszk az rtkt egyszeren az em felnek veszik, gy alapesetben ltalban 8 pixelnyi mretet jell.
Szzalk: Mindig relatv rtket kpeznek valamely ms rtkhez viszonytva, a krds csak az, hogy ppen milyen rtket vesznek alapul. Ez ltalban a leglogikusabb rtk, de hogy egyrtelm legyen, minden tulajdonsgnl, ahol hasznlhatunk szzalkos megadst, definilva van, hogy mihez kpest rtend. Egy lehetsges rtke az 50%.
a.2. Abszolt mrtkegysgek
Az abszolt mrtkegysgek neve onnan ered, hogy elvileg minden esetben a szemll szmra ugyanakkora mretet jelentenek. Az mm a millimter rvidtse, egy plda a hasznlatra: 10mm.
Az in az inch (=col, =hvelyk) mretet jelli, azaz 25.4 millimtert. Egy lehetsges megadsa: 2in.
A cm a centimtert takarja, mely mint kztudott, 10 mm-ert takar. A megadsa nem tr el a korbbiaktl: 1cm.
Most jnnek az rdekesebb mrtkegysgek, ezek kzl az egyik a pt, mely a "pont" rvidtse. A pont tipogrfiai mrtkegysg, egy pont 1/72 hvelyket jell. Gyakran keverik ssze a pixellel, pedig nem sok kzk van egymshoz. Egy plda a hasznlatra: 16pt.
b) Sznek hasznlata
Tbb helyen is megadhatunk szneket tulajdonsgknt (httrszn, szveg szne, stb.). Alapveten ktflekppen: vagy a szn nevvel, vagy pedig a 3 komponensvel RGB (vrs, zld, kk) formban. A hasznlhat 16 kulcssz (a Windows VGA 16 sznei kzl): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, s yellow. Az RGB megads ngyflekppen is trtnhet, ebbl az els kt lehetsg hexadecimlis, mg a tovbbiak decimlis s szzalkos mdok.
18
Az #rrggbb megadsnl az rr, gg s bb rtkek hexadecimlisan, 00 s FF kztt adjk meg az adott szn erssgt. A 00 a legsttebb, a FF pedig a legvilgosabb. A hexadecimlis szmoknl a 9 feletti rtkeket jelkpez betket mind kisbetvel, mind nagybetvel megadhatjuk. Pr plda: fekete: #000000 piros: #FF0000 zld: #00FF00 kk: #0000FF fehr: #FFFFFF Az #rgb megadsnl az elzhz hasonlan, de csak egy szmjegyes hexadecimlis szmokkal adhatjuk meg a sznt. Az #123 megfelel az #112233 sznnek. Az elz pldk ezzel a megadsi mddal: fekete: #000 piros: #F00 zld: #0F0 kk: #00F fehr: #FFF Az els megadshoz hasonlan, de decimlis szmokkal is meghatrozhatjuk a komponensek rtkeit, szintn 0 s 255 kztti rtkekkel. Ekkor az rgb(r,g,b) formtumot hasznlhatjuk. Maradva a pldknl: fekete: rgb(0,0,0) piros: rgb(255,0,0) zld: rgb(0,255,0) kk: rgb(0,0,255) fehr: rgb(255,255,255) Amennyiben szzalkosan ismerjk a szn komponenseit, erre is lehetsgnk van. Ekkor a 0% ppen nullt, a 100% pedig 255-t jelent. A szzalk jelet kzvetlenl a szm utn kell rni. A hasznland formtum az elzhz hasonl: rgb(r%,g%,b%). Maradva a pldknl: fekete: rgb(0%,0%,0%) piros: rgb(100%,0%,0%) zld: rgb(0%,100%,0%) kk: rgb(0%,0%,100%) fehr: rgb(100%,100%,100%)
2. Stluslap begyazsa HTML dokumentumba
19
Ahhoz hogy egy stluslap hatssal legyen egy HTML dokumentumra, ssze kell ktni ket. Ezt gy tehetjk meg, hogy a fejrszbe (<head>...</head>) berjuk a kvetkez sort:
A sszes HTML elemet ki lehet vlasztani szelektorokkal. A weblap sszes azonos elemre vonatkoznak. Ebben az esetben csak annyi a dolgunk, hogy a kivlasztani kvnt elem nevt hasznljuk szelektornak.
Plda:
h1{ color: red; }
b{ color: #f8f8f8; }
<h1>Ez egy piros szn cm</h1> <b>Ez egy vilgos szrke szn, flkvr szveg </b>
b) Csoport kijells (Group of selectors)
Tbb elemhez ugyanazt a stlust rendeli. A kijellt elemek vesszvel s res betkzzel elvlasztva sorolandk fel
Plda:
h1, h2 { meghatrozs(ok) }
kdols a legnagyobb s msodik legnagyobb cmhez rendel azonos megjelentst.
c) Azonost kijellk (ID selector)
20
Az id attribtum arra val, hogy egyrtelmen azonostson egy cmkt, ezrt kt id ugyanolyan rtkkel nem fordulhat el egy oldalon bell. Ilyenkor egyedi, "szemlyreszabott" tulajdonsgokkal lthatjuk el az elemeket. HTML attribtuma az id, CSS szelektora pedig a # (kettskereszt) jel.
A stluslapban pedig gy tudunk bizonyos nev id-ra stlust alkalmazni:
#piros { color: red; }
#kek { color: blue; }
d) Szrmaztatott kijellk (descendant selector)
Nha krnyezetfgg kijellknek is fordtjk ket egy id jellemzvel definilt szakaszon belli elem-kijellst vgeznek. Ha a HTML oldal pldul kt szakaszbl ll, s az egyes szakaszokban lv bekezdsekhez szakaszonknt eltr megjelentst terveznk, akkor a HTML oldal kdolsa:
CSS-ben az egyes szakaszok bekezdseihez a megjelentsek kdolsa:
#szak1 p { meghatrozs(ok) } #szak2 p { ms meghatrozs(ok) }
Az azonost kijellt teht egy elemkijell kvet, kztk egy res betkz van
e) Osztly kijellk (Class selector)
21
Lehetsgnk van tbb elemnek egyszerre megadni tulajdonsgokat ezzel a mdszerrel. Itt meg kell adni a HTML-ben minden egyes ltalunk egyformn formzni kvnt elemnek a class attribtumot.
Plda:
h1.szin{ color: red; } Nem csak azonos, hanem klnbz cmkkhez ( pl. h1, p, blockquote, stb. ) is rendelhetk kzs osztlyok:
Termszetesen szrmaztatott kijellssel az l-osztly kijellse pontosthat/szkthet, pl.: #nav a:link, #nav a:visited, stb.
A hivatkozsok azrt l-osztlyok, mert llapotuk nem a HTML kdtl, hanem a weboldal ltogatjnak tevkenysgtl fgg, s egyidejleg kt llapotban is lehetnek ( pl. mr egyszer rkattintottak, majd ksbb jbl fel llnak a kurzorral ).
22
Blokkszint elemek els soraira s/vagy els betire definilhat kln stlus.
Pl. ha minden bekezds els sort jelljk ki:
p:first-letter { meghatrozs(ok) }
Minden bekezds els betje esetn ( inicil kialaktsa ! ):
p:first-line { meghatrozs(ok) }
4. Weboldal htternek belltsa
Tulajdonsg Lers Lehetsges rtkek background-color Egy elem httrsznt adja meg color-rgb color-hex color-name transparent background-image Httrkpet llt be. url(URL) none background-repeat Belltja, hogy a httrkp vzszintesen, fgglegesen, mindkt mdon, vagy sehogy se ismtldjn. repeat repeat-x repeat-y no-repeat background-attachment Belltja, hogy a httrkp fixen maradjon-e az oldal grgetsekor, vagy sem. scroll fixed background Rvidt tulajdonsg az sszes eddigi tulajdonsg egyidej megadshoz. background-color background-image background-repeat background-attachment background-position
Plda:
body { background-color: #4AF24F; }
h1 { background-color: #F55C54; }
h2 { background-color: maroon;
23
}
5. Szveg formzsa
Tulajdonsg Lers Lehetsges rtkek color Szveg sznnek megadsa. color-rgb color-hex color-name text-align Szvegigazts: bal, jobb, kzp, sorkizrt. left right center justify text-decoration Alhzst, fellhzst, thzst, vagy villogst llt be a szvegre. none underline overline line-through blink text-indent Bekezds els sornak beljebb kezdse. length % line-height Sorkzk megadsra szolgl. normal number length % font-family A hasznland betcsaldrl ad prioritsos listt: Ha az els megadott font nem tallhat, akkor prblkozik a msodikkal s gy tovbb. Betcsald neve, pl: Arial, "Times New Roman", Verdana; Vagy: ltalnos tpus: serif sans-serif cursive fantasy monospace font-style Dlt bets szveg megjelentst teszi lehetv. normal italic oblique font-size Szveg mrett lehet megadni. xx-small x-small small medium large x-large xx-large pt px smaller
24
larger % em font-style Dlt bets szveg megjelentst teszi lehetv. normal italic oblique
Megjegyzs: A font-size tulajdonsg rtkhez csak ezeket az rtkeket ajnlott megadni: %, em, smaller, larger. Ugyanis ezek az rtkek a szl elem betmrethez kpest relatvan adjk meg a betmretet.
Pldk:
1.Plda:
body { font-size: 200%; }
p.xxsmall { font-size: xx-small; }
<p>Norml mret (rkli a body elem mrett)</p> <p class="xxsmall">XX-small betmret(abszolut mret, nincs rkls) </p>
Gyakran van szksgnk arra, hogy csak bizonyos szavak, szvegrszeket emeljnk ki, sznezznk t stb. Az ilyen formzand szvegrszek kijellsre kell hasznlni a span tagot. Ehhez a cmkhez mindig adjuk meg a class rtket, hiszen gy fogjuk tudni ksbb elrni a stluslapbl.
Plda:
span.voros { color: red; }
<p>A szn egy rzet, amely az <span class="voros">agy reakcija</span> a fnyre</p>
6. Linkek dsztse stluslappal
A linkek esetn, a klnbz llapotokra klnbz stlusokat alkalmazhatunk.
A link ngy llapota: o :link - A mg meg nem ltogatott linkek o :visited - A mr megltogatott link o :hover - Azt a linket vlasztja ki, amelyik felett ppen ll az egr o :active - Azt linket vlasztja ki, amelyiken llva az egrrel a felhasznl lenyomta az egrgombot, de mg nem engedte fel.
Nem ktelez mind a ngy llapotra kln stlust megadni. Azonban ha megadjuk ket, akkor pontosan a fenti pldban lthat sorrendben alkalmazzuk ket.
a) A <div>.</div> cmkk (division=szakasz) egy ltalnos trolelemet alkotnak ( ltalban a weblap egy logikai sszetartoz rszt jellik ki ), a kzttk elhelyezked tetszleges tartalomra (szveg, lista, tblzat, kp, hivatkozsok, stb.) hivatkozni lehet, ill. formzst lehet hozzrendelni. Az egyes trolelemek az id jellemzjk (identifier=azonost) tulajdonsgval (clszeren a szakaszra jellemz nvvel) azonosthatk. Az id-k rtkeinek egyedieknek kell lennik, azaz mindegyik csak egyszer szerepelhet egy weblapon, klnben nem lesz egyrtelm az azonostsuk.
A HTML kdba a szakaszkijellseket berva a HTML tartalom s alaprtelmezett megjelentse nmagban nem vltozik meg, a CSS-ben hozzjuk rendelt formzsi tulajdonsgokkal egytt azonban nagyon fontos szerepk van a weblap megjelentsnek kialaktsban.
A CSS stluslapnyelv egy HTML dokumentum megjelentsekor az egyes elemekhez lthatatlan dobozokat rendel, melyek magukban foglalhatnak karaktereket, szavakat, sorokat, bekezdseket, listkat, tblzatokat, kpeket, stb. Minden doboznak lehetnek kln formzsi tulajdonsgai, mint pl. mret, eltrszn, bettpus, szegly, httr, stb. A dobozok hierarchikusan egymsba is gyazdhatnak, pl. egy sz doboza egy lista egy sornak vagy egy tblzat egy celljnak a dobozba, az a lista vagy tblzat dobozba, majd az a weboldal egy szakasznak a dobozba, stb.
A dobozok lehetnek blokkszint ( block-level box ) dobozok ( pl. bekezds, lista, tblzat, blokkidzet, div szakaszok, stb. ), sor-( inline box ) dobozok ( pl. egy szveg egy sora ), s soron belli ( inline-level box ) dobozok ( pl. karakterek, szavak, kpek egy soron bell ).
Minden doboznak van egy 'magja', az t krlvev 'kitltssel' (padding), szegllyel (border) s margval (margin).
A marg, a szegly s a kitlts mrete egyenknt meghatrozhat a margin, a border s a padding tulajdonsgok rtkeinek belltsval. A kitltterlet httrszne megegyezik az elemvel, amelyet a background tulajdonsg hatroz meg. A szegly szne s stlusa szintn a border tulajdonsg belltsval hatrozhat meg, mg a marg mindig tltsz, gy a szl elem llandan lthat marad.
30
A doboz szlessge az elem, a kitlts, a szegly s a marg terletnek sszege.
11. Kitlts, szegly s a marg belltsa
a) Kitlts (bels marg) belltsa
A bels marg (padding) a tartalom s a szegly kzti res rszt hatrozza meg. Megadsnak mdja a padding-top, ( fels bels marg ), padding-right ( jobboldali bels marg ), padding-bottom (als bels marg), padding-left (baloldali bels marg) tulajdonsgokkal trtnik. Alaprtelmezett rtkk 0 (mind abszolt, mind relatv rtkben) s egyiknek sem lehet negatv az rtke.
A fenti rtkek sszevontan is megadhatk a padding tulajdonsggal, a felsorolt rtkek ktelez sorrendje az ramutat jrsval megegyezik s fellrl indul. Ha a bal rtket kihagyjuk, az megegyezik a jobbal, ha az als rtket hagyjuk ki, az megegyezik a felsvel. Ha mindegyik rtk megegyezik, egyetlen rvid alak padding tulajdonsg hasznlhat. Az albbi kt megadsi md ekvivalens:
A szegly stlus, szn s vastagsg a border tulajdonsggal mg tovbb sszevonhat, azonban ez az sszevons (shorthand) csak akkor hasznlhat, ha a ngy szegly stlus-, szn-, s vastagsg rtkei egyenlk.
h1 { border: solid green 15px; }
c) Marg belltsa
Befolysoljk az adott elem tvolsgt annak szomszdos elemeitl. A margknak nincs semmilyen ltszlagos tulajdonsguk, rtkk. Csak mretket hatrozhatjuk meg.
Tulajdonsg Lers Lehetsges rtkek margin-top Fels marg auto (a bngsz belltsa) length % margin-right Jobb marg margin-bottom Als marg margin-left Bal marg margin sszefoglal, rvid tulajdonsg. Nem kell kln-kln megadnunk a marg rszeit, hanem egyszerre maghatrozhatjuk rtkeiket egy s ngy kztt. Az els a fels margt-, a msodik a jobb margt-, a harmadik az alst, a negyedik rtke pedig a bal margt szablyozza.
Alaprtelmezett rtkk szintn 0 (mind abszolt, mind relatv rtkben). Egy lnyeges klnbsg a bels marghoz kpest, hogy a kls margnak negatv rtke is lehet - ekkor a szomszdos befoglal blokk-elemek tfedhetik egymst.
Az egyes bngszk alaprtelmezetten ms-ms kezd margkat hasznlhatnak, ezrt a sajt elkpzelsnk bngsztl fggetlen kialaktshoz clszer balra fellre igaztani az elemek elhelyezsnek referencia-pontjt:
A h1 elem fels margja 10px, jobb margja 11px, als 12px, s a fesl margja 13px.
12. Mretezs, pozicionls
a) Mretek belltsa
Az albbi tulajdonsgok segtsgvel a klnbz elemek mrett llthatjuk be.
Tulajdonsg Lers Lehetsges rtkek width Egy elem szlessgt adja meg. auto % px, em height Egy elem magassgt adja meg. auto % px, em max-width Egy elem maximlis szlessgt adja meg. auto % px, em min-width Egy elem minimlis szlessgt adja meg. auto % px, em max-height Egy elem maximlis magassgt adja meg. auto % px, em min-height Egy elem minimlis magassgt adja meg. auto % px, em
auto: ez az alaprtelmezett rtk - a bngsz maga hatrozza meg egyb tulajdonsgok rtkei alapjn a szlessget illetve a magassgot abszolt rtkben megads: a tartalom-doboz szlessgt illetve magassgt definilja relatv rtkben (a befoglal blokk szlessgnek illetve magassgnak szzalkban) megads
Plda:
<p class=meret > This paragraph is 400pixels wide and 100 pixels high
A bngszk balrl jobbra s fentrl lefel olvassk a dokumentumokat (ez a norml szvegfolyam). Ebbl a norml folyambl a position (helyzet) s float (sztats) tulajdonsgokkal lehet kiemelni egy adott elemet.
A position tulajdonsg lehetsges rtkei: static (statikus) ez az alaprtelmezett rtk, az elem a norml folyamban marad absolute (abszolt vagy fggetlen): az adott elem troltmbjhez kpest van a helyzete meghatrozva, ami lehet egy msik elem, vagy a kezdeti troltmb (ltalban maga a html elem). fixed (rgztett): a helyre rgztve marad az elem akkor is, ha a weblapot grgetjk (a felhasznl ltal lthat rszhez/bngszablakhoz rgztett, hasonlan a fixed background image-hez). Az abszolt pozci specilis esete - az elem itt is kikerl a pozcionlsi smbl, de nem a befoglal blokk, hanem a kperny (viewport) a viszonytsi pont. A rgztett pozcij elem nyomtatskor minden oldalon megjelennek. relative (relatv vagy viszonytott): az elem a norml szvegfolyamban helyezkedik el, s ettl a norml helyzettl toljuk el valamilyen rtkkel (px, em, %) az alaprtelmezett static helyzetbl vzszintes s fggleges irnyba a left, right, top, bottom tulajdonsgokkal. Az eltolt elem eredeti helye resen marad, ms elem nem csszik oda be (az eltols a krnyezetre nincsen hatssal)
A float tulajdonsg segitsgvel klnbz elemeket az oldal bal vagy jobb szlre usztathatunk. Ha egy elem sztatva van, a tartalom tbbi rsze ( szveg ) krbe veszi. A float s a krbefut tartalom kztti hely kihagyst a float margin tulajdonsgval lehet vltoztatni.Tipikus plda, amikor egy kpet krlfolyatunk szveggel, de hasznljuk egy weboldal szerkezeti kialaktsnl is.
A float rtkei: left: az elem balra toldik, a szveg az elem jobb oldaln folyik (fentrl lefel) right: jobbra toldik, a szveg bal oldalt folyik le none: nem trtnik krlfolys
Ha a float tulajdonsg hatst meg akarjuk szntentni akkor hasznljuk a clear: belltst. rtkei: left: a float left hatst megsznteti right: a float right hatst megsznteni both: minden float tulajdonsg hatst rvnytelenti none: alapbellts, az adott elemre kihatssal lesz a float
<img src="sunset.gif" class="floatLeft"> <p>The images are contained with...</p>
<img src="sunset.gif" class="floatRight"> <p>This second paragraph has an...</p>