CSS - intermediate - Lecke száma 3
Betűformázás és osztályok
Ebben a leckében kipróbálunk néhány alap betűformázást. Megtanulunk betűtípust, méretet, félkövér, dőlt és kiskapitális formázást. A formázások mellett az azonosítóhoz (id) hasonló osztály tulajdonságot is bevezetjük.
Új HTML tulajdonság ebben a leckében:
class – a CSS fájlba összevonhatóak egy név alá egy vagy több formázás. Az elnevezést egy pont karakterrel kell kezdeni. Ezt a formázást később több HTML címkére is alkalmazhatjuk a class tulajdonságot mellékelve a címkéhez és a stíluscsoport nevét használva.
Új CSS kulcsszavak ebben a leckében:
font-family – a betűtípus megadására használhatjuk ezt a tulajdonságot. Felsorolhatunk többet is, ha esetleg a böngésző nem támogatná valamelyiket.
font-size – a betűméret meghatározására alkalmas tulajdonság.
font-style – dőlt betűk előállítására alkalmas. Értékei lehetnek: normal vagy italic (dőlt).
font-weight – félkövér betűk előállítására alkalmas. Értékei lehetnek: normal vagy bold. Lehet esetleg szám is, amely kifejezi, hogy mennyire legyen „kövér”.
font – ezzel a tulajdonsággal megadhatjuk összefoglalva a fenti tulajdonságok értékeit egy csoportban.
font-variant – kiskapitális betűk megadására alkalmas. A kiskapitális formázás esetén minden betűt naggyá alakítunk, de az eredetileg is naggyal írt betű méret nagyobb lesz. Lehetséges értéke: small-caps.
Példa betűformázásra:
A fenti formázásban az alapbetűbeállítások: Book Antiqua betűtípus, 12-es méret, dőlt stílus. A cím esetén a betűtípus marad a Book Antiqua (nem kell megadni, mert a body részben van a cím), 20-as méret, félkövér, kiskapitális (a B betű nagyobb és minden más betűt is naggyá alakít). A dőltséget le kell venni, ha nem szeretnénk a címre is, ezért került a normal kulcsszó ide.
A h1 címnek adott formázásokból a méret és a félkövérség összevonhatóak a font tulajdonságot használva:
font { 20px, bold; }
Hogyan használjuk a class tulajdonságot:
A fenti példában header néven csoportosítottuk azokat a formázásokat, amelyeket a mindkét szintű címre szeretnénk alkalmazni a HTML dokumentumban. A CSS fájlban a név elé tett ponttal jelöljük, hogy osztályként fogjuk használni ezt a részt. HTML dokumentumban pedig a class tulajdonság értéke lehet akár több HTML címke esetén is.
Különbség class és id között:
Új HTML tulajdonság ebben a leckében:
class – a CSS fájlba összevonhatóak egy név alá egy vagy több formázás. Az elnevezést egy pont karakterrel kell kezdeni. Ezt a formázást később több HTML címkére is alkalmazhatjuk a class tulajdonságot mellékelve a címkéhez és a stíluscsoport nevét használva.
Új CSS kulcsszavak ebben a leckében:
font-family – a betűtípus megadására használhatjuk ezt a tulajdonságot. Felsorolhatunk többet is, ha esetleg a böngésző nem támogatná valamelyiket.
font-size – a betűméret meghatározására alkalmas tulajdonság.
font-style – dőlt betűk előállítására alkalmas. Értékei lehetnek: normal vagy italic (dőlt).
font-weight – félkövér betűk előállítására alkalmas. Értékei lehetnek: normal vagy bold. Lehet esetleg szám is, amely kifejezi, hogy mennyire legyen „kövér”.
font – ezzel a tulajdonsággal megadhatjuk összefoglalva a fenti tulajdonságok értékeit egy csoportban.
font-variant – kiskapitális betűk megadására alkalmas. A kiskapitális formázás esetén minden betűt naggyá alakítunk, de az eredetileg is naggyal írt betű méret nagyobb lesz. Lehetséges értéke: small-caps.
Példa betűformázásra:
A fenti formázásban az alapbetűbeállítások: Book Antiqua betűtípus, 12-es méret, dőlt stílus. A cím esetén a betűtípus marad a Book Antiqua (nem kell megadni, mert a body részben van a cím), 20-as méret, félkövér, kiskapitális (a B betű nagyobb és minden más betűt is naggyá alakít). A dőltséget le kell venni, ha nem szeretnénk a címre is, ezért került a normal kulcsszó ide.
A h1 címnek adott formázásokból a méret és a félkövérség összevonhatóak a font tulajdonságot használva:
font { 20px, bold; }
Hogyan használjuk a class tulajdonságot:
A fenti példában header néven csoportosítottuk azokat a formázásokat, amelyeket a mindkét szintű címre szeretnénk alkalmazni a HTML dokumentumban. A CSS fájlban a név elé tett ponttal jelöljük, hogy osztályként fogjuk használni ezt a részt. HTML dokumentumban pedig a class tulajdonság értéke lehet akár több HTML címke esetén is.
Különbség class és id között:
- Egy HTML dokumentumon belül nem fordulhat elő ugyanaz az azonosító (id) kétszer, viszont ugyanarra az osztályra hivatkozhatunk többször, különböző HTML címkéből.
- Egy HTML címkének csak egy azonosítót adhatunk, osztályt viszont többet alkalmazhatunk ugyanarra a címkére. Fontos, hogy csak egyszer írjuk le a class tulajdonságot és az értékeket szóközzel elválasztva soroljuk fel.
Feladatok
1. Állítsa be weblapjának alapértelmezett betûtípust a Calibri, 18px méretûre. Alkalmazza ezeket a beállításokat a body címkére is.
Tekintsd meg az eredményt
2. Hozzon létre egy class CSS fájlt az ff névvel, amely a következõ beállításokat tartalmazza: Arial font, 14px méret és vastagított, és alkalmazza ezt az class-t a kép feliratára a
Tekintsd meg az eredményt
3. Állítsd be a h1 címkéket 24px méretűre, a betűtípustkis kapitálisra és a h2 címkéket 20px méretre.
Tekintsd meg az eredményt
4. A toplangs.html fájlbanadjon minden páros sorhoz, amelyet sornak nevezünk, majd alkalmazza a következő beállítást a styles.css fájlba az adott class-hoz, amely félkövér betűtípust és háttérszínt ad.
Tekintsd meg az eredményt
Kérdőív
1. Melyik beállítás helytelen?
2. Hogyan nevezhetünk el egy imp nevű CSS osztályt egy CSS fájlban?
3. A következők esetében melyik kijelentés igaz?
CSS settings:
CSS settings:
.fc {color: red;}
.fi {font-style: italic;}
HTML code:<p class="fc fi">Some text</p>
4. Ha ugyanazokat a CSS-beállításokat kívánjuk alkalmazni egy HTML-fájl fejléceire és a második szintű fejlécekre
Kiegészítő információk
