Osztály kiválasztó segítségével más-más módon tudjuk megjeleníteni az egyes osztályokba sorolt elemek tartalmát. A példában a két különböző osztályhoz tartozó bekezdések más-más formázást kapnak:
p.right {text-align: right}
p.center {text-align: center}
Ez a két stílus a következő két bekezdés megjelenésére hatással lesz:
<p class="right">
Ez egy jobbra igazított bekezdés.
</p>
<p class="center">
Ez egy középre igazított bekezdés.
</p>
A p tagoknak nem kötelező megadni class tulajdonságot, vagy akár más is lehet a class értéke, de ezekben az esetekben a fenti stílusoknak nem lesz hatása a bekezdésekre.
Az osztály szintű kiválasztást nem kötelező taghoz kötni, lehet tagoktól független, általános osztály kiválasztót is definiálni. A példa minden center osztályú elemet középre igazít. (Már amelyik HTML elemnél egyáltalán van értelme a középre igazításnak.)
.center { text-align: center }
A formázás minden center osztályú tagot középre igazít:
<h1 class="center">
Ez egy középre igazított cím.
</h1>
<p class="center">
Ez egy középre igazított bekezdés.
</p>
Érdemes megemlíteni, hogy a class tulajdonság több értéket is kaphat, egymástól szóközzel elválasztva:
<h1 class="center alahuz">
Ilyen esetben már az egyik kiválasztó (.center) használata esetén is találat lesz. Ha csak azokat a tagokat akarjuk kiválasztani, amelyek több class tulajdonságot is tartalmaznak, akkor a .center.alahuz szintaxist kell használnunk. Ekkor az egyik osztályba igen, de a másikba nem tartozó elemek nem lesznek kiválasztva.
Nincsenek megjegyzések:
Megjegyzés küldése