CSS lista formázás

Arról, hogy hogyan kell létrehozni egy HTML listát már tanultunk. Tudjuk jól, hogy vannak rendezett (számozott) és rendezetlen (számozatlan) listák, most pedig megtanuljuk azt, hogy hogyan tudjuk formázni ezeknek a listáknak, felsorolásoknak a megjelenését. Természetesen egy listaelemnek formázhatjuk a színét és a háttérszínét is, de itt most elsősorban nem erről lesz szó, hanem arról, hogy hogyan formázhatjuk a listaelemek előtt elhelyezkedő jelöléseket.

Különböző jelöléseket rakhatunk a listaelemek elé, például:

• kör
• négyzet
• betű
• római szám
• kép
• stb

Kör használata listaelemek előtt

Kezdjük az első lehetőséggel, ha azt szeretnénk egy üres kör álljon a listaelemeink előtt, akkor az alábbi CSS kódot kell alkalmaznunk a listánkra.

Szintaxis

list-style-type: circle;
Code language: PHP (php)

Példa

ul {
  list-style-type: circle;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Négyzet használata listaelemek előtt

A második eshetőséggel egy tömött négyzetet helyezhetünk el a listaelemeink előtt.

Szintaxis

list-style-type: square;
Code language: PHP (php)

Példa

ul {
  list-style-type: square;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Betű használata listaelemek előtt

Lehetőségünk van akár kis- vagy nagybetűt is elhelyeznünk a listában szereplő elemek előtt.

Szintaxis

list-style-type: lower-alpha;

VAGY

list-style-type: upper-alpha;
Code language: PHP (php)

Példa

ul.kicsi {
  list-style-type: lower-alpha;
}

ul.nagy {
  list-style-type: upper-alpha;
}
Code language: CSS (css)

Római szám használata listaelemek előtt

Most pedig nézzük meg azt, hogy hogyan sorszámozhatjuk a listaelemeinket római számok alapján.

Szintaxis

list-style-type: lower-roman;

VAGY

list-style-type: upper-roman;
Code language: PHP (php)

Példa

ul.kicsi {
  list-style-type: lower-roman;
}

ul.nagy {
  list-style-type: upper-roman;
}
Code language: CSS (css)

Kép használata listaelemek előtt

Nem a legjobb megoldás, mert meg kell hívni a szervert, hogy letudjuk kérni a képet, amely nagy forgalom és sok listaelem esetén megterhelheti a szervert, de ettől függetlenül van arra is lehetőségünk, hogy egy képet jelentessünk meg a listánkban szereplő elemek előtt.

Szintaxis

list-style-image: url('kiskep.jpg');
Code language: PHP (php)

Példa

ul {
  list-style-image: url('kiskep.jpg');
}
Code language: CSS (css)

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!