Za implementaciju se koristi oznaka ol. Stiliziranje brojeva linija (znamenki) u poredanim popisima ol. Lijep i ispravan način

Pozdrav, dragi čitatelji! Danas, u nastavku serije tekstova pod naslovom “ Osnove HTML-a„Želim vas upoznati s algoritmom stvaranja popisi html uz pomoć oznake ul i li (popis s oznakama), ol i li (numerirani popis), dl, dt, dd (popis definicija).

Sada ću vas nastaviti upoznavati s najčešće korištenim sa html oznakama, koji se koriste za izradu popisa na stranicama web mjesta. Ako netko ne zna što je to, sigurno će nakon dolje dobivenih informacija odmah shvatiti o čemu govorimo, budući da je ovaj oblik prezentiranja materijala vrlo čest.

HTML popisi s grafičkim oznakama - ul i li oznake

Popis s grafičkim oznakama bit će definiran oznakom ul. Između početnih i završnih oznaka ul nalaze se elementi popisa, od kojih se sadržaj svakog mora nalaziti između početnih i završnih oznaka li. Dopustite mi da odmah napomenem da je oznaka ul uparena (prisutnost oznake otvaranja i zatvaranja), a također i na razini bloka, odnosno čini spremnik koji uključuje elemente (redove) koje svaki put formira oznaka li. U skladu s tim, oznaka li je uparena i mala slova.

Zadano izgled marker je predstavljen ispunjenim krugom. Međutim, možete promijeniti njegov izgled korištenjem atributa type koji ima sljedeće vrijednosti: disk, krug, kvadrat. Vrijednost diska (koja određuje izgled markera kao ispunjenog kruga) je zadana. To jest, ako atribut tipa nije naveden, tada će izgled markera izgledati kao ispunjeni krug. Ako dodamo ove atribute oznaci ul, dobivamo sljedeće opcije:

Naravno, svaki marker zaseban element popis s grafičkim oznakama Možete mu dati vlastiti izgled navođenjem odgovarajućih vrijednosti za atribut tipa.

Numerirane HTML liste - ol i li oznake

Sada da vidimo kako se numerirani popis formira korištenjem ol oznaka (oznaka bloka i para slična ul). Oznaka li se ovdje također koristi kao oznaka koja definira elemente numerirane liste u HTML-u. Numerirana lista je zbirka numeriranih elemenata. Vrsta numeriranja određena je atributom type koji može poprimiti sljedeće vrijednosti:

• A - velika latinična slova;
• a - mala latinična slova;
• I - veliki rimski brojevi;
• i - mala slova rimskih brojeva;
• 1 - arapski brojevi

Također možete dati numerirani popis gdje su elementi numerirani obrnutim redoslijedom, na primjer: 3, 2, 1. To se radi korištenjem rezervnog atributa oznake ol.

Također postoji opcija za početak popisa s grafičkim oznakama od bilo kojeg broja osim 1. Da biste to učinili, možete koristiti atribut start i nije važno na koju vrijednost je postavljen atribut tipa. Pogledajte primjer korištenja atributa imena u kombinaciji s različitim vrijednostima atributa tipa (1 i I):

Popisi HTML definicija - dl, dd, dt oznake

Druga vrsta html popisa je popis definicija. Formira se na sljedeći način. Sadržaj ovog popisa nalazi se između otvarajuće i završne dl oznake, koje čine spremnik. Oznaka dt definira pojam, a oznaka dd opisuje taj pojam.

Kao što vidite, sadržaj oznake dt, koja je pojam, pomaknut je ulijevo, a sadržaj oznake dd, koja je definicija ovog pojma, ispisan je kurzivom. Sve to postižemo korištenjem različitih CSS stilova, o čemu ćemo sigurno govoriti u nadolazećim publikacijama.

