CSS lista formázás

Ebből a cikkből megismerkedhetsz a listák formázási lehetőségeivel. Egy listának nem csak a színét lehet beállítani, hanem azt is, hogy milyen ikon jelenjen meg a felsorolások előtt.

CSS alapok (A CSS alapjainak összefoglalója) című cikk nyitóképe

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

CSS kód

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

Eredmény

  • Első elem
  • Második elem
  • Harmadik elem

>> 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

CSS kód

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

Eredmény

  • Első elem
  • Második elem
  • Harmadik elem

>> 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

CSS kód

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

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

Eredmény

  • Első elem
  • Második elem
  • Harmadik elem
  • Első elem
  • Második elem
  • Harmadik elem

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

CSS kód

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

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

Eredmény

  • Első elem
  • Második elem
  • Harmadik elem
  • Első elem
  • Második elem
  • Harmadik elem

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

CSS kód

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

Eredmény

  • Első elem
  • Második elem
  • Harmadik elem

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