Jedna od vrsta lista implementiranih u HTML-u je lista sa nabrajanjem. Inače, liste ovog tipa nazivaju se nenumerisanim ili neuređenim. Prezime se često koristi kao formalni prijevod imena odgovarajuće oznake

, uz pomoć kojih se liste ovog tipa organizuju u HTML dokumente (UL - Unordered List, nesređena lista).

U listi za nabrajanje, specijalni znakovi koji se nazivaju markeri liste koriste se za isticanje njenih elemenata (često se nazivaju bullets, što je formalni izgovor engleskog izraza bullet). Izgled markera liste određuje pretraživač, a prilikom kreiranja ugniježđenih lista, pretraživači automatski diverzificiraju izgled markera na različitim nivoima ugniježđenja.

Oznake

I

Da biste kreirali listu sa nabrajanjem, potrebno je da koristite oznaku kontejnera, unutar koje se nalaze svi elementi liste. Oznake za otvaranje i zatvaranje liste obezbeđuju prelom reda pre i posle liste, čime se lista odvaja od glavnog sadržaja dokumenta, tako da nema potrebe da ovde koristite oznake pasusa


.

Svaki element liste mora početi oznakom

• (LI - Stavka liste, element liste). Tag
• ne zahtijeva odgovarajuću završnu oznaku, iako njeno prisustvo u principu nije zabranjeno. Pretraživači se obično pokreću svaki put kada prikažu dokument. novi element lista iz novog reda.

  Dostavljene informacije su dovoljne za izradu osnovne liste sa nabrajanjem. Hajde da damo primer HTML dokumenta koji koristi listu sa nabrajanjem, čiji je prikaz od strane pretraživača prikazan na Sl. 2.1.

  horoskopski znakovi:

  • Ovan

  • Bik

  • Blizanci

  • Djevica

  • Vage

  • Škorpion

  • Strijelac

  • Jarac

  • Vodolija

  • Riba

  Rice. 2.1. Prikaz liste sa nabrajanjem u pretraživaču

  Imajte na umu da pored elemenata liste označenih oznakom

