<span style="font-family:Tahoma"><span style="color:Black">Szintaxis
A CSS szintaxisa három részből van felépítve: a kiválasztóból [selector] (amivel megadod, hogy melyik HTML elemnek szeretnéd megváltoztatni a megjelenését, pl: <h1>), a tulajdonságbólértékből [value] (milyen értéket vegyen fel az előbb megadott tulajdonság, pl: red).selector {property: value}
pl:
a {color: #CCDDEE;}Vedd észre, hogy a tulajdonság és az érték között van egy ":" és az egész egy "{ }" közé van foglalva. Hogyha két szóból áll az érték, akkor tegyél köréjük idézőjelet (""). Pl.:</span></span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>p {font-family: "sans serif"}[/CENTER] <span style=font-family:Tahoma">
Hogyha több tulajdonságot szeretnél adni egy kiválasztóhoz, akkor azokat egymástól pontosvesszővel ( ; ) válaszd el. Pl.:
</span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>p {text-align:center;color:red}[/CENTER]<span style="font-family:Tahoma">vagy
</span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>p {
text-align: center;
color: black;
font-family: arial
}[/CENTER]<span style="font-family:Tahoma">
Csoportosítás
Csoportokba foglalhatsz kiválasztókat, egymástól vesszővel (,) elválasztva. A csoport minden egyes tagjára érvényes lesz az a tulajdonság és a vele járó érték, amit beállítunk a csoporthoz. Az alábbi példában a header (fejléc) elemeket foglaltuk egy csoportba, mindegyik fejléc zöld színű lesz:
[property] (amivel megadod, hogy melyik tulajdonságát szeretnéd módosítani, pl: színét) és az </span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>h1,h2,h3,h4,h5,h6
{
color: green
}[/CENTER]<span style="font-family:Tahoma"><span style="color:Black">
Az osztály kiválasztó
Az osztály (class) kiválasztóval egy HTML elemhez különböző értékű tulajdonságokat rendelhetsz hozzá. Az alábbi példában a "p" (bekezdés) elemből készítünk két csoportot. Az egyiket jobbra, a másikat pedig balra igazítjuk.</span></span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>p.right {text-align: right}
p.center {text-align: center}[/CENTER]<span style="font-family:Tahoma">
Az osztály attritbútumot bele kell építened a HTML dokumentumba ahhoz, hogy érvénybe lépjenek a benne meghatározott tulajdonságok. Az előbbi példa beépítve egy kódrészletbe:</span>
<div class='htmltop'>HTML[/CENTER]<div class='htmlmain'><p class="right">
Ez a bekezdés jobbra igazított lesz
</p>
<p class="center">
Ez pedig középre lesz igazítva
</p>[/CENTER]<span style="font-family:Tahoma">
Ahhoz, hogy egy elem több osztályhoz (csoport) tartozzon egymástól szóközve elválaszva kell megadni a csoportok neveit. Pl: </span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'><p class="center bold">
Ennek a bekezdésnek a megjelenését a "center" és a "bold" csoportok tulajdonságai és azoknak az értékei határozzák meg.
</p>[/CENTER]<span style="font-family:Tahoma">Eddig csak egy HTML elemet osztottunk csoportokra. Mostantól viszont már lehetőségünk van egy csoportot több HTML elemnél alkalmaznunk. Pl:.
</span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>kozep {text-align: center} <h1 class="kozep>
Ez a fejléc középre lesz igazítva.
</h1>
<p class="kozep">
Ez a bekezdés is középre lesz igazítva.
</p>[/CENTER]<span style="font-family:Tahoma"><span style="color:Black">
Ne kezdj csoportneveket számmal, mert egyes böngészők nem tudják értelmezni!
Stílusok hozzáadása elemekhez, amelyeknek egyéni attritbútumaik vannak Meghatározott HTML elem, meghatározott tulajdonsága (attritbútuma) esetén is meg tudod határozni, hogyan jelenjen meg. Pl:
</span></span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>input[type="text] {background-color: blue}[/CENTER]<span style="font-family:Tahoma"><span style="color:Black">
Azoknak az input elemeknek lesz kék a háttere, amelyek szövegbeviteli (text) mezők.
Az id kiválasztó
Meghatározhatsz HTML elemeket egyéni id-k alapján is. Ameddig a csoporotba foglalt elemek neveit ponttal (.) kell kezdeni, addig az egyéni névvel (id-val) ellátottakét pedig kettőskereszttel (#). Az alábbi példában a "zold" nevű elem háttere zöld színű lesz.
</span></span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>#green {color: green}[/CENTER]<span style="font-family:Tahoma"><span style="color:Black">
Az alábbi kódban szereplő "p" elem csak akkor lesz középre igazítva (center) és piros (red) színnel írva, hogyha "para1"-nek hívják.
</span></span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>p#para1
{
text-align: center;
color: red
}
Ez a bekezdés alapértelmezett (általában fekete) színű lesz.
</p><p id="para1">
Ez a bekezdés pedig piros színű lesz és középre lesz igazítva.
</p>[/CENTER]<span style="font-family:Tahoma"><span style="color:Black">
Szintén NE kezdj id-val ellátott kiválasztókat számmal, mert néhány böngésző nem fogja tudni értelmezni!
CSS megjegyzések
A megjegyzések könnyebben értelmezhetővé teszik a hosszabb kódokat, így érdemes használni őket, nehogy eltévedj közöttük. A megjegyzéseket a böngészők kihagyják, így azok nem kerülnek megjelenítésre az oldaladat látogatók előtt, csak a forráskódban lesznek láthatóak. A megjegyzéseket "/*" jellel kell kezdeni és "*/" jellel lezárni. Több sorból is állhat a megjegyzés, amiket akár két tulajdonság közé is beépíthetsz. Pl.:
</span></span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>/* Ez
egy
több sorból
álló, külső
megjegyzés. */
p
{
text-align: center;
/* Ez egy belső megjegyzés. */
color: black;
font-family: arial
}[/CENTER]
A CSS szintaxisa három részből van felépítve: a kiválasztóból [selector] (amivel megadod, hogy melyik HTML elemnek szeretnéd megváltoztatni a megjelenését, pl: <h1>), a tulajdonságbólértékből [value] (milyen értéket vegyen fel az előbb megadott tulajdonság, pl: red).selector {property: value}
pl:
a {color: #CCDDEE;}Vedd észre, hogy a tulajdonság és az érték között van egy ":" és az egész egy "{ }" közé van foglalva. Hogyha két szóból áll az érték, akkor tegyél köréjük idézőjelet (""). Pl.:</span></span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>p {font-family: "sans serif"}[/CENTER] <span style=font-family:Tahoma">
Hogyha több tulajdonságot szeretnél adni egy kiválasztóhoz, akkor azokat egymástól pontosvesszővel ( ; ) válaszd el. Pl.:
</span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>p {text-align:center;color:red}[/CENTER]<span style="font-family:Tahoma">vagy
</span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>p {
text-align: center;
color: black;
font-family: arial
}[/CENTER]<span style="font-family:Tahoma">
Csoportosítás
Csoportokba foglalhatsz kiválasztókat, egymástól vesszővel (,) elválasztva. A csoport minden egyes tagjára érvényes lesz az a tulajdonság és a vele járó érték, amit beállítunk a csoporthoz. Az alábbi példában a header (fejléc) elemeket foglaltuk egy csoportba, mindegyik fejléc zöld színű lesz:
[property] (amivel megadod, hogy melyik tulajdonságát szeretnéd módosítani, pl: színét) és az </span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>h1,h2,h3,h4,h5,h6
{
color: green
}[/CENTER]<span style="font-family:Tahoma"><span style="color:Black">
Az osztály kiválasztó
Az osztály (class) kiválasztóval egy HTML elemhez különböző értékű tulajdonságokat rendelhetsz hozzá. Az alábbi példában a "p" (bekezdés) elemből készítünk két csoportot. Az egyiket jobbra, a másikat pedig balra igazítjuk.</span></span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>p.right {text-align: right}
p.center {text-align: center}[/CENTER]<span style="font-family:Tahoma">
Az osztály attritbútumot bele kell építened a HTML dokumentumba ahhoz, hogy érvénybe lépjenek a benne meghatározott tulajdonságok. Az előbbi példa beépítve egy kódrészletbe:</span>
<div class='htmltop'>HTML[/CENTER]<div class='htmlmain'><p class="right">
Ez a bekezdés jobbra igazított lesz
</p>
<p class="center">
Ez pedig középre lesz igazítva
</p>[/CENTER]<span style="font-family:Tahoma">
Ahhoz, hogy egy elem több osztályhoz (csoport) tartozzon egymástól szóközve elválaszva kell megadni a csoportok neveit. Pl: </span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'><p class="center bold">
Ennek a bekezdésnek a megjelenését a "center" és a "bold" csoportok tulajdonságai és azoknak az értékei határozzák meg.
</p>[/CENTER]<span style="font-family:Tahoma">Eddig csak egy HTML elemet osztottunk csoportokra. Mostantól viszont már lehetőségünk van egy csoportot több HTML elemnél alkalmaznunk. Pl:.
</span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>kozep {text-align: center} <h1 class="kozep>
Ez a fejléc középre lesz igazítva.
</h1>
<p class="kozep">
Ez a bekezdés is középre lesz igazítva.
</p>[/CENTER]<span style="font-family:Tahoma"><span style="color:Black">
Ne kezdj csoportneveket számmal, mert egyes böngészők nem tudják értelmezni!
Stílusok hozzáadása elemekhez, amelyeknek egyéni attritbútumaik vannak Meghatározott HTML elem, meghatározott tulajdonsága (attritbútuma) esetén is meg tudod határozni, hogyan jelenjen meg. Pl:
</span></span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>input[type="text] {background-color: blue}[/CENTER]<span style="font-family:Tahoma"><span style="color:Black">
Azoknak az input elemeknek lesz kék a háttere, amelyek szövegbeviteli (text) mezők.
Az id kiválasztó
Meghatározhatsz HTML elemeket egyéni id-k alapján is. Ameddig a csoporotba foglalt elemek neveit ponttal (.) kell kezdeni, addig az egyéni névvel (id-val) ellátottakét pedig kettőskereszttel (#). Az alábbi példában a "zold" nevű elem háttere zöld színű lesz.
</span></span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>#green {color: green}[/CENTER]<span style="font-family:Tahoma"><span style="color:Black">
Az alábbi kódban szereplő "p" elem csak akkor lesz középre igazítva (center) és piros (red) színnel írva, hogyha "para1"-nek hívják.
</span></span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>p#para1
{
text-align: center;
color: red
}
Ez a bekezdés alapértelmezett (általában fekete) színű lesz.
</p><p id="para1">
Ez a bekezdés pedig piros színű lesz és középre lesz igazítva.
</p>[/CENTER]<span style="font-family:Tahoma"><span style="color:Black">
CSS megjegyzések
A megjegyzések könnyebben értelmezhetővé teszik a hosszabb kódokat, így érdemes használni őket, nehogy eltévedj közöttük. A megjegyzéseket a böngészők kihagyják, így azok nem kerülnek megjelenítésre az oldaladat látogatók előtt, csak a forráskódban lesznek láthatóak. A megjegyzéseket "/*" jellel kell kezdeni és "*/" jellel lezárni. Több sorból is állhat a megjegyzés, amiket akár két tulajdonság közé is beépíthetsz. Pl.:
</span></span><div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>/* Ez
egy
több sorból
álló, külső
megjegyzés. */
p
{
text-align: center;
/* Ez egy belső megjegyzés. */
color: black;
font-family: arial
}[/CENTER]