Jedna od vrsta popisa implementiranih u HTML je popis s grafičkim oznakama. Inače se popisi ove vrste nazivaju nenumerirani ili neuređeni. Prezime se često koristi kao službeni prijevod naziva odgovarajuće oznake

, uz pomoć kojih se popisi ove vrste organiziraju u HTML dokumentima (UL - Unordered List, neuređeni popis).

U popisu s grafičkim oznakama za označavanje njegovih elemenata koriste se posebni znakovi koji se nazivaju markeri popisa (često se nazivaju grafičkim oznakama, što je formalni izgovor engleskog izraza bullet). Izgled markera popisa određuje preglednik, a prilikom stvaranja ugniježđenih popisa preglednici automatski mijenjaju izgled markera na različitim razinama ugniježđivanja.

Oznake

I

Za izradu popisa s grafičkim oznakama potrebno je koristiti oznaku spremnika unutar koje se nalaze svi elementi popisa. Početne i završne oznake popisa daju prijelom retka prije i poslije popisa, odvajajući tako popis od glavnog sadržaja dokumenta, tako da ovdje nema potrebe koristiti oznake odlomaka


.

Svaki element popisa mora započeti oznakom

• (LI - Stavka popisa, element popisa). Označiti
• ne zahtijeva odgovarajuću završnu oznaku, iako njezina prisutnost u načelu nije zabranjena. Preglednici se obično pokreću svaki put kad prikažu dokument. novi element lista iz novog retka.

  Navedene informacije dovoljne su za izradu osnovnog popisa s grafičkim oznakama. Dajmo primjer HTML dokumenta koji koristi popis s grafičkim oznakama, čiji je prikaz preglednika prikazan na sl. 2.1.

  Horoskopski znakovi:

  • Ovan

  • Bik

  • Blizanci

  • Djevica

  • Vage

  • Škorpion

  • Strijelac

  • Jarac

  • Vodenjak

  • Riba

  Riža. 2.1. Prikaz popisa s grafičkim oznakama u pregledniku

  Imajte na umu da osim elemenata popisa označenih oznakom

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

  Bilješka

  Neki udžbenici o HTML jeziku navode da bi se za postavljanje naslova liste trebala koristiti oznaka spremnika (LH - List Header, zaglavlje liste). Ovu oznaku trenutno ne prepoznaje niti jedan uobičajeni preglednik i nije dio HTML specifikacije. Stoga njegova uporaba postaje besmislena, iako neće dovesti do pogrešaka.

  U oznaci

  mogu se odrediti dva parametra: COMPACT i TYPE.

  Parametar COMPACT napisan je bez vrijednosti i koristi se za indikaciju pregledniku da ovaj popis treba predstaviti u kompaktnom obliku. Na primjer, font ili udaljenost između redaka popisa itd. mogu se smanjiti.

  Bilješka

  Trenutno, prisutnost parametra COMPACT u oznaci

  ni na koji način ne utječe na prikaz popisa u vodećim preglednicima. Stoga aplikacija ovaj parametar je besmislen, pogotovo jer njegovu upotrebu ne preporučuje specifikacija HTML 4.0.

  Parametar TYPE može imati sljedeće vrijednosti: disk, krug i kvadrat. Ovaj se parametar koristi za prisilno pojavljivanje grafičkih oznaka popisa. Točna vrsta markera ovisit će o pregledniku koji koristite. Uobičajene opcije prikaza su sljedeće:

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

  .

  Zadana vrijednost je TYPE = disk. Za ugniježđene popise s grafičkim oznakama, zadana vrijednost je disk na prvoj razini, krug na drugoj razini, kvadrat na trećoj razini i dalje. To je upravo ono što se radi u najnovije verzije Netscape preglednici i Internet Explorer. Imajte na umu da drugi preglednici mogu drugačije prikazati oznake. Na primjer, u HTML specifikacije 4.0 za vrstu oznake koja se prikazuje kada je vrijednost TYPE = kvadrat, označen je nepopunjeni kvadrat (kvadratni obris).

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

  • .

    Primjer unosa:

  • .

    Bilješka

    Preglednici različito tumače specifikaciju tipa grafičke oznake za pojedinačnu stavku popisa. Netscape preglednik mijenja izgled markera za ovaj i sve sljedeće dok se ne naiđe na sljedeću redefiniciju izgleda markera. Internetski preglednik Explorer mijenja izgled markera samo za ovaj element.

    Oznake grafičkog popisa

    Možete koristiti grafičke slike kao grafičke oznake, što se široko koristi za stvaranje atraktivnih, dobro dizajniranih HTML dokumenata. Zapravo, takva se mogućnost ne pruža izravno HTML jezik, ali se provodi pomalo 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 popisa na HTML stranicama. Ispada da oznaka popisa

    (kao, doista, oznake popisa drugih vrsta, o kojima se govori u nastavku) obavlja jednu zadaću - govori pregledniku da sve informacije koje se nalaze nakon te oznake trebaju biti prikazane pomaknute udesno (uvučene) za određeni iznos. Oznake
    • , pokazujući na pojedinačne elemente popisa, pružaju izlaz standardni markeri elementi popisa.

      Ako trebamo napraviti popis s grafičkim markerima, onda možemo potpuno bez oznaka

    • . Prije svakog elementa popisa bit će dovoljno umetnuti željenu grafičku sliku. Jedini problem koji treba riješiti je međusobno odvajanje elemenata popisa. Za to možete koristiti oznake odlomaka

      Ili prisilno prebacivanje redaka
      . Primjer implementacije liste s grafičkim markerima, čiji je prikaz prikazan na sl. 2.2 prikazan je u nastavku:

      koji će se prenositi samo jednom. Veličine datoteke male slike također su iznimno male.

      Bilješka

      Metode za kreiranje popisa s grafičkim oznakama raspravljaju se redom u poglavlju 8.

      
      

      Glavne upotrebe popisa:

      Numerirani - za popis elemenata koji slijede u strogo definiranom redoslijedu.

      S grafičkim oznakama - za popis elemenata nasumičnim redoslijedom.

      Višerazinski - za određivanje informacija određenih elemenata.

      Popis definicija - koristi se za oblikovanje rječnika.

      HTML stranica s numeriranim popisom

      Oznake se koriste za stvaranje numeriranih popisa

      1. Označiti

         Označiti

         1. Prema zadanim postavkama, stavke popisa su numerirane redom 1, 2, 3... Pomoću atributa TYPE možete promijeniti stil numeriranja.

            Označavanje 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ći popis nove vrijednosti, preglednik će to automatski ponovno izračunati.

            Pomoću atributa POČETNA VRIJEDNOST možete promijeniti redoslijed numeriranja popisa.

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

            VRIJEDNOST - omogućuje dodjeljivanje proizvoljnog broja bilo kojem elementu liste.

            Primjer:

            HTML stranica s popisom s grafičkim oznakama

            Oznake se koriste za izradu popisa s grafičkim oznakama

            Označiti

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

            Označiti

            • označavaju početak/kraj pojedinog elementa liste.

              Prema zadanim postavkama, stavke popisa označene su crnim krugom. Atribut TYPE može se koristiti za promjenu stila označavanja.

              Unutar jednog popisa možete koristiti različite oznake za elemente popisa.

              Primjer:

              HTML stranica popisa na više razina

              Za izradu višerazinskih popisa možete koristiti popise s grafičkim oznakama ili numerirane popise ili kombinaciju oba. Popis s više razina stvara se ugniježđivanjem jednog popisa u tijelo drugog. Glavni zadatak je ne zbuniti se. Da biste to učinili, savjetujem vam da napravite različite uvlake za pojedinačne popise.

              Popisi definicija html stranica

              Za izradu popisa definicija koriste se tri oznake:

              - početak/kraj liste.

              - početak/kraj određenog roka.

              - početak/kraj pojašnjenja pojma.

              Oznake

              I

              nije potrebno izmjenjivati. Oni. Možete “povezati” više pojmova s ​​jednom definicijom i obrnuto.

              Primjer:

              HTML kôd: Pojam 1 Sažetak 1 do pojma 1 Sažetak 2 uz termin 1

              Prikaz preglednika: Pojam 1 Sažetak 1 na pojam 1 Sažetak 2 na pojam 1

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

              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

                Često mogućnosti jednostavnih popisa nisu dovoljne; na primjer, pri izradi tablice sadržaja nema načina bez 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, in 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). */ counter-increment: li; / * Svojstvo content prikazuje broj stavke popisa. counters() znači da generirani tekst predstavlja vrijednosti svih brojača s tim imenom. Točka u navodnicima dodaje razdjelnu točku 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

              HTML podržava popise od tri različiti tipovi, od kojih svaki ima svoje parametre:

              • – numerirani (brojkama ili slovima) popis, čiji svaki element ima serijski broj (slovo);
                1. – popis s grafičkim oznakama (ne numeriran), uz svaki element na kojem se nalazi oznaka (umjesto numeričkih ili slovnih znakova koji označavaju serijski broj);

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

                   Numerirani popisi

                   U numerirani popis, preglednik automatski umeće brojeve elemenata redom, počevši od određene vrijednosti (obično 1). To vam omogućuje umetanje i brisanje stavki popisa bez ometanja numeriranja, jer će se preostali brojevi automatski ponovno izračunati.
                   Numerirani popisi izrađuju se pomoću blok elementa

                   (od engleskog Ordered List - numerirani popis). Pored kontejnera
                   za svaku stavku popisa postavlja se element
                   1. (od engleskog List Item - stavka popisa). Zadana postavka je numerirani popis s arapskim brojevima.
                      Označiti
                      ima sljedeću sintaksu:
                      1. element 1
                      2. element 2
                      3. element 3

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

                      Primjer: Numerirani popis

                      • Probajte sami"

                      Korak po korak upute

                      1. Uzmi ključ
                      2. Umetnite ključ u bravu
                      3. Okrenite ključ dva puta
                      4. Izvadi ključ iz brave
                      5. Otvori vrata

                      Korak po korak upute

                      1. Uzmi ključ
                      2. Umetnite ključ u bravu
                      3. Okrenite ključ dva puta
                      4. Izvadi ključ iz brave
                      5. Otvori vrata

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

                      , koji se koristi za označavanje vrste numeriranja (slova, latinica i arapski brojevi i tako dalje.). Sintaksa:

                      Ovdje: tip – popis simbola:

                      • 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 . . .) (korišteni prema zadanim postavkama).

                      Ako želite da popis počinje s brojem koji nije 1, trebali biste to navesti pomoću atributa početak označiti

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

                      Numeriranje se također može započeti pomoću atributa vrijednost, koji se dodaje elementu

                      1. na sljedeći način:

                      7. U tom slučaju prekida se sekvencijalno numeriranje popisa i od ove točke ponovno počinje numeriranje, u ovom slučaju od sedam.

                         Primjer korištenja atributa vrijednost označiti

                      8. , koji vam omogućuje promjenu broja zadanog elementa popisa:

                         U ovom primjeru, "Prva stavka popisa" bila bi broj 1, "Druga stavka popisa" bila bi broj 7, a "Treća stavka popisa" bila bi broj 8.

                         Formatiranje numeriranih popisa pomoću CSS-a

                         Za promjenu brojeva popisa trebate koristiti svojstvo lista-stil-tip CSS listovi stilova:

                         Stilovi numeriranih popisa

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

                         Primjer: Primjena CSS svojstva lista-stil-tip

                         Popisi s grafičkim oznakama

                         Popisi s grafičkim oznakama u biti su slični numeriranim popisima, samo što ne sadrže sekvencijalno numeriranje stavki. Popisi s grafičkim oznakama izrađuju se pomoću blok elementa

                         (od engleskog neuređenog popisa - nenumerirani popis). Svaki element popisa, kao kod numeriranih popisa, počinje oznakom
                         • . Preglednik uvlači svaku stavku popisa i automatski prikazuje grafičke oznake.
                           Označiti
                           ima sljedeću sintaksu:
                           • Prva točka
                           • Druga točka
                           • Treća točka

                           U sljedećem primjeru možete vidjeti da se prema zadanim postavkama mala oznaka u obliku ispunjenog kruga dodaje prije svake stavke popisa:

                           Unutar oznake

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

                             Ugniježđene liste

                             Svaki popis može biti ugniježđen unutar drugog. Unutar elementa
                           • Dopušteno je stvoriti ugniježđeni popis ili popis druge razine. Za ugniježđivanje popisa opišite novi popis unutar elementa
                           • već postojeći popis. Kada ugniježdite jedan popis s grafičkim oznakama u drugi, preglednik automatski mijenja stil grafičkih oznaka za popis druge razine. Svaki popis može biti ugniježđen unutar drugog. Sljedeći primjer pokazuje strukturu popisa s grafičkim oznakama ugniježđenog unutar druge stavke numeriranog popisa.

                             Primjer: ugniježđene liste

                             • Probajte sami"
                             • ponedjeljak
                               1. Poslati mail
                               2. Posjet uredniku
                                  • Odabir teme
                                  • Dekorativni dizajn
                                  • Završno izvješće
                               3. Večernji pregled poruka
                             • utorak
                               1. Revidirajte raspored
                               2. Pošalji slike
                             • Srijeda...
                             • ponedjeljak
                               1. Poslati mail
                               2. Posjet uredniku
                                  • Odabir teme
                                  • Dekorativni dizajn
                                  • Završno izvješće
                               3. Večernji pregled poruka
                             • utorak
                               1. Revidirajte raspored
                               2. Pošalji slike
                             • Srijeda...

                             Oblikovanje popisa s grafičkim oznakama

                             Za promjenu izgled treba koristiti svojstvo markera liste lista-stil-tip CSS listovi stilova:

                             Sljedeći primjer prikazuje različite stilove popisa s grafičkim oznakama:

                             Primjer: stilovi popisa s grafičkim oznakama

                             • Probajte sami"
                             • Kava
                             • Kava
                             • Kava
                             • Kava

                             Disk:

                             • Kava
                             • Mlijeko

                             Krug:

                             • Kava
                             • Mlijeko

                             Kvadrat:

                             • Kava
                             • Mlijeko

                             Ništa:

                             • Kava
                             • Mlijeko

                             Grafički markeri.

                             U HTML-u je moguće napraviti popis s grafičkim markerima. Jedna je stvar kada su markeri popisa standardni krugovi ili kvadrati, a sasvim druga stvar kada sam programer odabire oznaku u skladu s dizajnom stranice. Kako bi stavke popisa bile lijepe, često se koriste male slike.
                             Za zamjenu običnog markera s grafičkim, zamijenite svojstvo lista-stil-tip po nekretnini lista-stil-slika i navedite URL slike:

                             Primjer: Grafički markeri

                             • Probajte sami"

                             horoskopski znakovi

                             • Bik
                             • Blizanci

                             horoskopski znakovi

                             • Ovan
                             • Bik
                             • Blizanci

                             Popisi definicija (opisi)

                             Popisi definicija vrlo su korisni za stvaranje, na primjer, vašeg osobnog rječnika pojmova. Svaka stavka popisa definicija ima dva dijela: pojam i njegovu definiciju.
                             Stavljate cijeli popis u element

                             (od engleskog Definition List - popis definicija). Uključuje oznake

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

                             (od engleskog Definition Description - opis pojma koji se definira).
                             Popisi definicija često se koriste u znanstvenim, tehničkim i obrazovnim publikacijama, koriste se za sastavljanje glosara, rječnika, referentnih knjiga itd.

                             Opća struktura popisa opisa je sljedeća:

                             Prvi termin

                             Opis prvog pojma

                             Drugi termin

                             Opis drugog pojma

                             Sljedeći primjer prikazuje jedan od moguće upotrebe popis definicija:

                             Primjer: Popis definicija

                             • Probajte sami"

                             World Wide Web - s engl. World Wide Web (WWW) je distribuirani sustav koji omogućuje pristup povezanim dokumentima koji se nalaze na različitim računalima 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 poveznicama i jedinstvenim dizajnom.

                             Svjetska mreža

                             - s engleskog World Wide Web (WWW) je distribuirani sustav koji omogućuje pristup povezanim dokumentima koji se nalaze na različitim računalima povezanim na Internet.

                             Internet

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

                             Web stranica

                             - skup pojedinačnih web stranica koje su međusobno povezane poveznicama i jedinstvenim dizajnom.

                             Standardno je tekst pojma pritisnut uz lijevi rub prozora preglednika, a opis pojma nalazi se ispod i pomaknut je udesno.

                             Numerirane liste su skup elemenata sa svojim serijskim brojevima. Vrsta i vrsta numeriranja ovisi o parametrima elementa

                             , koji se koristi za izradu popisa. Sljedeće vrijednosti mogu poslužiti kao elementi numeriranja:
                             • Arapski brojevi (1, 2, 3, ...);
                             • Arapski brojevi s 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, ...);
                             • male rimske brojke (i, ii, iii, ...);
                             • armensko numeriranje;
                             • Gruzijsko numeriranje.

                             S praktičnog gledišta, načela prikazivanja stavki na popisu s grafičkim oznakama mogu se primijeniti na sličan način na numerirani popis. Ali s obzirom da imamo posla s nabrajanjem, postoje neke značajke o kojima će se dalje raspravljati.

                             Numeriranje popisa

                             Dopušteno je započeti popis od bilo kojeg broja; u tu svrhu koristi se početni atribut elementa

                             ili vrijednost elementa
                             1. . Vrijednost je bilo koji pozitivni cijeli broj. Nije bitno koja je vrsta numeriranja postavljena, čak i ako se kao popis koriste latinična slova. Ako se oba atributa start i value primjenjuju na popis u isto vrijeme, tada potonji ima prednost i numeriranje se prikazuje od broja navedenog pomoću value, kao što je prikazano u primjeru 1.

                                Primjer 1: Promjena numeracije liste

                                4. Trebali biste dobro paziti na svoje radno mjesto.
                                5. Podesite rasvjetu u prostoriji tako da se izvor svjetla nalazi sa strane ili iza operatera.
                                10. Kako biste izbjegli medicinske komplikacije, preporuča se odabrati stolicu s mekim sjedalom.

                                Prvi element popisa u ovom primjeru započet će rimskim brojem IV, budući da je naveden atribut start="4", zatim dolazi broj V, a posljednji element izlazi iz redoslijeda i dodjeljuje mu se broj X (slika 1).

                                Riža. 1. Rimski brojevi u popisu

                                Pisanje brojeva

                                Prema zadanim postavkama, numerirani popis ima određeni izgled: prvo je broj, zatim točka, a nakon toga se prikazuje tekst odvojen razmakom. Ovaj oblik pisanja je vizualan i prikladan, ali neki programeri radije vide drugačiji način dizajniranja numeriranja popisa. Naime, tako da umjesto točke stoji zatvorena zagrada, kao što je prikazano na Sl. 2 ili nešto slično.

                                

                                Riža. 2. Prikaz numeriranog popisa sa zagradom

                                Stilovi vam omogućuju promjenu vrste numeriranja popisa pomoću svojstava sadržaja i protupovećanja. Prvo, ol selektor mora biti postavljen na counter-reset : item, ovo je neophodno kako bi numeriranje u svakom novom popisu počelo iznova. U suprotnom, numeriranje će se nastaviti i umjesto 1,2,3 vidjet ćete 5,6,7. Vrijednost artikla jedinstveni je identifikator brojača; biramo ga sami. Zatim morate sakriti izvorne oznake kroz svojstvo stila list-style-type s vrijednošću none.

                                Svojstvo sadržaja obično radi u kombinaciji s 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. Izrada vlastitog numeriranja

                                Li::before ( content: counter(item) ") "; /* Dodajte zagradu brojevima */ protupovećanje: item; /* Postavite naziv brojača */ )

                                Svojstvo sadržaja s vrijednošću counter(item) prikazuje broj; Dodavanjem zagrade, kao što je prikazano u ovom primjeru, dobivamo potrebnu vrstu numeriranja. potrebno je protupovećanje za povećanje broja popisa za jedan. Imajte na umu da se isti identifikator, pod nazivom item, koristi svugdje. Konačni kod je prikazan u primjeru 3.

                                Primjer 3: Promjena prikaza popisa

                                1. Prvi
                                2. Drugi
                                3. Treći
                                4. Četvrta

                                Koristeći gornju metodu, možete napraviti bilo koju vrstu numeriranog popisa, na primjer, staviti broj u uglate zagrade, u ovom slučaju samo jedan redak će se promijeniti u stilovima.

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

                                Popis s ruskim slovima

                                Postoji numerirani popis s latiničnim slovima, ali nema ruskih slova za popis. Mogu se dodati umjetno koristeći gornju tehniku. Budući da se numeriranje vrši kroz stilove, sama lista ostaje originalna, dodaje se samo odabrana klasa, nazovimo je ćirilica (primjer 4).

                                Primjer 4: Kod za izradu popisa

                                1. Jedan
                                2. Dva
                                3. Tri

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

                                Primjer 5: Korištenje pseudo-class:nth-child

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

                                U ovom primjeru iza svakog slova slijedi zagrada, sva su slova mala. Možete definirati vlastitu vrstu numeriranja popisa, na primjer može sadržavati velika slova s ​​točkom, s jednom ili dvije zagrade ili samo slova. Za razliku od standardnog numeriranja, ovdje možemo raditi što god želimo. Popis od deset slova trebao bi biti dovoljan za gotovo sve situacije, ali ako se iznenada pokaže da to nije dovoljno, ništa nas ne sprječava da proširimo naš popis kako bismo uključili barem sva slova ruske abecede.

                                Na kraju podešavamo poravnanje i položaj slova, po želji određujemo veličinu fonta, boju i druge parametre (primjer 6).

                                Primjer 6. Popis s ruskim slovima

                                1. Boršč
                                2. Kotleti od štuke
                                3. Kulebyaka
                                4. Gljive u vrhnju
                                5. Palačinke s kavijarom
                                6. Kvas

                                Proizlaziti ovaj primjer prikazano na sl. 3.