Listák formázása

A CSS lista formázásai segítségével a lista előtti térközök, a lista elem vagy lista kép állítható be.

Lista jelölők

Felsorolt listák esetén az egyes listaelemek sorrendisége nem jelent információt, ezért minden listaelem előtt ugyanazt a jelölőt szokás alkalmazni. Érdemes megfigyelni a következő példában, hogy a formázás a lista (ul) és nem az egyes listaelemek (li) tekintetében történik.

ul.disc   {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none   {list-style-type: none}

Számozott listák esetén jóval több lehetőségünk van, bár ezek közül is csak néhány tartozik a gyakrabban használtak közé.

ol.decimal {list-style-type: decimal}
ol.lroman  {list-style-type: lower-roman}
ol.uroman  {list-style-type: upper-roman}
ol.lalpha  {list-style-type: lower-alpha}
ol.ualpha  {list-style-type: upper-alpha}

Az előre adott lehetőségeket magunk is tovább bővíthetjük azzal, hogy tetszőleges képet alkalmazhatunk listajelölőnek:

list-style-image: url('arrow.gif')

A listajelölő pozíciója

A listajelölő a szöveg belsejében, vagy az előtt is szerepelhet:

ul.inside {
  list-style-position: inside
}
ul.outside {
  list-style-position: outside
}

Közös deklaráció

A listaelemek esetén is használható a már jól megszokott, rövidebb írásmódot lehetővé tevő közös deklaráció. Erre is láthatunk egy példát:

list-style: square inside url('arrow.gif')