You are on page 1of 36

1

Web programozs jegyzet


0.1 verzi

Pl Lszl



























2




HTML alapok



1. A HTML nyelvtana

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>

3



Ugyanez HTML 5-ben:

<!doctype html>
<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

A fej HTML kdolsa:

<head>
karakterkszlet megadsa
weblap cme
kls stluslap csatolsa
begyazott stlus
</head>


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.

<meta http-equiv=Content-type Content=text/html; charset=iso-
8859-2>
<meta http-equiv=Content-type Content=text/html; charset=UTF-8>

A weblap cmnek megadsa:

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.

4


Kls stluslap csatolsa:

<link rel=stylesheet href=fajlnev.css>


<!doctype html>
<html>
<head>
<title>Az els weblapom</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="stylesheet" href="fajlnev.css"/>
</head>
<body>
Szp napot!
</body>
</html>


3. Alap HTML cmkk

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.

Plda:

<h1>1-es cmsor </h1>
<h2>2-es cmsor </h2>
<h3>3-as cmsor </h3>
<h4>4-es cmsor </h4>
<h5>5-s cmsor </h5>
<h6>6-os cmsor </h6>


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.

Plda:

<ul>
<li>kenyr</li>
<li>kv</li>
<li>tej</li>
<li>vaj</li>
</ul>

Eredmny:
kenyr
kv
tej
vaj

Megjegyzs: a CSS-ben lecserlhetjk a pontokat nhny ms beptett tpusra.


b) Sorszmozott lista (ordered list) <ol></ol>

Sorszmozott lista esetn az <ol> s </ol> tagek kz kell elhelyeznnk a listaelemeket.

7


Plda:

<ol>
<li>Els</li>
<li>Msodik </li>
<li>Harmadik </li>
</ol>

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>

8

<li>zsros tej</li>
<li>zsrszegny tej</li>
</ol>
</li>
<li>vaj
<ol>
<li> szott vaj</li>
<li> nem szott vaj</li>
<li> margarin</li>
</ol>
</li>
</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:

<table border="1">
<tr>
<th>Nv</th>
<th colspan="2">Telefon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>


Eredmny:




<table border="1">
<tr>
<th>Nv</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telefon</th>
<td>555 77 854</td>
</tr>

11

<tr>
<td>555 77 855</td>
</tr>
</table>


Eredmny:




Nagymret tblzatoknl az ttekinthetsget segtik a thead, tbody, tfoot cmkk. Ebben az
esetben a tblzat formzsa is knnyebb CSS-ben.

Thead tblzatfej
Tbody tblzattrzs
Tfoot tblzat lblce

Plda:

<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

12


6. Hivatkozsok (Linkek) <a></a>


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>

a) Egy msik webhelyre hivatkozs esetn a kdols:

<a href=URI>szveg s/vagy kp</a>

Plda:

<a href="http://www.sapientia.ro/">A Sapientia honlapja</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.

karakter entits szm entits nv angol megnevezs
< &#60; &lt; ( less-than )
> &#62; &gt; ( greater-than )
&#34; &quot; ( quotation mark )
& &#39; &amp; ( ampersand )
&#169; &copy; ( copyright )
&#174; &reg; ( registered trademark )
&#8482; &trade; ( trademark )
&#176; &deg; ( degree )
&#8364; &euro; ( euro )
&#162; &cent; ( cent )
&#160; &nbsp; ( non-breaking space )

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 &lt;p&gt; s &lt;/p&gt; tagek kz kell rni.















16

Stluslapok hasznlata (CSS- Cascading Style Sheets)


1. Bevezet


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).

kijell {
tulajdonsg1: rtk1;
tulajdonsg2: rtk2;
tulajdonsg3: rtk3;
...
}

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:

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


3. Kijellk (szelektorok) hasznlata



a) Elem kijellk (Type selector)

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.

gy kell megadni a HTML kdban:

<h1 id="piros">Piros szn cmsor</h1>
<h1 id="kek">Kk szn cmsor</h1>

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:

<div id=szak1>
<p>..</p>
<p>..</p>
</div>
<div id=szak2>
<p>..</p>
<p>..</p>
</div>

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:

.szin{
color: #f8f8f8;
}

<h1 class="szin">Szrke szn cmsor</h1>
<b class="szin">Szrke szn kiemelt szveg</b>
<p class="szin">Szrke szn bekezds</p>

A weboldal egy rsze stlusnak kijellshez a kijellk, azonostk s osztlyok
kombincija is hasznlhat. Pl.: az albbi CSS kdols

#header p.stilus1 { meghatrozs(ok) }

csak a weblap fejlc szakaszban lv bekezdsek kzl a stilus1 osztlyba tartozkhoz
rendeli a meghatrozs(ok)ban definilt megjelentst.



f) l-osztly ( ltszlagos osztly, pseudo-osztly ) kijellk (
pseudo-class/element )

A hivatkozsokra s az els sorra/els betre vonatkoznak. Az llapotok kijellsei ( a
sorrend kttt, az albbiak szerinti ):

a:link { meghatrozs(ok) } ( link=kapocs, hivatkozs - itt: mg nem ltogatott )
a:visited { meghatrozs(ok) } ( visited=felkeresve, ltogatva )
a:hover { meghatrozs(ok) } ( hover=lebeg itt: a kurzor felette van )

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>


2.Plda:

