Izrada popisa u html-u. Numerirani popis

Popisi su važan dio sadržaja jer pomažu organizirati informacije. Tekst na popisima bolje se percipira i lakše pamti.

Najjednostavniji je da se ispred svakog njegovog elementa nalazi oznaka - krug, kvadrat ili krug. Redoslijed stavki na popisu s grafičkim oznakama nije važan.

Da biste ga izradili, trebate koristiti samo dvije oznake:

I
• .
  je spremnik koji sadrži popis čiji su elementi navedeni oznakom
  • .
    • Kamen
    • Škare
    • Papir

    Prema zadanim postavkama, oznaka popisa je crni krug ( disk). Dodavanjem u oznaku

    atribut tip a dodjeljivanjem odgovarajuće vrijednosti marker se može promijeniti u krug ( krug) ili crni kvadrat ( kvadrat).

    Razlikuje se od označenog po tome što je važan redoslijed elemenata u njemu, pa se umjesto markera ovdje koriste uzastopni brojevi ili slova. Nema potrebe brinuti o redoslijedu na popisu: preglednik se brine za ovaj zadatak. Ako promijenite popis (uklonite ili dodate stavku koja nije u redu), preglednik će ga ponovno izračunati i ispravno prikazati.

    Oznake se koriste za stvaranje numeriranih popisa

    I
    1. . Kontejner
       definira početak i kraj popisa, oznake
       1. specificira početak i kraj svog elementa - sve je samo kao na popisu s grafičkim oznakama
          zamijenjen sa
          .
          1. Kamen
          2. Škare
          3. Papir

          

          Budući da stvari nisu uvijek tako jednostavne s numeriranim popisima, za oznaku

          stvorio sljedeće atribute (napomena: ispod je samo numerirani popis):

          1. tip. Ovaj atribut omogućuje vam numeriranje popisa ne samo arapskim, već i rimskim brojevima ili latiničnim slovima različitih malih i malih slova. tip podržava vrijednosti 1 (zadano), a, A, i, I (pokušajte sami eksperimentirati s njima).

          2. početak. Numeriranje ne mora uvijek počinjati s jedinicom. Ovaj atribut omogućuje postavljanje početne vrijednosti - broja prvog elementa popisa. U njemu možete odrediti da izvještaj počinje, na primjer, brojem 100 ili slovom K.

          3. obrnuto. Ako popis ne treba ići od 1 do 10, već od 10 do 1, tada se ovaj atribut mora koristiti. Ako je navedeno, numeriranje će biti obrnutim redoslijedom.

          Kako biste dodijelili proizvoljan broj elementu u sredini popisa, morate koristiti u oznaci

          1. atribut :

          2. Četrdeset peti element nakon trideset osmog

          Promjenom broja jednog elementa u sredini liste, promijenit ćete numeraciju svih elemenata koji slijede - izvještaj će započeti s vrijednošću u atributu value. Na primjer, ako ste elementu 18 dodijelili broj 35, tada elementi koji slijede neće imati brojeve 19, 20, 21, već 36, 37, 38.

          Popis definicija

          Tip popisa koji nije toliko poznat kao oni koji su gore spomenuti. Sastoji se od pojmova i njihovih definicija. Stvoreno pomoću oznaka:

          - spremnik koji sadrži popis.

          - oznaka termina.

          - definicijska oznaka

          Opseg primjene popisa definicija su glosari, priručnici, testovi, rječnici i drugi obimni popisi tipa "Termin - objašnjenje".

          Evo popisa primjera definicija:

          Deskriptor

          Osnovna jedinica označnog jezika, svima poznata kao "Tag".

          Atribut

          Svojstvo oznake koje joj daje dodatne mogućnosti oblikovanja teksta.

          Označiti

          Jedna oznaka koja se ne mora zatvoriti.

          

          Popis koji se sastoji od popisa ugniježđenih jedan u drugi. Može uključivati ​​popise različitih vrsta. Poteškoća stvaranja leži u održavanju ispravnog ugniježđivanja oznaka, budući da se lako zbuniti u strukturi s više razina.

          Evo primjera popisa na više razina:

          Programski jezici se dijele na:

          • Strukturalni
          1. Pascal
          2. Oberon
          1. Zaborav
          • Objektno orijentirano
          1. Java
          • Funkcionalan
          1. Lisp
          2. Piton

          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

             Rezultat ovog primjera prikazan je na sl. 3.

             Popis je međusobno povezana zbirka pojedinačnih fraza ili rečenica koje počinju točkom ili brojem. Popisi pružaju mogućnost organiziranja i sistematiziranja različitih podataka te njihovog prikaza u vizualnom i korisniku jednostavnom obliku.

             Označiti

             postavlja numerirani popis, tj. svaki element popisa počinje brojem ili slovom i povećava se u koracima.

             Postavlja popis s grafičkim oznakama, čiji svaki element počinje malim znakom grafičke oznake.

             Označiti

             1. definira jedan element liste. Vanjska oznaka
                ili
                postavlja vrstu popisa - s grafičkim oznakama ili s brojevima.

                ,

                ,

                Triplet elemenata namijenjen je stvaranju popisa definicija. Svaki takav popis počinje spremnikom

                , gdje ide oznaka

                stvaranje izraza i oznake

                definiranje pojma. Završna oznaka

                nije obavezno jer sljedeća oznaka signalizira završetak prethodnog elementa. Međutim, dobar je stil zatvoriti sve oznake.

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

                , koji se koristi za izradu popisa. Svaka stavka na numeriranom popisu označena je oznakom
                1. kako je prikazano dolje.
                   1. Prva točka
                   2. Druga točka
                   3. Treća točka

                   Ako ne navedete nikakve dodatne atribute i samo napišite oznaku

                   , tada je zadana postavka popis s arapskim brojevima (1, 2, 3,...), kao što je prikazano u primjeru 11.3.

                   Primjer 11.3. Napravite numerirani popis

                   Rad s vremenom

                   1. stvaranje točnosti (nikada nećete zakasniti ni na što);
                   2. lijek za točnost (nikada se nećete žuriti);
                   3. promjena u percepciji vremena i satova.

                   Rezultat ovog primjera prikazan je na sl. 11.3.

                   Riža. 11.3. Prikaz numeriranog popisa

                   Imajte na umu da numerirani popis također dodaje automatsko uvlačenje na vrhu, dnu i lijevo od teksta.

                   Sljedeće vrijednosti mogu poslužiti kao elementi numeriranja:

                   • Arapski brojevi (1, 2, 3, ...);
                   • velika latinična slova (A, B, C, ...);
                   • mala latinična slova (a, b, c, ...);
                   • veliki rimski brojevi (I, II, III, ...);
                   • malim rimskim brojevima (i, ii, iii, ...).

                   Za označavanje vrste numeriranog popisa koristite atribut type oznake

                   . Njegove moguće vrijednosti dane su u tablici. 11.2.
                   Stol 11.2. Vrste numeriranih lista

                   Vrsta popisa	HTML kôd	Primjer
                   Arapski brojevi		1. Čeburaška 2. Krokodil Gena 3. Šapokljak
                   Velika slova latiničnog alfabeta		A. Čeburaška B. Krokodil Gena C. Shapoklyak
                   Mala slova latinične abecede		a. Čeburaška b. Krokodil Gena c. Shapoklyak
                   Rimski brojevi velikim slovima		I. Čeburaška II. Krokodil Gena III. Shapoklyak
                   Rimski brojevi malim slovima		ja Čeburaška ii. Krokodil Gena iii. Shapoklyak

                   Za početak popisa s određenom vrijednošću, upotrijebite početni atribut oznake

                   . Nije važno na koji je tip popis postavljen korištenjem type, atribut start radi isto i s rimskim i s arapskim brojevima. Primjer 11.4 pokazuje kako stvoriti popis pomoću velikih rimskih brojeva koji počinju s osam.

                   Primjer 11.4. Numeriranje popisa

                   8. Kralj Magnum XLIV
                   9. Kralj Siegfried XVI
                   10. Kralj Sigismund XXI
                   11. Kralj Husbrandt I

                   Rezultat ovog primjera prikazan je na sl. 11.4.

                   

                   Riža. 11.4. Numerirani popis rimskim brojevima