CSS: 2. Szintaxis

[HTML]

<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[/align]<div class='htmlmain'>p {font-family: "sans serif"}[/align] <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[/align]<div class='htmlmain'>p {text-align:center;color:red}[/align]<span style="font-family:Tahoma">vagy

</span><div class='htmltop'>HTML[/align]<div class='htmlmain'>p {
text-align: center;
color: black;
font-family: arial
}[/align]<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[/align]<div class='htmlmain'>h1,h2,h3,h4,h5,h6
{
color: green
}[/align]<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[/align]<div class='htmlmain'>p.right {text-align: right}
p.center {text-align: center}[/align]<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[/align]<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>[/align]<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[/align]<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>[/align]<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[/align]<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>[/align]<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[/align]<div class='htmlmain'>input[type="text] {background-color: blue}[/align]<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[/align]<div class='htmlmain'>#green {color: green}[/align]<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[/align]<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>[/align]<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[/align]<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
}[/align]