.smaller {
font-size: smaller;
}

.larger {
font-size: larger;
}

.em {
font-size: 2em;
}

<h1>Alaprtelmezett nagysg h1-es cmsor</h1>
<p>Alaprtelmezett nagysg betmret.</p>
<h1 class="smaller">smaller h1</h1>

25

<h1 class="larger">larger h1</h1>
<p class="smaller">smaller p</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.

Plda:

a:link {
text-decoration: none;
}
a:visited {
text-decoration: line-through;
}
a:hover {

26

color: orange;
}
a:active {
color: lime;
}






7. Listk formzsa stluslappal

Tulajdonsg Lers Lehetsges rtkek
list-style-type A listaelemek eltti kis jel
megadsra szolgl.
disc
circle
square
none
decimal
lower-alpha
upper-alpha
lower-roman
upper-roman
list-style-image Kp belltsa a listaelemek
jelzsre.
none
url
list-style-position A listaelmek eltti kis jel
vagy kp helyzetnek
megadsra szolgl.
outside
inside


Plda:

ul.square {
list-style-type: square;
}

<ul class="square">
<li>HTML 3.2</li>
<li>HTML 4</li>
<li>XHTML</li>
</ul>

8. Tblzatok formzsa stluslappal

27


<table class="st1">
<tr class="fejlec">
<th><a href="">Nv</a></th>
<th><a href="alma.html">Cm</a></th>
<th>Szak</th>
</tr>
<tr>
<td>Kiss Peter</td>
<td>Cskszereda</td>
<td>Kzgazdasgtan</td>
</tr>
<tr>
<td>Rongy Elek</td>
<td>Sepsiszentgyrgy</td>
<td>Romn-Angol</td>
</tr>
<tr>
<td>Nagy Manyi</td>
<td>Sepsiszentgyrgy</td>
<td>KGI</td>
<tr>
<td>Rongy Elek</td>
<td>Sepsiszentgyrgy</td>
<td>Romn-Angol</td>
</tr>
<tr>
<td>Kiss Peter</td>
<td>Cskszereda</td>
<td>Kzgazdasgtan</td>
</tr>
</table>

a) Rcsvonalak hozzadsa a tblzathoz

td, th {
border: 1px solid black;
}

b) Ketts szegly megszntetse

table {
border-collapse: collapse;
}

c) Bels marg megadsa a cellkhoz


28

table {
border-collapse: collapse;
}

d) Tblzat kzpre igaztsa s szlessgnek megadsa

table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
width: 70%;
}

e) Cellkban lv szvegek igaztsa

tr.fejlec {
text-align: left;
vertical-align: top;
height: 45px;
}

f) Fejlc httrsznnek a megadsa

tr.fejlec th{
background-color: #FC3;
}



9. A div s span elemek


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.



29

Plda:

<div id="large">
Ez egy <b>div</b> elem.
</div>

#large{
color: #00FF00;
font-family: arial;
font-size: 4pt;
}

b) A <span>..</span> cmkvel soron bell jellhet ki olyan tartalom, ami
kln formzhat. A span cmkt a div-hez hasonlan egyedi azonostval kell elltni.

Plda:

A span nem <span id="largefont">bloksznt</span> elem.

#largefont{
color: #00FF00;
font-family: arial;
font-size: 4pt;
}

10. A dobozmodell


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:

h1 { padding: 0.5em; }

h1 { padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;
}


31

sszevont megadsi md:

h1{
padding: 10px 11px 12px 13px;// fels, jobb, als, bal
}


b) Szegly megadsa

A szeglyek (border) a margn bell helyezkednek el. Szmos ltszlagos tulajdonsguk
van: szlessg, stlus, szn.

Szlessg:

Tulajdonsg Lers Lehetsges rtkek
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
Keret vastagsgnak
megadsa.
thin
medium
thick
length

Stlus:

Tulajdonsg Lers Lehetsges rtkek
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
Keret stlusnak megadsa.
Ha nem lltjuk be, nem fog
ltszani a keret!
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset


Szn:

Tulajdonsg Lers Lehetsges rtkek
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
Keret sznnek megadsa.
color-rgb
color-hex
color-name


A szeglytulajdonsgoknl lehetsgnk van a fent emltett hrom tulajdonsg
sszevonsra.

Plda:


32

h1 {
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: dashed;
}

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:


body, p, table, img, h1, h2, h3, h4, ol, ul {
margin: 0;
padding: 0;
}

33



Plda:

h1{
margin: 10px 11px 12px 13px;
}

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

34

</p>

.meret{
width:400px;
height:100px;
border:1px solid red;
padding:5px;
margin:10px;
}


b) Pozicionls


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)


Pldk:

#b1{
position:relative;
left:50px;
background-color: #3399FF;
}

#b2{
position:absolute;
top:50px;
background-color: #66CC66;
}

#b3{

35

background-color: #FFFF33;
}

#b4{
position: fixed;
background-color: #FF99FF;
top: 200px;
left: 500px;
}

<div id="b1">Elso blokk</div>
<div id="b2">Msodik blokk</div>
<div id="b3">Harmadik blokk</div>
<div id="b4">Negyedik blokk</div>


A krlfolys (float)

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>


img.floatLeft {
float: left;
margin: 4px;
}

36

img.floatRight {
float: right;
margin: 4px;
}

13. Lthatsg (Visibility)

You might also like