Kako promijeniti stil numeriranja u html-u. Ispravno numeriranje u HTML ugniježđenim numeriranim popisima pomoću CSS-a. Ugniježđene liste s automatskim numeriranjem

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

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, ...);
Rimski brojevi u velika slova(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

. Vrijednost je bilo koji cijeli broj pozitivan 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

Popisi

Trebali biste dobro paziti na svoje radno mjesto.
Podesite rasvjetu u prostoriji tako da se izvor svjetla nalazi sa strane ili iza operatera.
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 je jedinstveni identifikator brojača koji sami biramo. 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

Popisi

Prvi
Drugi
Treći
Četvrta

Koristeći gornju metodu, možete napraviti bilo koju vrstu numeriranog popisa, na primjer, unijeti broj uglate zagrade, promijenit će se samo jedan redak 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

Jedan
Dva
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

Popis

Boršč
Kotleti od štuke
Kulebyaka
Gljive u vrhnju
Palačinke s kavijarom
Kvas

Rezultat ovog primjera prikazan je na sl. 3.

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

kako je prikazano dolje.

Prva točka
Druga točka
Treća točka

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

Primjer 11.3. Napravite numerirani popis

Numerirani popis

Rad s vremenom

stvaranje točnosti (nikada nećete zakasniti ni na što);
lijek za točnost (nikada se nećete žuriti);
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

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

Primjer 11.4. Numeriranje popisa

rimski brojevi

Kralj Magnum XLIV
Kralj Siegfried XVI
Kralj Sigismund XXI
Kralj Husbrandt I

Rezultat ovog primjera prikazan je na sl. 11.4.

Riža. 11.4. Numerirani popis rimskim brojevima

Za popise, čija je izrada pomoću HTML-a opisana ovdje, dostupna su sljedeća CSS pravila.

lista-stil-tip

Određuje grafičku oznaku ili numeriranje popisa umjesto atributa tipa u HTML kodu. Vrijednosti imovine za popisi s grafičkim oznakama Može biti:

disk- krug, postavljen prema zadanim postavkama.
krug- krug.
kvadrat- kvadrat.

Za numerirane popise svojstvu se obično dodjeljuju sljedeće vrijednosti:

decimal- Arapski brojevi, zadana vrijednost.
niže-rimski- mali rimski brojevi.
gornji-roman- veliki rimski brojevi.
niži-alfa- mala latinična slova.
gornji-alfa- velika latinična slova.

Također, za bilo koju vrstu popisa, svojstvo list-style-type može se postaviti na ništa, što će u potpunosti ukloniti oznaku.

Druge vrijednosti dostupne su za numerirane popise, kao što su cjk-ideografski postavlja ideografsko numeriranje, Armenac- tradicionalni armenski, i decimalna-početna-nula postavit će numeriranje rimskim brojevima, ali s vodećom nulom: 01, 02, 03... 09, međutim u praksi se te i slične vrijednosti koriste izuzetno rijetko.

Primjer u nastavku prikazuje tri popisa: numerirani popis s tradicionalnim armenskim numeriranjem, popis s grafičkim oznakama s krugom i numerirani popis sa stavkama numeriranim ideografski.

<a href="https://128gb.ru/hr/oformlenie-spiskov-list-style-pravila-css-dlya-nastroiki-vneshnego-vida-spiska-na-html.html">Popisuje CSS</a>

Prva točka
Druga točka
Treća točka

Prva točka
Druga točka
Treća točka

Prva točka
Druga točka
Treća točka

Proizlaziti.

Boja markera odgovara boji teksta na popisu određenom svojstvom boja.

lista-stil-slika

Omogućuje vam postavljanje vlastite slike kao oznake popisa. Na primjer, ako mapa koja sadrži stranicu popisa sadrži datoteku marker.png, koji želite koristiti, kod dizajna će biti sljedeći:

Ul (list-style-image: url("marker.png"); )

lista-stil-pozicija

Određuje položaj markera: ili je postavljen izvan granice elementa popisa ( list-style-position: izvana), ili se tekst prelama oko njega ( list-style-position: unutra).

Primjer ispod pokazuje razliku između ovih vrijednosti. U prvom slučaju, marker se nalazi unutar liste; u drugom slučaju, nalazi se izvan liste.

lista-stil-pozicija

Pogledajte samo razliku između iznutra i izvana.
U slučaju unutarnjeg, marker se uklapa izravno u popis, ne izlazeći izvan njegovih granica i ne ometajući izgled. Tekst teče oko njega, čini se da je marker unutra.
Vanjska vrijednost pomiče oznaku izvan popisa.

Kao rezultat, stvorena je sljedeća stranica:

u stilu popisa

Omogućuje vam da skratite kod ispisivanjem sva tri navedena svojstva u jednom redu. Pravila se pišu odvojena razmacima:

Ul ( stil liste: kvadrat iznutra; )

Pogledajmo primjer stranice s tri popisa. Prvi je numeriran brojevima u formatu 01, 02, drugi je označen prilagođenom slikom (datoteka marker.png u mapi sa stranicom), marker trećeg popisa je onemogućen.

HTML kod je dan ispod.

u stilu popisa

Prva točka
Druga točka
Treća točka

Prva točka
Druga točka
Treća točka

Prva točka
Druga točka
Treća točka

Preglednik će prikazati sljedeću stranicu.

Vrlo često morate koristiti numeriranje: prilikom izrade raznih popisa, popisa, dizajniranja tablice sadržaja ili tablice sadržaja itd.

CSS koristi brojače za automatizaciju procesa numeriranja.

Počnimo s jednostavnim primjerom. Zatim ćemo, na kompliciraniji način, stvoriti ugniježđeni popis s automatskim numeriranjem njegovih stavki i podstavki.

Identifikacija brojila

Prvo morate identificirati mjerač.

Koristeći svojstvo resetiranja brojača, brojaču se dodjeljuje ime i početna vrijednost. Ime može biti bilo koje, ali ne može započeti brojem.

Isječak koda:

Ovaj unos kaže da za oznaku instaliran je brojač s imenom broj s početnom vrijednošću 3.

Prema zadanim postavkama početna vrijednost brojača je 0.

Povećanje brojača

Za to se koristi svojstvo protuinkrementa. Također se koristi za određivanje inkremenata brojača - broja za koji će se vrijednost brojača povećati.

Isječak koda:

tijelo (poništavanje brojača: broj 3 ;)
tijelo p ( protupovećanje : broj 3 ; }

Ovaj isječak koda kaže da paragrafi ( označiti

) u tijelu dokumenta bit će numerirani brojačem brojeva u koracima od 3.

Prvi odlomak bit će označen brojem 6, budući da je početna vrijednost brojača 3, a njegov inkrement 3.

Zadana vrijednost za inkremente brojača je 1.

Sada su postavljeni svi potrebni parametri brojača: naziv, početna vrijednost, inkrement i element koji će biti numeriran. Unaprijediti....

Prikaz brojača

Sada morate prikazati vrijednost brojača i postaviti pravila za njegovu lokaciju. To se radi korištenjem svojstva sadržaja i pseudoelemenata prije i poslije.

Svojstvo content umeće sadržaj ispred ( prije) ili nakon ( nakon) navedenog elementa.

Isječak koda:

tijelo (poništavanje brojača: broj 3 ;)
tijelo p:nakon ( protupovećanje : broj 3 ; content : " jednako " brojač(broj) "." ;)

Dakle, prethodnom isječku koda dodali smo svojstvo sadržaja koje ispisuje riječ "jednako" iza koje slijedi vrijednost broja brojača i točka "." . Sve se to umeće na stranicu nakon sadržaja odlomka ( označiti

), što kaže pseudoelement after.

Eventualno...

Ispod je opisani primjer.

Isječak koda:

2 puta 3

3 puta 3

4 puta 3

5 puta 3

Proizlaziti:

Ugniježđene liste s automatskim numeriranjem

Pogledajmo primjer korištenja brojača za automatizaciju procesa numeriranja ugniježđenih popisa.

Trebali biste već znati, i iz HTML-a i iz proučavanja popisa u CSS-u, da se stavke popisa automatski numeriraju. Ali ovo numeriranje je najjednostavnije.

Što je s automatskim numeriranjem potklauzula poput 1.1, 1.2, 2.1, 2.2 itd.?

Ovaj problem je riješen pomoću brojača koji vam omogućuju automatizaciju procesa numeriranja ugniježđenih popisa.

Isječak koda:

Automatsko numeriranje u CSS-u

Prva stavka popisa

Prvi podstavak stavka 1

Drugi podstavak 1. stavka

Druga stavka popisa

Prvi podstavak stavka 2

Drugi podstavak 2. stavka

Treća stavka na popisu

Prvi podstavak stavka 3

Drugi podstavak 3. stavka

Treći podstavak 3. stavka

Proizlaziti:

Ovako automatizirate proces numeriranja ugniježđenih popisa!

Od autora: Web preglednici vam omogućuju promjenu izgled mnogo elemenata na stranici sa koristeći CSS. Ali kada renderiraju neke elemente na stranici, preglednici tvrdoglavo odbijaju promijeniti njihov dizajn. Na primjer, elementi obrasca kao što su padajući popisi (select), radio gumbi (radio) i potvrdni okviri (checkbox) imaju svoj specifičan izgled u svakom operacijski sustav, a preglednici pokušavaju nametnuti ovaj izgled web obrascima.

Web preglednici također određuju kako trebaju biti prikazani nenumerirani i numerirani popisi. Na primjer, preglednici jako otežavaju promjenu izgleda grafičkih oznaka za nenumerirane popise i brojeva za numerirane popise. Naravno, postoji nekoliko CSS svojstava za rad s popisima, kao što su list-style-type, list-style-image i list-style-position. Ali čak i učiniti nešto jednostavno (kao što je promjena boje brojeva na popisu) zahtijeva pribjegavanje sofisticiranim HTML/CSS zaobilaznim rješenjima.

Srećom, kombiniranjem nekoliko manje poznatih CSS svojstava, brojevima numeriranih popisa možete dati željeni izgled. Zapravo, nakon čitanja ovog vodiča, moći ćete promijeniti fontove, boje i gotovo sve druge atribute brojeva na numeriranom popisu.

Cijela tajna sastoji se od dvije komponente: prvo, potpuno sakriti standardne (zadane) brojeve u numeriranom popisu, i drugo, koristiti ::before pseudo-element za ponovno dodavanje ovih brojeva.

1. Dodajte klasu ili identifikator (ID) za numerirani popis. Ovo je dobra ideja koja vam omogućuje da kasnije identificirate svaki popis za koji želite stvoriti vlastite brojače:

Ovo je prvi element
Ovo je drugi element
Ovo je treći element
Ovo je četvrti element
Ovo je peti element
Ovo je šesti element

< ol class = "custom-counter" >

< / ol >

Ako koristite samo selektore oznaka kao što su ol ili li, završit ćete s istim brojačima za sve numerirane popise na stranici, s istim izgledom.

2. Otkažite zadani prikaz markera popisa. Prvo, morate biti sigurni da preglednik neće dodati zadani izgled za brojače. U tome će vam pomoći sljedeće pravilo:

Prilagođeni brojač ( margin-left: 0; padding-right: 0; list-style-type: none; )

Custom - counter (

margina - lijevo: 0;

ispuna - desno: 0;

list-style-type: nijedan;

Ovo pravilo također uklanja uvlake koje preglednici dodaju na početku numeriranih popisa. Budući da neki preglednici koriste svojstvo margine za uvlačenje, a drugi koriste svojstvo padding, oba ova svojstva trebate postaviti na nulu.

3. Postavite naziv za svojstvo protupovećanja elemenata popisa. U CSS-u postoji svojstvo koje se zove protupovećanje. Omogućuje vam postavljanje naziva za vaš brojač. To nam ne daje ništa posebno, osim što možemo identificirati svoj brojač kada koristimo pseudoelement ::before (što ćemo učiniti u sljedećem koraku). Evo jednostavnog primjera koda za određivanje naziva brojača:

Prilagođeni brojač li (povećanje brojača: brojač koraka; )

Custom - counter li (

brojač prirasta : brojač koraka ;

U ovom primjeru naziv step-counter ne znači ništa posebno. To nije vrijednost za CSS svojstvo ili bilo što drugo. Ovo je samo ime koje ćemo od sada koristiti. Možete smisliti bilo koje ime: stepenica, pult ili čak boce-korijenskog-piva-na-zidu.

4. Upotrijebite pseudoelement ::before da biste dodali brojeve brojača i stilizirali ih:

Custom-counter li::before ( content: counter(step-counter); margin-right: 5px; font-size: 80%; background-color: rgb(200,200,200); color: white; font-weight: bold; padding : 3px 8px; border-radius: 3px )

Prilagođeno - brojač li::before(

sadržaj : brojač (brojač koraka ) ;

margina - desno: 5px;

ispuna: 3px 8px;

granica - radijus : 3px ;

Pseudo-element::before omogućuje umetanje sadržaja prije elementa. U našem slučaju, umetnut će sadržaj prije elementa liste. Vi koristite CSS svojstvo sadržaj kako biste rekli pregledniku koji sadržaj treba staviti na početak elementa popisa. To mogu biti stvarne riječi ili nešto što preglednik automatski generira.

Ovdje koristimo counter(), koji kao parametar uzima identifikator dobiven iz svojstva counter-increment. Upamtite da smo u koraku 2 specificirali naziv step-counter za svojstvo counter-increment, čime smo brojaču dali ime i rekli pregledniku da koristi brojač za svaki element popisa. Brojač će se povećati za jedan za svaki element popisa, tj. Kao rezultat, imat ćemo broj 1 ispred prvog elementa liste, broj 2 ispred drugog elementa liste, itd.

Naravno, preglednici to obično rade. Međutim, korištenjem pseudoelementa ::before također možemo oblikovati ove brojeve na način koji ne bi bio moguć sa standardnim numeriranim stavkama popisa. U biti, sva ostala svojstva u gornjem pravilu koriste se za jednostavno stvaranje cool izgleda brojača (npr. boja pozadine, zaobljeni kutovi, različita boja fonta itd.). Ovi stilovi pokazuju samo neke od načina na koje možete promijeniti izgled brojeva u numeriranim popisima. A postoji još više što možete učiniti, stoga slobodno upotrijebite CSS trikove koje poznajete kako biste izradili zanimljive, zabavne i lijepe popise s brojevima.

Na web stranici možete vidjeti gotov radni primjer korištenja ove tehnike