CSS - intermediate - Lecke száma 6
Listák formázása
Ebben a leckében néhány listára vonatkozó formázást próbálunk ki. A HTML formázásból átköltöztetjük a listatípus meghatározását a CSS-be, majd képet használunk listajelnek. Kipróbáljuk, hogy hogyan mutat a listajel a listaelemen (formázásán) belül vagy kívül.
Új CSS kulcsszavak ebben a leckében:
list-style-type – ez a kulcsszó alkalmas a lista típusának a megadására. A HTML résznél tanult type tulajdonság helyett használandó. Néhány lehetséges érték: square (négyzet), circle (kör), disc (körlap – ez a rendezetlen lista alapértelmezett értéke), decimal (számozás – ez a rendezett lista alapértelmezett értéke), upper-roman (nagy római számok), lower-roman (kis római számok), lower-alpha (kisbetűk), upper-alpha (nagy betűk).
list-style-image – ez a kulcsszó alkalmas arra, hogy a rendezetlen listajelek helyett képet jelenítsünk meg.
list-style-position – ezzel a kulcsszóval megadhatjuk, a listajelek helyzetét. Lehetnek a felsoroláson belül (inside) vagy kívül (outside). Ez a háttér vagy keretállítás esetén látványos, mivel a listajel kívül vagy belül esik a formázott részen. Lehetséges értékek: inside, outside.
Példa kép listajelként való megjelenítésére:
Új CSS kulcsszavak ebben a leckében:
list-style-type – ez a kulcsszó alkalmas a lista típusának a megadására. A HTML résznél tanult type tulajdonság helyett használandó. Néhány lehetséges érték: square (négyzet), circle (kör), disc (körlap – ez a rendezetlen lista alapértelmezett értéke), decimal (számozás – ez a rendezett lista alapértelmezett értéke), upper-roman (nagy római számok), lower-roman (kis római számok), lower-alpha (kisbetűk), upper-alpha (nagy betűk).
list-style-image – ez a kulcsszó alkalmas arra, hogy a rendezetlen listajelek helyett képet jelenítsünk meg.
list-style-position – ezzel a kulcsszóval megadhatjuk, a listajelek helyzetét. Lehetnek a felsoroláson belül (inside) vagy kívül (outside). Ez a háttér vagy keretállítás esetén látványos, mivel a listajel kívül vagy belül esik a formázott részen. Lehetséges értékek: inside, outside.
Példa kép listajelként való megjelenítésére:
A fenti példában az x.png képet használtuk listajelként, azaz a négyzetecske helyett jelenik meg az x jel. A kép méretét képszerkesztővel érdemes állítani. CSS-ben nincs egy utasítás, amivel ez megoldható, azaz komplikáltabb.
Példa listajel elhelyezésére:
A fenti képen a listaelemekre állítottunk keretet. A keret alapértelmezett módon a listajel és szöveg közé kerül. 
Ha a listajelet is a kereten belül szeretnénk hozni, a list-style-position tulajdonság értékét inside-ra állíthatjuk.
Feladatok
1. Szerkessze a index.html és toplangs.html fájlokat, és távolítsa el az inline típust a rendezetlen listákból, amelyeket az előző leckékbe beállítottunk a style.css fájtba, majd rendeljen négyzet alakú golyókat minden rendezetlen listához.
Tekintsd meg az eredményt
2. Módosítsa a toplangs.html fájlt, adjon hozzá egy osztálynevet a rendezetlen listához, majd a stílusfájlban tekintse meg az osztályt és állítsa be a bullet.png a képmappából a lista golyóképét.
Tekintsd meg az eredményt
3. Ad hozzá az újonnan létrehozott style-d osztályt az előző gyakorlatból a index.html , a rendezetlen listákhoz.
Tekintsd meg az eredményt
Kérdőív
1. A következő CSS-beállítások közül melyik hoz létre a kisbetűs listát?
2. Az alábbiak közül melyik nem használható felsorolási jelzőként?
3. Mi a helyes módja annak, hogy egy képet felsorolásjelzőként állítsunk be egy listához?
4. Az alábbi CSS beállításokkal kapcsolatban melyik állítás igaz?
li{
li{
border-right: solid;
list-style-position: inside;
}Kiegészítő információk