Usput, moderne stvarnosti su takve jezik html ne može se promatrati odvojeno od, stoga, kako ne biste propustili ove važne materijale, pretplatite se na ažuriranja bloga putem RSS feeda ili putem e-pošte. Ovo zaključuje temu današnjeg članka; ako ste dobili potrebne informacije, nemojte odbiti koristiti gumbe društvenih mreža.

Hipertekstualni označni jezik HTML ima oznaku

, koristi se za izradu popisa s grafičkim oznakama. Podržavaju ga svi moderni preglednici i omogućuje prikaz elemenata redoslijedom koji ne zahtijeva numeriranje. Na primjer, vrlo često prikazuje stavke jelovnika i sve što je vezano uz popise na stranici: jela, proizvode, opremu, alate i još mnogo toga što je potrebno navesti bez navođenja prioriteta pojedine stavke.

Sintaksa oznake

• Element #1
• Element #2
• Element #3
• ...

Ovaj se kod prevodi u popis s grafičkim oznakama na web mjestu:

• Element #1
• Element #2
• Element #3

Označiti

zahtijeva obaveznu upotrebu završne oznake
.

Za formiranje elemenata popisa koristi se uparena oznaka. Između početnih i završnih oznaka nalaze se pojedinačne riječi, fraze, odlomci, slike, dijelovi koda i još mnogo toga što je sadržaj popisa s grafičkim oznakama.

Što može biti sadržaj popisa s grafičkim oznakama?

To mogu biti različiti tekstovi, uključujući pojedinačne riječi, izraze i odlomke, slike, ugniježđene popise, dijelove php koda i još mnogo toga što treba jednostavno označiti.

Svaka stavka popisa s grafičkim oznakama prema zadanim je postavkama uvučena 40 piksela udesno. Korištenje CSS stilovi, možemo promijeniti prikaz ovaj popis prema vlastitom nahođenju. Označiti

temelji se na blokovima, tako da zauzima cijelo područje koje mu je dostupno, ograničeno rubom zaslona, ​​okvirom tablice ili drugim elementima stranice.
Dopušteni su privici popisa unutar popisa.

Na primjer

• Element #1
• • Stavka #2-1
  • Element #2-2
  • Element #2-3
• Element #3
• ...

Atributi i svojstva oznake

Široko korišten atribut oznake

je atribut tipa koji pokazuje kako će marker popisa izgledati. Može uzeti sljedeće vrijednosti

1. type="disc" - marker u obliku ispunjenog kruga (ova vrijednost je zadana). Primjer diska bio je malo viši.

2. type="circle" - marker u obliku prozirnog kruga

Na primjer:

• Element #1
• Element #2

• Element #1
• Element #2

3. type="square" - marker u obliku kvadrata

Na primjer:

• Element #1
• Element #2

A evo kako to izgleda na stranici:

• Element #1
• Element #2
Napomena 1

U CSS-u, vrsta grafičke oznake navedena je pomoću atributa tipa stila liste:

• ...

Pogledajmo koje vrijednosti list-style-type može uzeti:

• disk - marker u obliku kruga (primjer je gore)
• krug - marker u obliku prozirnog kruga (primjer je gore)
• kvadrat - marker u obliku kvadrata (primjer je gore)
• decimalni - marker u obliku numerirane liste arapskim brojevima: 1, 2, 3, ...
• decimal-leading-zero - oznaka u obliku numerirane liste arapskim brojevima s početnom nulom: 01, 02, 03, ...
• donja latinica - oznaka u obliku numeriranog popisa na latinici malim slovima: i, ii, iii, iv, v
• gornji roman - oznaka u obliku numeriranog popisa latinicom velikim slovima: I, II, III, IV, V
• donja latinica - marker u obliku popisa na latiničnoj abecedi malim slovima: a, b, c, d, ...
• upper-latin - marker u obliku popisa na latiničnom pismu velikim slovima: A, B, C, D, ...
• donji-grčki - oznaka u obliku popisa na grčkom alfabetu malim slovima
• upper-greek - oznaka u obliku popisa u grčkom alfabetu velikim slovima
Napomena 2

Atribut se može dodijeliti samoj oznaci

