Predmetová komisia ELT a INF

Učebnica CSS - Zoznamy

CSS - Basic - Lists

« Predchádzajúca Ďalšia kapitola »

CSS vlastnosť zoznamu Vám umožní:

  • Nastaviť rôzne značky pre usporiadané číslované zoznamy
  • Nastaviť rôzne značky pre neusporiadané zoznamy (odrážky)
  • Nastaviť obrázok ako značku položky zoznamu

Zoznamy

V HTML existujú dva typy zoznamov:

  • neusporiadané zoznamy - zoznamy položiek sú označené guličkami - odrážkami
  • usporiadané zoznamy - zoznamy položiek sú označené číslami alebo písmenami

S CSS je možné štylovať t.j. napr. obrázok môže byť použitý ako značka pre položku zoznamu.

Rôzne značky položiek zoznamu

Typy značiek položiek zoznamu sú uvedené v list - style - type vlastností

Príklad

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Vyskúšajte si to »

Niektoré z hodnôt vlastností sú pre neusporiadané zoznamy a niektoré pre usporiadané zoznamy.
Hodnoty pre nečíslované zoznamy

Vlastnosť Popis
none Nič
disc Značka je koliečko
circle Značka je kruh
square Značka je štvorec

Hodnoty pre číslované zoznamy

Vlastnosť Popis
armenian Značka vychádza z Arménskeho číslovania
decimal Značka je číslo
decimal-leading-zero Značka je číslo, polstrované od úvodných núl ( 01, 02, 03, atď )
georgian Značkou je tradičné Gruzínske číslovanie (an, ban, gan, atď.)
lower-alpha Značkou sú malé písmená abecedy(a, b, c, d, e, atď.)
lower-greek Značkou sú grécka abeceda (alpha, beta, gamma, atď.)
lower-latin Značkou sú malé písmená latinskej abecedy (a, b, c, d, e, atď.)
lower-roman Značkou sú malé rímske čísla (i, ii, iii, iv, v, atď.)
upper-alpha Značkou sú veľké písmená (A, B, C, D, E, atď.) 
upper-latin Značkou sú veľké písmená latinskej abecedy (A, B, C, D, E, atď.)
upper-roman Značkou sú veľké rímske čísla (I, II, III, IV, V, atď.)

Obrazok ako značka položky zoznamu

Ak chcete určiť obrázok ako značku položky zoznamu, použite list - style - image vlastnosť

Príklad

ul
{
list-style-image: url('sqpurple.gif');
}

Vyskúšajte si to »

Vyššie uvedený príklad sa nezobrazí rovnako vo všetkých prehliadačoch. IE a Opera zobrazí obrazok - značku trochu vyššia, ako Firefox, Chrome a Safari.

Ak chcete aby obrazok - značka bola umiestnené rovnako vo všetkých prehliadačoch - riešením je crossbrowser ktoré je vysvetlené nižšie.
Crossbrowser riešenia

Nasledujúci príklad zobrazuje obraz - značku rovnako vo všetkých prehliadačoch.

Príklad

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

Vyskúšajte si to »

Zoznam - Dedenie vlastníctva

Je tiež možné špecifikovať všetky vlastnosti zoznamu v jednej hodnote vlastnosti. Toto sa nazýva dedenie vlastností.

Dedenie vlastníctva používaný pre zoznamy je list - style vlastnosti

Príklad

ul
{
list-style: square url("sqpurple.gif");
}

Vyskúšajte si to »

Pri použití dedenia vlastností je poradie hodnôt:

  • list - style - type
  • list - style - polohy (pre opis pozri CSS vlastnosti tabuľka nižšie)
  • list - style - image

Nezáleží na tom, ak jedna z vyššie uvedených hodnôt chýba, ak je zvyšok v uvedenom poradí.

Ďalšie príklady

Všetky rôzne list - item značky pre zoznamy
Tento príklad ukazuje všetky rôzne list - item značky v CSS.

« Predchádzajúca Ďalšia kapitola »