Kako stvoriti višerazinski popis u HTML-u

Stvaranje popisa na više razina u HTML-u teže je od stvaranja višerazinskog popisa u programu za obradu teksta, ali se ipak može postići korištenjem HTML-a i CSS-a. U nastavku su opisani koraci za stvaranje popisa u više razina u HTML-u uz pomoć CSS-a.

Prije nego što pokušate sljedeće korake, shvatite da za izradu višerazinskog popisa u HTML-u morate umetnuti popis u drugu stavku popisa. Također, budući da HTML ima samo popis oznaka ili popis brojeva, ako želite promijeniti vrstu popisa, morate koristiti CSS za stvaranje nove vrste stila.

HTML primjer

U nastavku je primjer kako se višerazinski popis može izvršiti u HTML-u koristeći HTML i CSS stil definiran u HTML oznakama. U ovom primjeru imamo dvije stavke popisa i u drugoj stavci popisa drugi naručeni popis s nižim alfa-stilom-stilom za stvaranje stila popisa a, b, itd.

  1. Prvi
  2. Drugi 
    1. Sub of Second
    2. Drugi pod
  3. treći
  4. Četvrti

Napomena: U gornjem primjeru koristimo neke dodatne stilove oblaganja i margina kako bismo se prilagodili našim globalnim CSS vrijednostima i dali primjer kako možete dodati ili smanjiti prostor i uvlačenje.

Primjer izlaza

  1. Prvi
  2. Drugi
    1. Sub of Second
    2. Drugi pod
  3. treći
  4. Četvrti

CSS i HTML primjer

Gore navedeno rješenje izvrsno radi ako je potrebno samo nekoliko puta kreirati višerazinski popis. Međutim, ako namjeravate imati više popisa na više razina na cijeloj web-lokaciji, bilo bi bolje da CSS-kod, sličan primjeru u nastavku, uključite u CSS datoteku. U našem primjeru, stvorili smo dvije klase pod nazivom "roman" i "kvadrat" i pozivamo ih u HTML kod.

CSS kod 

 .roman {list-style-type: donji-roman;}. kvadrat {vrsta-tipa-lista: kvadrat; margina-lijevo: -2em;}

HTML kôd 

  • Prvi
  • Drugi 
    • Sub of Second
    • Drugi pod
  • treći
  • Četvrti

Primjer izlaza

  • Prvi
  • Drugi
    • Sub of Second
    • Drugi pod
  • treći
  • Četvrti

Dostupne vrijednosti stila tipa CSS popisa

U nastavku se nalazi popis drugih vrijednosti stila tipa CSS popisa koje se mogu koristiti umjesto primjera koje smo ranije pokazali. Uključili smo i kratak opis svake vrijednosti.

Napomena: sve ove vrijednosti ne funkcioniraju ili se pojavljuju u svim preglednicima.

disk - Mali čvrsti krug (prikazano gore).

krug - Mali prazan krug (prikazano gore).

kvadrat - Čvrsti kvadrat.

decimal - decimalni broj koji počinje s "1." (prikazano gore).

decimal-prednja-nula - decimalni broj koji počinje s 0 (npr. 01, 02, 03 itd.).

niže-rimski - Mala slova rimska oznaka koja počinje s "i.".

gornji-roman - velika slova rimski broj koji počinje s "I.".

donji-grčki - Mala slovačka grčki.

donji latinski - Mala slovačka

gornji latinski - velika slova latinica

jermenski - Tradicionalno armensko numeriranje

georgian - tradicionalno gruzijsko numeriranje

lower-alpha - Abecedna mala slova koja počinju s "a." (prikazano gore).

upper-alpha - Abecedna abecedna slova koja počinju s "A.".

none - Ne pokazuj ništa.