, i oznake
• . Prilikom postavljanja atributa oznaci
  sve stavke popisa bit će prikazane kako je naznačeno atributom. Ali ovom ili onom elementu možemo dati vlastiti prikaz. Primjer na slici:

  Kod izgleda ovako:

  • Element #1
  • Element #2
  • Element #3

  • Element #1
  • Element #2
  • Element #3

  Promjena markera oznaka

  koristeći CSS

  Stavke popisa s grafičkim oznakama stvorene oznakom

  , mogu se označiti proizvoljnim slikama. CSS se koristi za promjenu tipa markera. Na primjer

  • Element #1
  • Element #2
  • Element #3

  A ovako to izgleda na stranici:

  • Element #1
  • Element #2
  • Element #3

  C koristeći CSS možemo postaviti druge vrste prikaza markera. Ali morate to zapamtiti kada specificirate bilo koji stil za oznaku

  , odnosi se na sve elemente liste.

  Jedina razlika je u tome što je ova oznaka striktno napravljena za numeriranje popisa. Naziv oznake dolazi od engleske kratice "Ordered List" - numerirani popis.

  Sintaksa oznake

  1. Element #1
  2. Element #2
  3. Element #3
  4. ...

  Gdje atribut type="value" može uzeti sljedeće vrijednosti

  • A - postavlja oznake u obliku velikih latiničnih slova (A, B, C..);
  • a - postavlja oznake u obliku malih latiničnih slova (a, b, c..);
  • I - postavlja oznake u obliku velikih rimskih brojeva (I, II, III, IV..);
  • i - postavlja oznake u obliku malih rimskih brojeva (i, ii, iii, iv..);
  • 1 (zadano) - postavlja oznake u obliku arapskih brojeva (1, 2, 3..);

  Atribut start="value" navodi početnu vrijednost (početnu vrijednost) izvješća.

  Obrnuti atribut specificira obrnuto brojanje (ako je potrebno).

  Označiti

  zahtijeva obaveznu upotrebu završne oznake

  Za formiranje elemenata popisa koristi se uparena oznaka

  • . Između početnih i završnih oznaka nalaze se pojedinačne riječi, fraze, odlomci, slike, dijelovi koda i još mnogo toga što je sadržaj popisa s grafičkim oznakama.

    Bilješka

    Unutar popisa možete promijeniti račun u svoj. U tu svrhu postoji poseban atribut value="" na oznaci.

  • , kojoj je dodijeljena neka numerička vrijednost. Na primjer

    1. Element #1
    10. Element #2
    11. Element #3

  Primjeri s numeriranim popisima u html-u (

  )

  Primjer 1. HTML numerirana lista latiničnim slovima

  Primjer s velikim slovima

  1. Element #1
  2. Element #2
  3. Element #3

  1. Element #1
  2. Element #2
  3. Element #3

  Primjer s malim slovima

  1. Element #10
  2. Element #11
  3. Element #12

  Ovako to izgleda na stranici:

  1. Element #1
  2. Element #2
  3. Element #3

  Primjer 2. HTML numerirana lista latinicom

  Primjer s velikim slovima

  1. Element #1
  2. Element #2
  3. Element #3

  Ovako to izgleda na stranici:

  1. Element #1
  2. Element #2
  3. Element #3

  Primjer s malim slovima

  1. Element #1
  2. Element #2
  3. Element #3

  Ovako to izgleda na stranici:

  1. Element #1
  2. Element #2
  3. Element #3

  Primjer 3. Numerirani popis html različite početne pozicije

  Primjer koji pokazuje mogućnosti atributa start, koji vam omogućuje postavljanje početne vrijednosti brojača.

  50. Element #1
  51. Element #2
  52. Element #3

  Ovako to izgleda na stranici:

  1. Element #1
  2. Element #2
  3. Element #3

  Primjer 4. Promjena brojanja u html numeriranim listama

  Ispod je primjer s mogućnošću promjene vrijednosti brojača pomoću atributa vrijednosti prilikom prikaza novih elemenata u oznakama

  • .

    10. Element #1
    11. Element #2
    100. Element #3
    101. Element #4

    Ovako to izgleda na stranici:

    1. Element #1
    2. Element #2
    3. Element #3
    4. Element #4

    Primjer 5. Obrnuti numerirani popis u html-u

    Dolje je primjer obrnuto numeriranog popisa (brojenje obrnutim redoslijedom).

    10. Element #1
    11. Element #2
    12. Element #3
    13. Element #4

    Ovako to izgleda na stranici:

    1. Element #1
    2. Element #2
    3. Element #3
    4. Element #4
    Ako odlučite promijeniti standardne ul i li liste, onda će vam ova tema biti zanimljiva. Jer ovdje ćete naučiti nekoliko originalnih rješenja. Što će vam svakako pomoći da se promijenite standardni prikaz do jedinstvenog, gdje ide CSS stil, za dizajn popisa. Prednost je što ćemo cijelo vrijeme koristiti samo jednu klasu, što će radikalno promijeniti izgled. Osim ovih parametara, možete odrediti od kojeg broja treba početi popis; ovdje možete učiniti sve sami. Zadana početna vrijednost za numerirane popise je prvo ili slovo A.

    Kad smo riješili osnove, sada ćemo pobliže pogledati elemente koji se koriste za pružanje strukture i značenja različitim dijelovima dizajna. Ako netko ne zna, onda su ul i li puno bolja opcija od jednostavnog tekstualni tekst jer kada je tekst preloman, posebno u mobitel, savršeno se uvlači i ne omotava se oko markera.

    Popisi se smatraju izvrsnim načinom predstavljanja informacija na stranicama jer su laki za čitanje i dobro izgledaju. Čini se da mnogi ljudi misle da su oznake male slike, ali zapravo su sve stvorene pomoću prilično jednostavnog HTML koda. Možete ugraditi različiti tipovi liste jedna u drugu ako želite, samo ih ne zaboravite ispravno zatvoriti. Možete se igrati s tekstom koji želite u svim ovim naredbama popisa.

    Također morate znati da popisi u početku sadrže nekoliko elemenata:

    1 . Nesređene informacije.
    2 . Organizirane informacije.
    3 . Definicije.

    Počnimo s instalacijom:

    1. Opcija:

    
    
    • Stavka popisa
    
    
    • Jedinstven popis
    
    
    • Izvorni popisi
    
    
    • ZORNET.RU - Webmaster
    
    
    • Još jedan popis
    
    
    
    CSS

    Ksangelopan (
    margina: 19px 0 0;
    ispuna:0;
    list-style: nijedan;
    resetiranje brojača: li;
    }
    .ksangelopan li (
    rub: 2px solid #3575ad;
    pozadina: #d7dee4;
    položaj: relativan;
    margina-dno: 17px;
    ispuna: 15px 9px;
    }
    .ksangelopan li:lebdjeti (
    z-indeks: 1;
    }
    .ksangelopan li:prije (
    rub: 2px čvrsta #2270b3;
    pozicija: apsolutna;
    gore: -14px;
    ispuna: 3px 9px;
    veličina fonta: 11px;
    font-weight: bold;
    boja: #246eaf;
    pozadina: #f2f4f7;
    protuprirast: li;
    sadržaj: brojač(li);
    -webkit-transition-duration: 0.4s;
    prijelaz-trajanje: 0.4s;
    }
    .ksangelopan li:lebdjeti:prije (
    pozadina: #2672b3;
    boja: #f7f9fb;
    -webkit-transform: prevedi (-11px, 0);
    -ms-transformacija: prevedi (-11px, 0);
    -o-transformacija: prevedi (-11px, 0);
    transformiraj: prevedi (-11px, 0);
    }
    .ksangelopan li:nakon (
    sadržaj: "";
    pozicija: apsolutna;
    prijelaz-trajanje: 0.3s;
    -webkit-transition-property: širina;
    svojstvo prijelaza: širina;
    z-indeks: -1;
    pozadina: #FFF;
    visina: 100%;
    lijevo: 0;
    vrh: 0;
    širina: 0;
    }
    .ksangelopan li:lebdjeti:nakon (
    širina: 100%;
    }

    
    To je sve za instalaciju.

    2 Druga opcija:

    

    
    
    • Stavka popisa
    
    
    • Jedinstven popis
    
    
    • Izvorni popisi
    
    
    • ZORNET.RU - Webmaster
    
    
    • Još jedan popis
    
    
    
    CSS

    Beleduzlopamges (
    margina-dno: 8px;
    ispuna:0;
    list-style: nijedan;
    resetiranje brojača: li;
    }
    .beleduzlopamges li (
    položaj: relativan;
    rub: 2px solid #195588;
    pozadina: #eff3f7;
    ispuna: 15px 19px 15px 27px;
    margina: 12px 0 12px 40px;
    -webkit-prijelaz-trajanje: 0,3s;
    prijelaz-trajanje: 0.3s;
    }
    .beleduzlopamges li:lebdjeti (
    pozadina: #FFF;
    }
    .beleduzlopamges li:prije (
    line-height: 32px;
    pozicija: apsolutna;
    gore: 4px;
    lijevo: -39px;
    širina: 39px;
    poravnanje teksta: središte;
    veličina fonta: 16px;
    font-weight: bold;
    boja: #f9f5f5;
    pozadina: #275b88;
    protuprirast: li;
    sadržaj: brojač(li);
    prijelaz-trajanje: 0.2s;
    }
    .beleduzlopamges li:lebdjeti:prije (
    širina:46px;
    }
    .beleduzlopamges li:nakon (
    pozicija: apsolutna;
    lijevo: 0;
    gore: 4px;
    sadržaj: "";
    visina: 0;
    širina: 0;
    obrub: 16px čvrsti proziran;
    boja ruba-lijevo: #275b88;
    -webkit-prijelaz-trajanje: 0,2s;
    prijelaz-trajanje: 0.2s;
    }
    .beleduzlopamges li:lebdjeti:nakon (
    margina-lijevo: 6px;
    }

    
    Možete samostalno postaviti središnju gamu koja odgovara glavnom stilu web mjesta.

    3 Treća opcija:

    

    
    
    • Skripte za uCoz
    
    
    • Predlošci za uCoz
    
    
    • Dizajn web stranice
    
    
    • Stilovi web stranice
    
    
    • Stiliziranje s CSS-om
    
    
    
    CSS

    Nizualisanelag (
    ispuna:0;
    list-style: nijedan;
    resetiranje brojača: li;
    }
    .nizualisanelag li (
    položaj: relativan;
    ispuna: 9px 17px 17px 25px;
    margina-lijevo: 39px;
    prijelaz-trajanje: 0.2s;
    kursor: pokazivač;
    font-weight: bold;
    boja: #343638;
    }
    .nizualisanelag li:prije (
    obrub: 3px čvrsti proziran;
    line-height: 35px;
    pozicija: apsolutna;
    vrh: 0;
    lijevo:-29px;
    širina:41px;
    poravnanje teksta: središte;
    veličina fonta: 14px;
    font-weight: bold;
    boja: #619dce;
    protuprirast: li;
    sadržaj: brojač(li);
    prijelaz-trajanje: 0.3s;
    
    veličina okvira: border-box;
    }
    .nizualisanelag li:lebdjeti:prije (
    boja: #337AB7;
    }
    .nizualisanelag li:nakon (
    pozicija: apsolutna;
    vrh: 0;
    lijevo: -29px;
    širina: 41px;
    visina: 41px;
    rub: 5px solid #468bd0;
    rubni radijus: 50%;
    sadržaj: "";
    neprozirnost: 0,5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    veličina okvira: border-box;
    }
    .nizualisanelag li:lebdjeti:nakon (
    animacija: 500ms ease-in-out 0s bounceIn;
    neprozirnost: 1;
    }

    @keyframes bounceIn (
    0% {
    neprozirnost: 0;
    transformacija: scale3d(.3, .3, .3);
    }
    20% {
    transformacija: scale3d(1.3, 1.3, 1.3);
    }
    40% {
    transformacija: scale3d(.9, .9, .9);
    }
    60% {
    neprozirnost: 1;
    transformacija: scale3d(1.03, 1.03, 1.03);
    }
    80% {
    transformacija: scale3d(.97, .97, .97);
    }
    za (
    neprozirnost: 1;
    transformacija: scale3d(1, 1, 1);
    }
    }

    
    Dolazi s prekrasnom animacijom.

    4 Četvrta opcija:

    

    
    
    • Prvi element za stranicu
    
    
    • Drugi element za stranicu
    
    
    • Treći element za stranicu
    
    
    • Četvrti element za mjesto
    
    
    • Peti element za mjesto
    
    
    
    CSS

    Padding:0;
    list-style: nijedan;
    }
    .kudezamuden li(
    padding:6px;
    }
    .kudezamuden li:prije (
    padding-desno: 11px;
    font-weight: bold;
    boja: #4979a0;
    sadržaj: "\2606";
    prijelaz-trajanje: 0.4s;
    }
    .kudezamuden li:lebdjeti:prije (
    boja: #235e90;
    sadržaj: "\2605";
    }

    
    Sličan prethodne verzije, promijenjena je samo sama ikona.

    Općenito, ovo je mali izbor popisa koji će omogućiti web majstoru da napravi prekrasan popis na portalu, gdje ga može više dizajnirati, onako kako ga on sam želi vidjeti.

    Ako trebate staviti stavke na numerirani popis umjesto na popis s grafičkim oznakama, koristit će se uređeni HTML. Ovaj popis je kreiran pomoću oznake ol. Numeriranje počinje od jedan i povećava se za jedan za svaki sljedeći poredani element popisa s oznakom li.

    HTML liste koristi se za grupiranje povezanih informacija. Postoje tri vrste popisa:

    popis s grafičkim oznakama —

    - svaki element liste
    • označeno markerom,
      numerirani popis —
      - svaki element liste
      1. označena brojem
         popis definicija- - sastoji se od parova pojmova
         —
         definicija.

         Svaki popis je spremnik unutar kojeg se nalaze elementi popisa ili parovi pojmova i definicija. Elementi popisa ponašaju se kao elementi bloka, složeni jedan ispod drugog i zauzimaju cijelu širinu bloka spremnika. Svaka stavka popisa ima dodatni blok koji se nalazi sa strane, a koji ne sudjeluje u izgledu.

         Stvaranje HTML popisa

         1. Popis s grafičkim oznakama

         Popis s grafičkim oznakama je neuređeni popis (s engleskog neuređenog popisa). Stvoreno pomoću uparene oznake

         . Oznaka elementa popisa je oznaka, na primjer, ispunjeni krug.

         Preglednici prema zadanim postavkama dodaju sljedeće oblikovanje u blok popisa:

         Svaki element popisa kreira se pomoću uparene oznake

      2. (sa engleskog popisa).
      dostupno .
      • Microsoft
      • Google
      • Jabuka
      Riža. 1. Popis s grafičkim oznakama

      2. Numerirani popis

      Numerirani popis se stvara pomoću uparene oznake. Svaka stavka popisa također se stvara pomoću elementa

    • . Preglednik automatski numerira elemente redom, a ako izbrišete jedan ili više elemenata takvog popisa, preostali brojevi će se automatski ponovno izračunati.

      Blok popisa također ima zadane stilove preglednika:

    • Dostupan je atribut vrijednosti koji vam omogućuje promjenu zadanog broja za odabranu stavku popisa. Na primjer, ako za prvu stavku na popisu postavite
    • , tada će se preostalo numeriranje ponovno izračunati u odnosu na novu vrijednost.

      Za oznaku

      Dostupni su sljedeći atributi:
      Tablica 1. Atributi oznake

      Atribut	Opis, prihvaćena vrijednost
      obrnuto	Atribut reversed uzrokuje da se popis prikazuje obrnutim redoslijedom (na primjer, 9, 8, 7...).
      početak	Atribut start određuje početnu vrijednost od koje će početi numeriranje, na primjer, konstrukcija prvom artiklu će se dodijeliti redni broj “10”. Istodobno možete odrediti i vrstu numeriranja, na primjer, .
      tip	Atribut tipa određuje vrstu markera koji će se koristiti na popisu (slova ili brojke). Prihvaćene vrijednosti: 1 — zadana vrijednost, decimalno numeriranje. A — numeriranje popisa abecednim redom, velika slova (A, B, C, D). a — numeriranje popisa abecednim redom, mala slova (a, b, c, d). I - numeracija velikim rimskim brojevima (I, II, III, IV). i — numeriranje malim rimskim brojevima (i, ii, iii, iv).

      1. Microsoft
      2. Google
      3. Jabuka
      Riža. 2. Numerirani popis

      3. Popis definicija

      Popisi definicija stvaraju se pomoću oznake

      . Za dodavanje pojma upotrijebite oznaku
      , a za umetanje definicije - tag
      .

      Blok popisa definicija ima sljedeće zadane stilove preglednika:

      Za oznake

      ,

      I

      dostupno .

      Direktor:

      Petar Točilin

      Uloge:

      Andrej Gaiduljan

      Aleksej Gavrilov

      Vitalij Gogunski

      Mariya Kozhevnikova

      
      Riža. 3. Popis definicija

      4. Ugniježđeni popis

      Mogućnosti jednostavnih popisa često nisu dovoljne, na primjer, kada se stvara sadržaj, nema načina bez kojeg ugniježđene stavke. Oznaka za ugniježđeni popis bila bi sljedeća:

      • Stavak 1.
      • Točka 2.
        • Podtočka 2.1.
        • Podtočka 2.2.
          • Podtočka 2.2.1.
          • Podtočka 2.2.2.
        • Podtočka 2.3.
      • Točka 3.

      
      Riža. 4. Ugniježđeni popis

      5. Višerazinski numerirani popis

      Višerazinski popis koristi se za prikaz stavki popisa na različitim razinama s različitim uvlakama. Oznaka za višerazinski numerirani popis bila bi sljedeća:

      1. paragraf
      2. paragraf
         1. paragraf
         2. paragraf
         3. paragraf
            1. paragraf
            2. paragraf
            3. paragraf
         4. paragraf
      3. paragraf
      4. paragraf

      Ovo zadano označavanje stvorit će novo numeriranje za svaki ugniježđeni popis, počevši od jedan. Da biste stvorili ugniježđeno numeriranje, trebate koristiti sljedeća svojstva:
      poništavanje brojača poništava jedan ili više brojača, specificirajući vrijednost koja se poništava;
      counter-increment specificira vrijednost inkrementa brojača, tj. u kojim će koracima svaka sljedeća stavka biti numerirana;
      sadržaj - generirani sadržaj, u ovom slučaju odgovoran je za prikaz broja prije svake stavke popisa.

      Ol ( /* uklonite standardno numeriranje */ list-style: none; /* Identificirajte brojač i dajte mu ime li. Vrijednost brojača nije navedena - prema zadanim je postavkama 0 */ counter-reset: li; ) li :before ( /* Definiramo element koji će biti numeriran - li. Pseudoelement prije označava da će sadržaj umetnut pomoću svojstva sadržaja biti postavljen ispred stavki popisa. Ovdje također postavljamo vrijednost inkrementa brojača (zadano je 1). dodaje točku za razdvajanje između brojeva, a točka s razmakom dodaje se prije sadržaja svake stavke popisa */ content: counters(li,".") ".";
      Riža. 5. Višerazinski numerirani popis