Ako vytvoriť viacúrovňový zoznam v HTML

Vytvorenie viacúrovňového zoznamu v HTML je ťažšie ako vytvorenie viacúrovňového zoznamu v textovom procesore, ale stále sa dá dosiahnuť pomocou HTML a CSS. Nižšie sú uvedené kroky na vytvorenie viacúrovňového zoznamu v HTML pomocou CSS.

Predtým, než sa pokúsite vykonať nasledujúce kroky, uvedomte si, že na vytvorenie viacúrovňového zoznamu v HTML musíte vnoriť zoznam do inej položky zoznamu. Tiež, pretože HTML má len zoznam odrážok alebo zoznam čísel, ak chcete zmeniť typ zoznamu, musíte použiť CSS na vytvorenie nového typu štýlu.

Príklad HTML

Nižšie je uvedený príklad, ako možno viacúrovňový zoznam vykonať v jazyku HTML pomocou kódu HTML a štýlu CSS definovaného v značkách HTML. V tomto príklade máme dve položky zoznamu a v druhej položke zoznamu iný usporiadaný zoznam s typom zoznamu nižších alfa-štýlov, aby sme vytvorili štýl zoznamu a, b atď.

  1. najprv
  2. druhý 
    1. Sub of Second
    2. Ďalší Sub
  3. tretina
  4. štvrtý

Poznámka: V našom príklade sme použili niektoré ďalšie polstrovacie a okrajové štýly, aby sme sa mohli prispôsobiť našim globálnym hodnotám CSS a poskytli príklad, ako môžete pridať alebo zmenšiť priestor a odsadenie.

Príklad výstupu

  1. najprv
  2. druhý
    1. Sub of Second
    2. Ďalší Sub
  3. tretina
  4. štvrtý

Príklad CSS a HTML

Vyššie uvedené riešenie funguje skvele, ak potrebujete vytvoriť viacúrovňový zoznam niekoľkokrát. Avšak, ak máte v úmysle mať niekoľko viacúrovňových zoznamov na vašej stránke, bolo by lepšie zahrnúť kód CSS, podobný príkladu uvedenému nižšie, do súboru CSS. V našom príklade sme vytvorili dve triedy s názvom "roman" a "square" a nazývame ich v HTML kóde.

Kód CSS 

 .roman {list-style-type: lower-roman;}. square {list-style-type: square; margin-left: -2em;}

HTML kód 

  • najprv
  • druhý 
    • Sub of Second
    • Ďalší Sub
  • tretina
  • štvrtý

Príklad výstupu

  • najprv
  • druhý
    • Sub of Second
    • Ďalší Sub
  • tretina
  • štvrtý

Dostupné hodnoty typu CSS zoznamu

Nižšie je uvedený zoznam ďalších hodnôt štýlov CSS zoznamu-štýlov, ktoré možno použiť namiesto príkladov, ktoré sme ukázali predtým. Taktiež sme uviedli stručný popis každej hodnoty.

Poznámka: Nie všetky tieto hodnoty fungujú alebo sa zobrazujú vo všetkých prehliadačoch.

disk - Malý pevný kruh (znázornený vyššie).

kruh - Malý prázdny kruh (zobrazený vyššie).

square - Pevné námestie.

desatinné - desatinné číslo začínajúce na "1." (znázornené vyššie).

decimal-lead-zero - Desiatkové číslo začínajúce 0 (napr. 01, 02, 03 atď.).

lower-roman - Rímska číslica začínajúca na „i.“.

upper-roman - Veľké rímske číslo začínajúce na "I.".

lower-greek - Malé grécke písmo.

dolná latina - malá latinka

horná latina - veľké latinčina

arménsky - tradičné arménske číslovanie

gruzínčina - tradičné gruzínske číslovanie

low-alpha - Malé abecedné písmená začínajúce písmenom „a“. (znázornené vyššie).

upper-alpha - Veľké písmená abecedy začínajúce písmenom „A.“.

žiadne - nič nezobrazovať.