Jste zde

13.1 CSS - vlastnosti seznamů (studijní text)

Jelikož oba dva typy seznamů obsahují převážně text, platí na ně stejné CSS vlastnosti jako pro písmo či text.

list-style-type

  • nastaví požadovaný typ odrážky nebo číslování
  • hodnotou pro netříděné seznamy může být:
    • disc (puntík)
    • circle (kolečko)
    • square (čtvereček)
  • hodnotou pro tříděné seznamy může být
    • decimal (desítkové číslování)
    • upper-alpha (velká písmena)
    • lower-alpha (malá písmena)
    • upper-roman (velká římská číslice)
    • lower-roman (malá římská číslice)
  • pro oba dva typy seznamů
    • none (vypne odrážky nebo číslování)
ul li {list-style-type: circle}
ol li {list-style-type: upper-alpha}

list-style-position

  • nastaví, zda se má odrážka zobrazit mimo úroveň textu nebo v úrovni textu
  • praktické využití je minimální
  • hodnotou může být:
    • outside (mimo úroveň textu - výchozí, není potřeba definovat)
    • inside (v úrovni textu)
ul li {list-style-position: inside}

list-style-image

  • nastaví místo odrážky obrázek
  • pozor: obrázek musí mít správné rozměry (malé rozměry v řádu jednotek pixelů)
  • hodnotou je URL neboli cesta k obrázku (cesta je v závorce oddělena anglickými uvozovkami)
ul li {list-style-image: url('img/odrazka2.gif')}

Podmínkou umístění obrázku "odrazka2.gif" ve složce "img".