Az Elem kiválasztónál megismertük milyen egyszerűen formázhatunk egy HTML elemet. De mi történik akkor, ha mondjuk a bekezdést több féle módon szeretném megjeleníteni? Ebben segítenek az Osztály kiválasztók. Ez már bonyolultabb, mint az eddigiek, de remélem a leírás és a sok példa segít megérteni ezt a nagyon fontos részt.
Készítünk egy olyan stílus megadást, ahol 2 bekezdésformázást mutatok be.
A forráskód:
<head> </head> <body>Ez egy új bekezdés, amely a nagy osztály kiválasztóhoz van hozzárendelve.
Ez pedig egy olyan bekezdés, amely a kis_dolt osztály kiválasztóhoz van hozzárendelve.
Megint egy nagy osztály kiválasztós.
És újra nagy.
Most pedig egy kis_dolt.
</body>
Nézzük meg első lépésben a HTML részt. A P tag-hez hozzáadtam a class="osztálykiválasztó" részt. Ez például látható a 17-es és a 18-as sorban is. Figyeljük meg, hogy beszédes nevet adtam a kiválasztóknak.
Az elsőnél a "nagy" arra utal, hogy a bekezdés (fejezet néven használják néhol) betűmérete nagy lesz a lapon használt alapértelmezett betűmérethez képest. A "kis_dolt" pedig arra utal, hogy itt kisebb betűméretű és dőlt stílusú betűk jelennek majd meg. Azt is figyeljük meg, hogy nem használok ékezetes karaktereket az osztálynévhez, mert ez a későbbiekben gondot okozhat.
Kicsit lejjebb haladva a törzsben, azt láthatjuk, hogy tetszőleges számban újrahasználhatjuk ugyanazt az osztálykiválasztót, keverhetjük, nincs sorrend és egyéb megkötés.
Mi az újdonság a stílus megadásnál?
A 3. és a 8. sor hozza a megadás szintaxisát. Az osztálykiválasztó elé egy pontot kell tennünk és formázási utasítások innen már ugyanazok mint eddig.
Ez egy új bekezdés, amely a nagy osztály kiválasztóhoz van hozzárendelve.
Ez pedig egy olyan bekezdés, amely a kis_dolt osztály kiválasztóhoz van hozzárendelve.
Megint egy nagy osztály kiválasztós.
És újra nagy.
Most pedig egy kis_dolt.
Bármelyik HTML elemhez hozzáadhatjuk a class="..." osztálykiválasztót nemcsak a P elemhez.
Az eredményt a jobb oldalon láthatod.
A forráskód:
<head> </head> <body>Ez egy H1-es címsor kis_dolt osztállyal.
Ez egy H4-es címsor kis_dolt osztállyal, a háttér lime színű, keretezve.
Ez egy új bekezdés, amely a nagy osztály kiválasztóhoz van hozzárendelve.
Ez pedig egy olyan bekezdés, amely a kis_dolt osztály kiválasztóhoz van hozzárendelve.
Megint egy nagy osztály kiválasztós.
És újra nagy.
Most pedig egy kis_dolt.
</body>
Hogy használhatjuk más elemekre az előbb definiált stílusunkat?
A forráskód 22. sorában láthatod, ahogy egy H1-es címsorra alkalmazzuk.
Lehet olyat készíteni, hogy a formázást kiegészítjük továbbiakkal illetve lecseréljük egyes részeit?
Igen. A 23. sorban a H4-es elemhez is hozzárendeltük az osztálykiválasztót. Ha megnézzük a stílus megadásánál azt láthatjuk, hogy 14. sorban egy újfajta, eddig nem használt jelölést látunk. A H4 elem kiválasztó után tettünk egy pontot majd utána írtuk a kis_dolt osztály kiválasztót. Ezzel azt érjük el, hogy csak a H4 címsor lesz zöld hátterű, keretezett, a többi elemhez rendelt kis_dolt változatlan marad. Az eredeti kiválasztó többi formázása természetesen vonatkozik a H4.kis_dolt osztály kiválasztóval megadottra (mérete, dőlt stílusa és a betűszíne is).
Az eredményt a jobb oldalon láthatod.
Ez egy új bekezdés, amely a nagy osztály kiválasztóhoz van hozzárendelve.
Ez pedig egy olyan bekezdés, amely a kis_dolt osztály kiválasztóhoz van hozzárendelve.
Megint egy nagy osztály kiválasztós.
És újra nagy.
Most pedig egy kis_dolt.
Remélem ez a hosszú rész azért érthető volt, mert ezt nagyon gyakran használjuk.