Egy listát elég sokféleképpen lehet kezelni, trükközhetsz vele már a HTML kódok szintjén is, viszont a CSS tekintetében is számos lehetőséget kínálnak. Ha nem tetszik a kis basic fekete pontos lista és a 1-től x-ig, nagyon egyszerűen formázhatod őket!

Számozott listák, és formázásuk

Számozott listák HTML kódja:

Az <ol></ol> tag.ek foglalják magában a listát, és <li></li> elemek adják meg a lista egyes pontjait. Bár a listák definiálásához nem kell egészen tag-ekre lebontanunk a dolgot (mind a gportálos és szinte bármelyik egyszerű kis web-es szövegszerkesztő gombnyomásra megteszi ezt nekünk), de érdemes ismerni a felépítést, mert sokat segíthet a formázás során.

Formázási lehetőségek:

list-style-position, vagyis a kis listajel helyzete, értéke lehet az inside(vagyis valamivel közelebb van, együtt mozog a lista elemmel, erre szép példa az hogyha középre igazítod akkor mozog vele a listajel), és az outside (a szövegen kívül, pl: ha középre igazítod a listát a jel a helyén marad) ami a listák alapértéke ha nem állítod át.

list-style-type, ezzel tudod megváltoztatni a listajel típusát, a számformátumot.
Értékei a következők:

Ezeken felül van még a none érték, amikor nincs semmilyen jel.

A számozott listák esetében lehetőséged van már a HTML tag szinten megbűvölni őket.

Így fordítod meg: <ol reversed></ol>

És így adsz neki kezdőszámot: <ol start="100"></ol>

Ugye máris jobban nézhet ki a kis számozott listád?

Pontozott listák, és formázásuk

Pontozott listák HTML kódja:

<ul>
<li> Első </li>
<li> Második </li>
<li> Harmadik </li>
</ul>

Felépítése roppant hasonló mint a számozott listáké és a formázása is hasonló.

list-style-position, vagyis a kis felsorolás jelek helyzete. Ez lehet inside ilyenkor a listaelemmel együtt "mozog" és outside amikor elkülönül.

list-style-image, itt saját listajelet adhatsz meg. A helyes formátum, hasonlóan pl a háttér esetében: list-style-image: url("kép elérési útja");

list-style-type , a listajel típusa: disc, circle, square, és temészetesen a none

CSS-ben így hivatkozhatsz rájuk:

ul {} - pontozott lista vagyis a lista ikonok, és a lista elemek

ul li{} -pontozott lista elemei, ikonok nélkül csak a szöveg

ol{} - számozott lista  vagyis a lista ikonok, és a lista elemek

ol li {}- számozott lista elemei ,ikonok nélkül csak a szöveg

Természetesen, a fentebb tárgyalt tipikusan listás tulajdonságokon túl szinte az összes CSS tulajdonság felírható rájuk is, szín, méret, betűtípus.
Számtalan lehetőségünk van, a kis listákból kihozni a lehető legtöbbet, és a lehető leg kreatívabbat, és mindezt egész egyszerűen!

Ötletek, és érdekes megoldások hogy mit lehet kihozni egy egyszerű listából: # #