• , mogu biti prisutni i drugi HTML elementi. U gornjem primjeru, jedan od ovih elemenata je običan tekst, koji nije stavka liste, već služi kao njen naslov.

  Bilješka

  Neki udžbenici o HTML jeziku navode da se oznaka kontejnera treba koristiti za postavljanje naslova liste (LH - Zaglavlje liste, zaglavlje liste). Ovu oznaku trenutno ne prepoznaju nijedan uobičajeni pretraživač i nije dio HTML specifikacije. Stoga njegova upotreba postaje besmislena, iako neće dovesti do grešaka.

  U oznaci

  mogu se specificirati dva parametra: COMPACT i TYPE.

  Parametar COMPACT se zapisuje bez vrijednosti i koristi se da to pretraživaču naznači ovu listu treba biti predstavljen u kompaktnom obliku. Na primjer, može se smanjiti font ili razmak između redova liste, itd.

  Bilješka

  Trenutno, prisustvo parametra COMPACT u oznaci

  ni na koji način ne utiče na prikaz lista u vodećim pretraživačima. Stoga aplikacija ovaj parametar je besmislen, pogotovo jer njegova upotreba nije preporučena HTML 4.0 specifikacijom.

  Parametar TYPE može imati sljedeće vrijednosti: disk, krug i kvadrat. Ovaj parametar se koristi za prisilno pojavljivanje znakova za nabrajanje liste. Tačan tip markera zavisi od pretraživača koji koristite. Tipične opcije prikaza su sljedeće:

  TIP = disk - markeri se prikazuju kao popunjeni krugovi; TIP = krug - markeri se prikazuju kao otvoreni krugovi; TIP = kvadrat - markeri se prikazuju kao popunjeni kvadrati. Primjer unosa:

  .

  Zadana vrijednost je TYPE = disk. Za ugniježđene liste sa nabrajanjem, zadana vrijednost je disk na prvom nivou, krug na drugom nivou, kvadrat na trećem nivou i dalje. To je upravo ono što se radi u najnovije verzije Netscape pretraživači i Internet Explorer. Imajte na umu da drugi pretraživači mogu drugačije prikazati markere. Na primjer, u HTML specifikacije 4.0 za tip markera koji se prikazuje kada je vrijednost TYPE = kvadrat, prikazan je nepopunjen kvadrat (kvadratni obris).

  Parametar TYPE sa istim vrijednostima može se koristiti za određivanje tipa markera za pojedinačne elemente liste. Da biste to učinili, dozvoljeno je navesti parametar TYPE s odgovarajućom vrijednošću u oznaci elementa liste

  • .

    Primjer unosa:

  • .

    Bilješka

    Preglednici različito tumače specifikaciju tipa metka za pojedinačnu stavku liste. Netscape pretraživač mijenja izgled markera za ovaj i sve naredne dok se ne naiđe na sljedeću redefinaciju izgleda markera. Internet Browser Explorer mijenja izgled markera samo za ovaj element.

    Markeri grafičke liste

    Možete koristiti grafičke slike kao oznake liste, što se široko koristi za kreiranje atraktivnih, dobro dizajniranih HTML dokumenata. Zapravo, takva mogućnost nije direktno pružena HTML jezik, ali se implementira donekle umjetno. To ne znači da to nije preporučljivo ili za osudu, već samo da se ovdje neće koristiti posebne konstrukcije HTML jezika.

    Da biste razumjeli ideju, morate razumjeti mehanizam za implementaciju lista na HTML stranicama. Ispostavilo se da je oznaka liste

    (kao, zaista, liste tagova drugih tipova, o kojima će se raspravljati u nastavku) obavlja jedan zadatak - govori pretraživaču da sve informacije koje se nalaze nakon ove oznake trebaju biti prikazane pomaknute udesno (uvučeno) za određenu količinu. Oznake
    • , koji ukazuju na pojedinačne stavke liste, daju standardne markere stavki liste.

      Ako treba da napravimo listu sa grafičkim markerima, onda možemo i bez oznaka

    • . Biće dovoljno da umetnete željenu grafičku sliku ispred svakog elementa liste. Jedini problem koji treba riješiti je razdvajanje elemenata liste jedan od drugog. Za ovo možete koristiti oznake pasusa

      Ili prisilno prebacivanje na red
      . Primjer implementacije liste sa grafičkim markerima, čiji je prikaz prikazan na Sl. 2.2 je prikazano ispod:

      koji će biti prenošen samo jednom. Veličine datoteke male slike su također izuzetno male.

      Bilješka

      Metode za kreiranje lista sa grafičkim oznakama razmatraju se redom u Poglavlju 8.

      
      

      Glavne upotrebe lista:

      Numerirano - za popis elemenata koji slijede po strogo definiranom redoslijedu.

      Označeno - za popis elemenata slučajnim redoslijedom.

      Višerazinski - za određivanje informacija o određenim elementima.

      Lista definicija - koristi se za formatiranje rječnika.

      HTML stranica numerisane liste

      Oznake se koriste za kreiranje numerisanih lista

      1. Tag

         Tag

         1. Podrazumevano, stavke liste su numerisane redom 1, 2, 3... Koristeći atribut TYPE, možete promeniti stil numerisanja.

            Numeracija vrijednosti TIP A A, B, C.. a a, b, c.. I I, II, III.. i i, ii, iii.. 1 1. 2. 3..

            Ako već dodate postojeća lista nove vrijednosti, pretraživač će ih automatski ponovo izračunati.

            Koristeći START VALUE atribute, možete promijeniti redoslijed numeriranja liste.

            START - koristi se za određivanje početnog broja liste, različitog od 1.

            VRIJEDNOST - omogućava dodjelu proizvoljnog broja bilo kojem elementu liste.

            primjer:

            HTML stranica sa nabrajanom listom

            Oznake se koriste za kreiranje lista sa nabrajanjem

            Tag

            Početak/kraj cijele liste je označen.

            Tag

            • označava početak/kraj pojedinačnog elementa liste.

              Podrazumevano, stavke liste su označene crnim krugom. Atribut TYPE se može koristiti za promjenu stila označavanja.

              Unutar jedne liste možete koristiti različite oznake za elemente liste.

              primjer:

              Višerazinska lista html stranica

              Da biste kreirali liste na više nivoa, možete koristiti liste sa nabrajanjem ili numerisane liste, ili kombinaciju oba. Lista na više nivoa se kreira ugnježđivanjem jedne liste unutar tijela druge. Glavni zadatak je da se ne zbunite. Da biste to učinili, savjetujem vam da napravite različite uvlake za pojedinačne liste.

              Liste definicija html stranica

              Za kreiranje lista definicija koriste se tri oznake:

              - početak/kraj liste.

              - početak/kraj određenog mandata.

              - početak/kraj članka s objašnjenjem pojma.

              Oznake

              I

              nije potrebno naizmenično. One. Možete "povezati" nekoliko pojmova sa jednom definicijom i obrnuto.

              primjer:

              HTML kod: Termin 1 Sažetak 1 do pojma 1 Sažetak 2 do pojma 1

              Prikaz pretraživača: Pojam 1 Sažetak1 do pojma 1 Sažetak2 do pojma 1

              Budući da se na ovoj stranici određeni stilovi primjenjuju na neke elemente, njihov prikaz u tabeli je nešto drugačiji od onoga što ćete dobiti.

              HTML liste koristi se za grupisanje povezanih informacija. Postoje tri vrste lista:

              bulleted list —

              - svaki element liste
              • obeleženo markerom,
                numerisana lista —
                - svaki element liste
                1. označeno brojem
                   lista definicija- - sastoji se od parova termina
                   —
                   definicija.

                   Svaka lista je kontejner unutar kojeg se nalaze elementi liste ili parovi termin-definicija. Elementi liste se ponašaju kao blok elementi, naslagani jedan ispod drugog i zauzimajući čitavu širinu bloka kontejnera. Svaka stavka liste ima dodatni blok koji se nalazi sa strane, koji ne učestvuje u rasporedu.

                   Kreiranje HTML lista

                   1. Označena lista

                   Označena lista je neuređena lista (sa engleske nesređene liste). Kreirano pomoću uparene oznake

                   . Marker elementa liste je oznaka, na primjer, popunjen krug.

                   Preglednici prema zadanim postavkama dodaju sljedeće formatiranje u blok liste:

                   Svaki element liste kreira se pomoću uparene oznake

                2. (sa engleske stavke liste).
                dostupan.
                • Microsoft
                • Google
                • Apple
                Rice. 1. Označena lista

                2. Numerisana lista

                Numerisana lista se kreira pomoću uparene oznake. Svaka stavka liste se također kreira pomoću elementa

              • . Pretraživač automatski numeriše elemente redom, a ako izbrišete jedan ili više elemenata takve liste, preostali brojevi će se automatski ponovo izračunati.

                Blok liste takođe ima podrazumevane stilove pretraživača:

              • Dostupan je atribut value koji vam omogućava da promijenite zadani broj za odabranu stavku liste. Na primjer, ako za prvu stavku na listi koju ste postavili
              • , tada će se preostala numeracija ponovo izračunati u odnosu na novu vrijednost.

                Za oznaku

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

                Atribut	Opis, prihvaćena vrijednost
                obrnuto	Obrnuti atribut uzrokuje da se lista prikaže obrnutim redoslijedom (na primjer, 9, 8, 7...).
                start	Atribut start specificira početnu vrijednost od koje će početi numeriranje, na primjer, konstrukcija prvoj stavci će biti dodijeljen serijski broj “10”. Također možete odrediti vrstu numeracije u isto vrijeme, na primjer, .
                tip	Atribut type specificira tip markera koji će se koristiti na listi (slova ili brojevi). Prihvaćene vrijednosti: 1 — zadana vrijednost, decimalna numeracija. A — numerisanje liste po abecednom redu, velika slova (A, B, C, D). a — popis numeracija po abecednom redu, mala slova (a, b, c, d). I - numeracija rimskim velikim brojevima (I, II, III, IV). i — numerisanje rimskim malim brojevima (i, ii, iii, iv).

                1. Microsoft
                2. Google
                3. Apple
                Rice. 2. Numerisana lista

                3. Lista definicija

                Liste definicija kreiraju se pomoću oznake

                . Da dodate termin, koristite oznaku
                , a za umetanje definicije - tag
                .

                Blok liste definicija ima sljedeće zadane stilove pretraživača:

                Za oznake

                ,

                I

                dostupan.

                Direktor:

                Peter Tochilin

                Uloge:

                Andrey Gaidulyan

                Aleksej Gavrilov

                Vitalij Gogunski

                Marija Koževnikova

                Rice. 3. Lista definicija

                4. Ugniježđena lista

                Često mogućnosti jednostavnih lista nisu dovoljne; na primjer, kada kreirate sadržaj, ne možete bez ugniježđene stavke. Oznake za ugniježđenu listu bi bile sljedeće:

                • Stav 1.
                • Tačka 2.
                  • Podtačka 2.1.
                  • Podtačka 2.2.
                    • Podtačka 2.2.1.
                    • Podtačka 2.2.2.
                  • Podtačka 2.3.
                • Tačka 3.

                
                Rice. 4. Ugniježđena lista

                5. Brojčana lista na više nivoa

                Lista na više nivoa se koristi za prikaz stavki liste na različitim nivoima sa različitim uvlačenjima. Oznake za višeslojnu numerisanu listu bi bile sljedeće:

                1. stav
                2. stav
                   1. stav
                   2. stav
                   3. stav
                      1. stav
                      2. stav
                      3. stav
                   4. stav
                3. stav
                4. stav

                Ova zadana oznaka će kreirati novu numeraciju za svaku ugniježđenu listu, počevši od jedne. Da biste kreirali ugniježđeno numeriranje, trebate koristiti sljedeća svojstva:
                poništavanje brojača resetuje jedan ili više brojača, specificirajući vrednost koja se resetuje;
                counter-increment specificira vrijednost prirasta brojača, tj. u kojim koracima će svaka naredna stavka biti numerisana;
                sadržaj - generisani sadržaj, u ovom slučaju odgovoran je za prikaz broja ispred svake stavke liste.

                Ol ( /* ukloni standardnu ​​numeraciju */ stil liste: nema; /* Identifikujte brojač i dajte mu ime li. Vrednost brojača nije navedena - podrazumevano je 0 */ poništavanje brojača: li; ) li :before ( /* Definiramo element koji će biti numeriran - li. Pseudoelement prije označava da će sadržaj umetnut korištenjem svojstva sadržaja biti postavljen prije stavki liste. Ovdje također postavljamo vrijednost prirasta brojača (podrazumevano je 1). */ counter-increment: li; / * Svojstvo sadržaja prikazuje broj stavke liste. counters() znači da generirani tekst predstavlja vrijednosti svih brojača s tim imenom. Tačka u navodnicima dodaje tačku za razdvajanje brojeva, a tačka sa razmakom se dodaje ispred sadržaja svake stavke liste */ content: counters(li,".") "."; )
                Rice. 5. Brojčana lista na više nivoa

              HTML podržava liste od tri različite vrste, od kojih svaki ima svoje parametre:

              • – numerisana (brojevima ili slovima) lista, čiji svaki element ima serijski broj (slovo);
                1. – lista sa nabrajanjem (ne numerisana), pored svakog elementa koji se stavlja marker (a ne numerički ili abecedni znakovi koji označavaju serijski broj);

                   • – lista definicija se sastoji od parova ime/vrijednost, uključujući termine i definicije.

                   Numerisane liste

                   U numerisanu listu, pretraživač automatski ubacuje brojeve elemenata po redosledu, počevši od određene vrednosti (obično 1). Ovo vam omogućava da ubacite i izbrišete stavke liste bez ometanja numeracije, budući da će preostali brojevi biti automatski ponovo izračunati.
                   Numerisane liste se kreiraju korišćenjem blok elementa

                   (iz engleske Ordered List - numerisana lista). Pored kontejnera
                   za svaku stavku liste postavlja se element
                   1. (od engleskog List Item - stavka liste). Podrazumevana je numerisana lista sa arapskim brojevima.
                      Tag
                      ima sljedeću sintaksu:
                      1. element 1
                      2. element 2
                      3. element 3

                      Numerirane stavke liste moraju sadržavati više stavki liste, kao što je prikazano u sljedećem primjeru:

                      Primjer: Numerirana lista

                      • Probajte sami"

                      Korak po korak instrukcije

                      1. Uzmi ključ
                      2. Umetnite ključ u bravu
                      3. Okrenite ključ za dva okreta
                      4. Izvadi ključ iz brave
                      5. Otvoriti vrata

                      Korak po korak instrukcije

                      1. Uzmi ključ
                      2. Umetnite ključ u bravu
                      3. Okrenite ključ za dva okreta
                      4. Izvadi ključ iz brave
                      5. Otvoriti vrata

                      Ponekad kada gledate postojeće HTML kodove naići ćete na argument tip u elementu

                      , koji se koristi za označavanje vrste numeracije (slova, rimski i arapski brojevi, itd.). sintaksa:

                      Ovdje: upišite – navedite simbole:

                      • A - velika latinična slova (A, B, C...);
                      • a - mala latinična slova (a, b, c...);
                      • I - veliki rimski brojevi (I, II, III...);
                      • i - mali rimski brojevi (i, ii, iii...);
                      • 1 - arapski brojevi (1, 2, 3 . . .) (koristi se po defaultu).

                      Ako želite da lista počinje brojem koji nije 1, trebali biste to navesti koristeći atribut start tag

                      .
                      Sljedeći primjer prikazuje numerisanu listu s velikim rimskim brojevima i početnom vrijednošću XLIX:

                      Numeriranje se također može započeti korištenjem atributa vrijednost, koji se dodaje elementu

                      1. na sljedeći način:

                      7. U ovom slučaju, sekvencijalno numerisanje liste će biti prekinuto i od ove tačke numerisanje će početi ponovo, u ovom slučaju od sedam.

                         Primjer upotrebe atributa vrijednost tag

                      8. , koji vam omogućava da promijenite broj datog elementa liste:

                         U ovom primjeru, "Prva stavka liste" bi bila broj 1, "Stavka druge liste" bi bila broj 7, a "Treća stavka liste" bi bila broj 8.

                         Formatiranje numerisanih lista pomoću CSS-a

                         Za promjenu brojeva liste trebate koristiti svojstvo tip-stil liste CSS stilovi:

                         Stilovi numerisane liste

                         Primjer	Značenje	Opis
                         a, b, c	niži alfa	Mala slova
                         A, B, C	gornji alfa	Velika slova
                         i, ii, iii	nižerimski	Rimski brojevi malim slovima
                         I, II, III	gornji roman	Rimski brojevi velikim slovima

                         Primjer: Primjena CSS svojstva tip-stil liste

                         Označene liste

                         Liste sa oznakama su u suštini slične numerisanim listama, samo što ne sadrže sekvencijalno numerisanje stavki. Liste sa oznakama se kreiraju pomoću elementa bloka

                         (sa engleskog Unordered List - nenumerisana lista). Svaki element liste, kao u numerisanim listama, počinje oznakom
                         • . Pretraživač uvlači svaku stavku liste i automatski prikazuje znakove za nabrajanje.
                           Tag
                           ima sljedeću sintaksu:
                           • Prva tačka
                           • Druga tačka
                           • Treća tačka

                           U sljedećem primjeru možete vidjeti da se, prema zadanim postavkama, mali marker u obliku popunjenog kruga dodaje prije svake stavke liste:

                           Unutar oznake

                           • Nije potrebno postavljati samo tekst, prihvatljivo je postaviti bilo koji element streaming sadržaja (linkove, pasuse, slike itd.)

                             Ugniježđene liste

                             Bilo koja lista može biti ugniježđena u drugu. Unutar elementa
                           • Dozvoljeno je kreiranje ugniježđene liste ili liste drugog nivoa. Da biste ugnijezdili listu, opišite novu listu unutar elementa
                           • već postojeću listu. Kada ugnijezdite jednu listu za nabrajanje u drugu, pretraživač automatski mijenja stil za nabrajanje za listu drugog nivoa. Bilo koja lista može biti ugniježđena u drugu. Sljedeći primjer pokazuje strukturu liste s nabrajanjem ugniježđene unutar druge stavke numerirane liste.

                             Primjer: Ugniježđene liste

                             • Probajte sami"
                             • ponedjeljak
                               1. Pošalji poštu
                               2. Posjeta uredniku
                                  • Odabir teme
                                  • Dekorativni dizajn
                                  • Završni izvještaj
                               3. Večernje pregledavanje poruka
                             • utorak
                               1. Revidirati raspored
                               2. Pošaljite slike
                             • srijeda...
                             • ponedjeljak
                               1. Pošalji poštu
                               2. Posjeta uredniku
                                  • Odabir teme
                                  • Dekorativni dizajn
                                  • Završni izvještaj
                               3. Večernje pregledavanje poruka
                             • utorak
                               1. Revidirati raspored
                               2. Pošaljite slike
                             • srijeda...

                             Formatiranje lista za nabrajanje

                             Za promjenu izgled treba koristiti svojstvo markera liste tip-stil liste CSS stilovi:

                             Sljedeći primjer pokazuje različite stilove lista sa nabrajanjem:

                             Primjer: Stilovi liste za nabrajanje

                             • Probajte sami"
                             • Kafa
                             • Kafa
                             • Kafa
                             • Kafa

                             disk:

                             • Kafa
                             • Mlijeko

                             krug:

                             • Kafa
                             • Mlijeko

                             Kvadrat:

                             • Kafa
                             • Mlijeko

                             ništa:

                             • Kafa
                             • Mlijeko

                             Grafički markeri.

                             U HTML-u je moguće kreirati listu sa grafičkim markerima. Jedno je kada su markeri liste standardni krugovi ili kvadrati, a sasvim drugo kada programer sam bira marker u skladu sa dizajnom stranice. Kako bi stavke na listi bile lijepe, često se koriste male slike.
                             Za zamjenu običnog markera grafičkim, zamijenite svojstvo tip-stil liste po nekretnini slika u stilu liste i navedite URL slike:

                             Primjer: Grafički markeri

                             • Probajte sami"

                             Znakovi zodijaka

                             • Bik
                             • Blizanci

                             Znakovi zodijaka

                             • Ovan
                             • Bik
                             • Blizanci

                             Liste definicija (opisa)

                             Liste definicija su vrlo korisne za kreiranje, na primjer, vašeg ličnog rječnika pojmova. Svaka stavka liste definicija ima dva dijela: pojam i njegovu definiciju.
                             Stavljate cijelu listu u element

                             (sa engleske liste definicija - lista definicija). Uključuje oznake

                             (od engleskog Definition Term - definirana riječ, pojam) i

                             (od engleskog Definition Description - opis pojma koji se definiše).
                             Liste definicija se često koriste u naučnim, tehničkim i obrazovnim publikacijama, koristeći ih za sastavljanje glosara, rječnika, priručnika itd.

                             Opća struktura liste opisa je sljedeća:

                             Prvi mandat

                             Opis prvog pojma

                             Drugi mandat

                             Opis drugog termina

                             Sljedeći primjer pokazuje jednu od moguće upotrebe lista definicija:

                             Primjer: Lista definicija

                             • Probajte sami"

                             World Wide Web - sa engleskog. World Wide Web (WWW) je distribuirani sistem koji omogućava pristup povezanim dokumentima koji se nalaze na različitim računarima povezanim na Internet. Internet je skup mreža koje koriste jedan protokol razmjene za prijenos informacija. Web stranica je skup pojedinačnih web stranica koje su međusobno povezane linkovima i jedinstvenim dizajnom.

                             World Wide Web

                             - sa engleskog World Wide Web (WWW) je distribuirani sistem koji omogućava pristup povezanim dokumentima koji se nalaze na različitim računarima povezanim na Internet.

                             Internet

                             — skup mreža koje koriste jedan protokol razmjene za prijenos informacija.

                             Website

                             - skup pojedinačnih web stranica koje su međusobno povezane linkovima i jedinstvenog dizajna.

                             Podrazumevano, tekst pojma je pritisnut na levu ivicu prozora pretraživača, a opis pojma se nalazi ispod i pomera udesno.

                             Numerisane liste su skup elemenata sa njihovim serijskim brojevima. Vrsta i tip numeracije zavise od parametara elementa

                             , koji se koristi za kreiranje liste. Sljedeće vrijednosti mogu poslužiti kao elementi numeracije:
                             • arapski brojevi (1, 2, 3, ...);
                             • Arapski brojevi sa početnom nulom za brojeve manje od deset (01, 02, 03, ...,10);
                             • velika latinična slova (A, B, C, ...);
                             • mala latinična slova (a, b, c, ...);
                             • veliki rimski brojevi (I, II, III, ...);
                             • mali rimski brojevi (i, ii, iii, ...);
                             • armenska numeracija;
                             • Gruzijsko numerisanje.

                             Sa praktične tačke gledišta, principi prikazivanja stavki u listi sa nabrajanjem mogu se primeniti na sličan način kao na numerisanoj listi. Ali s obzirom na to da se radi o nabrajanju, postoje neke karakteristike o kojima će se dalje govoriti.

                             Numeracija liste

                             Dozvoljeno je započeti listu od bilo kojeg broja; za ovu svrhu se koristi početni atribut elementa

                             ili vrijednost elementa
                             1. . Vrijednost je bilo koji pozitivan cijeli broj. Nije bitno koja je vrsta numeracije postavljena, čak i ako se latinična slova koriste kao lista. Ako se atributi start i value istovremeno primjenjuju na listu, onda potonji ima prednost i numeriranje se prikazuje od broja specificiranog vrijednosti, kao što je prikazano u primjeru 1.

                                Primjer 1: Promjena numeracije liste

                                4. Trebali biste dobro voditi računa o svom radnom mjestu.
                                5. Podesite osvetljenje u prostoriji tako da se izvor svetlosti nalazi sa strane ili iza operatera.
                                10. Kako biste izbjegli medicinske komplikacije, preporučuje se odabir stolice s mekim sjedištem.

                                Prvi element liste u ovom primjeru počinje rimskim brojem IV, pošto je naveden atribut start="4", zatim dolazi broj V, a posljednji element izlazi van reda i dodjeljuje mu se broj X (slika 1).

                                Rice. 1. Rimski brojevi u listi

                                Pisanje brojeva

                                Po defaultu, numerisana lista ima određeni izgled: prvo je broj, zatim tačka, a nakon toga se prikazuje tekst odvojen razmakom. Ovaj oblik pisanja je vizualan i zgodan, ali neki programeri više vole da vide drugačiji način dizajniranja numeracije lista. Naime, tako da umjesto tačke postoji zagrada koja zatvara, kao što je prikazano na sl. 2 ili nešto slično.

                                

                                Rice. 2. Prikaz numerisane liste sa zagradama

                                Stilovi vam omogućavaju da promijenite tip numeriranja liste koristeći svojstva sadržaja i brojača. Prvo, ol selektor treba postaviti na poništavanje brojača : item , ovo je neophodno kako bi numeriranje u svakoj novoj listi počelo iznova. U suprotnom, numerisanje će se nastaviti i umesto 1,2,3 videćete 5,6,7. Vrijednost stavke je jedinstveni identifikator brojača; sami ga biramo. Zatim morate sakriti originalne markere kroz svojstvo stila lista-style-type sa vrijednošću ništa.

                                Svojstvo content obično radi u sprezi sa pseudoelementima ::after i ::before. Dakle, konstrukcija li::before kaže da se neki sadržaj mora dodati prije svakog elementa liste (primjer 2).

                                Primjer 2. Kreiranje vlastite numeracije

                                Li::before (sadržaj: brojač(stavka) ") "; /* Dodajte zagradu brojevima */ counter-increment: item; /* Podesite ime brojača */ )

                                Svojstvo sadržaja sa brojačem vrednosti(stavkom) prikazuje broj; Dodavanjem zagrade, kao što je prikazano u ovom primjeru, dobijamo traženu vrstu numeracije. kontrainkrement je potreban za povećanje broja liste za jedan. Imajte na umu da se isti identifikator, pod nazivom item , koristi u cijelom. Konačni kod je prikazan u primjeru 3.

                                Primjer 3: Promjena prikaza liste

                                1. Prvo
                                2. Sekunda
                                3. Treće
                                4. Četvrto

                                Koristeći gornju metodu, možete napraviti bilo koju vrstu numerirane liste, na primjer, staviti broj u uglaste zagrade, u ovom slučaju će se samo jedan red promijeniti u stilovima.

                                Sadržaj: "[" counter(item) "] ";

                                Spisak sa ruskim slovima

                                Postoji numerisana lista sa latiničnim slovima, ali nema ruskih slova za listu. Mogu se dodati umjetno koristeći gornju tehniku. Pošto se numerisanje vrši preko stilova, sama lista ostaje originalna, dodaje joj se samo odabrana klasa, nazovimo je ćirilica (primer 4).

                                Primjer 4: Kod za kreiranje liste

                                1. Jedan
                                2. Dva
                                3. Tri

                                Dodavanje slova se vrši pomoću pseudoelementa ::before i svojstva content. Pošto svaki red mora imati svoje slovo, koristićemo pseudo-klasu :nth-child(1) sa brojem slova napisanim u zagradama. Prvo slovo je, naravno, A, drugo je B, treće je C, itd. Cijeli ovaj skup se dodaje li selektoru na sljedeći način (primjer 5).

                                Primjer 5: Upotreba pseudo-class:nth-child

                                Ćirilica li:nth-child(1)::before (sadržaj: "a)"; ) .cyrilic li:nth-child(2)::before (sadržaj: "b)"; ) .cyrilic li:nth-child(3)::before (sadržaj: "na)"; )

                                U ovom primjeru, svako slovo je praćeno zagradama, sva slova su mala. Možete definisati sopstveni tip numerisanja liste, na primer može da sadrži velika slova sa tačkom, sa jednom ili dve zagrade ili samo slova. Za razliku od standardnog numerisanja, mi smo slobodni da radimo šta god želimo. Lista od deset slova trebala bi biti dovoljna za gotovo sve situacije, ali ako se to odjednom pokaže nedovoljno, ništa nas ne sprječava da proširimo listu i uključimo barem sva slova ruske abecede.

                                Konačno podešavamo poravnanje i poziciju slova, opciono određujemo veličinu fonta, boju i druge parametre (primjer 6).

                                Primjer 6. Lista sa ruskim slovima

                                1. Borsch
                                2. Kotleti od štuke
                                3. Kulebyaka
                                4. Pečurke u pavlaci
                                5. Palačinke sa kavijarom
                                6. Kvass

                                Rezultat ovaj primjer prikazano na sl. 3.