Ispravno numeriranje u HTML ugniježđenim numeriranim listama koristeći CSS. Stiliziranje lista u CSS Standardni bulletovi za liste sa nabrajanjem

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

– 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

(od engleskog List Item - stavka liste). Podrazumevana je numerisana lista sa arapskim brojevima.
Tag

element 1
element 2
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

Uzmi ključ
Umetnite ključ u bravu
Okrenite ključ za dva okreta
Izvadi ključ iz brave
Otvoriti vrata

Korak po korak instrukcije

Uzmi ključ
Umetnite ključ u bravu
Okrenite ključ za dva okreta
Izvadi ključ iz brave
Otvoriti vrata

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

arapski brojevi

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

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

na sljedeći način:
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

, 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

. Pretraživač uvlači svaku stavku liste i automatski prikazuje znakove za nabrajanje.
Tag

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čki markeri. 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

(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.

Kada je potrebno nešto numerisati na web stranici, najčešće se koristi uređena lista (

Pseudoelement:before se koristi za prikaz željenog sadržaja prije elementa kojem se dodaje. Radi u sprezi sa svojstvom sadržaja.

Međutim, vrijedi razjasniti da se numerirani brojači mogu primijeniti na više od samo uređenih lista. Na primjer, pretpostavimo da želite numerirati listu definicija (

element je novo pitanje, pa na njih primjenjujemo numeraciju. Izgledat će krajnje jednostavno:

Svojstvo sadržaja omogućava vam da umetnete generirani sadržaj u tekst web stranice koji izvorno nije prisutan u tekstu.
counter value Ispisuje vrijednost brojača specificiranu svojstvom poništavanja brojača.
Svojstvo poništavanja brojača postavlja identifikator brojača i postavlja početnu vrijednost.
Svojstvo counter-increment specificira korak za koji se povećava vrijednost brojača.

Često postavljana pitanja (poništavanje brojača: my-badass-counter; ) .faq dt:before (sadržaj: counter(my-badass-counter); kontrainkrement: my-badass-counter; )
Pseudoelementu :before može se dodijeliti bilo koji stil. Na primjer:

Savladavši ovo svojstvo, možete numerisati šta god želite. Neki dan sam, na primjer, objavila jedan od mojih omiljenih recepata i svaki korak/fotografiju numerirala rimskim brojevima. Ovo mi je poslužilo kao podsjetnik: brojevi ne moraju biti decimali.

Numerička raznolikost je predstavljena kao vrijednosti svojstva tip-stil liste.
naime:

Sve što je potrebno je naznačiti željenu opciju u vrijednosti brojača.

Sadržaj: brojač (moj-broj, niži-rimski);
Budućnost CSS3

Navedeni materijal je relevantan za danas, ali bledi u poređenju sa mogućnostima koje se kriju u CSS3 listama. Kada ih pretraživači podržavaju, biće moguće, na primer, direktno raditi sa markerima liste.

Li::marker ( širina: 30px; text-align: desno; margin-right: 10px; display: inline-block; ) ol (list-style: symbols("*""2020""2021""A7"); ) ul (tip-stil liste: "ovdje bi trebala biti zvjezdica)"; )

Ako ste ikada pokušali promijeniti CSS stilove brojeva linija (cifara) u uređenim listama
, tada ste vjerovatno naišli na probleme. Nemoguće je doći do stilova ovih elemenata pomoću CSS selektora. Ali vrlo često dizajn interfejsa uključuje promjenu njegove boje, pozadine, veličine itd.

Evo najjednostavnijeg primjera nestilizirane liste:

html

Zasaditi drvo

Izgradite kuću

Odgajati sina

Pogledajmo nekoliko načina za rješavanje gornjeg problema.

Tradicionalno nespretan način.

Tradicionalni način za rješavanje ovog problema je sakrivanje brojeva redova koje automatski dodjeljuje pretraživač. U ovom slučaju, koristi se svojstvo stil liste: none; .

css
li( stil liste: nijedan; ) .num( boja: bijela; pozadina: #2980B9; prikaz: inline-block; text-align: centar; margina: 5px 10px; visina linije: 40px; širina: 40px; visina: 40px;)
html

1 Zasaditi drvo

2 Izgradite kuću

3 Odgajati sina

Slažem se, izgleda suvišno i nefleksibilno. Sakrivamo automatski postavljene brojeve sekvence i zamjenjujemo ih ručno određenim vrijednostima, zatrpavamo raspored itd.

Hajde da vidimo kako možemo postići isti rezultat bez začepljenja rasporeda i upotrebe pseudo-elementa::before i CSS svojstava content , counter-increment , counter-reset .

Prekrasan i ispravan način.

Prvo ćemo dati kod i demo, a onda ćemo shvatiti šta je šta.

css
ol( poništavanje brojača: myCounter; ) li( stil liste: nijedan; ) li:before (povećavanje brojača: myCounter; content:counter(myCounter); boja: bijela; pozadina: #2980B9; prikaz: inline-block; text-align: centar; margina: 5px 10px; visina linije: 40px; širina: 40px; visina: 40px; )
html

Zasaditi drvo

Izgradite kuću

Odgajati sina

Kao što vidite, html kod ostaje čist i lijep. U ovom slučaju, svi stilovi elemenata liste se prenose u css.

Pogledajmo tačku po tačku:

li::prije– kreira pseudoelement unutar liste, koji zauzima mjesto prvog djeteta.

counter-reset:myCounter;– resetuje myCounter css brojač unutar svakog
.
kontrainkrement: myCounter;– povećava css brojač myCounter za svaki pseudoelement::before.

content:counter(myCounter);– ispisuje trenutnu vrijednost brojača myCounter unutar pseudoelementa::before.

Više detalja o css brojačima možete pronaći u

Često morate koristiti numeraciju: prilikom kreiranja raznih lista, lista, dizajniranja sadržaja ili tabele sadržaja itd.

CSS koristi brojače za automatizaciju procesa numerisanja.

Počnimo s jednostavnim primjerom. Zatim ćemo, na složeniji način, kreirati ugniježđenu listu s automatskim numeriranjem njenih stavki i podstavki.

Identifikacija brojila

Prvo morate identificirati mjerač.

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

Isječak koda:

Ovaj unos kaže to za oznaku instaliran je brojač pod nazivom broj sa početnom vrijednošću 3.

Po defaultu, početna vrijednost brojača je 0.

Povećanje brojača

Za ovo se koristi svojstvo kontrainkrementa. Također se koristi za određivanje inkrementa brojača - broja za koji će se vrijednost brojača povećati.

Isječak koda:

tijelo (resetiranje brojača: broj 3 ;)
tijelo p (protuporast: broj 3 ; }

Ovaj isječak koda kaže da paragrafi ( tag
) u tijelu dokumenta bit će numerisani brojačem brojeva u koracima od 3.

Prvi paragraf će biti označen brojem 6, jer je početna vrijednost brojača 3, a njegov prirast je 3.

Zadana vrijednost za povećanje brojača je 1.

Sada su postavljeni svi potrebni parametri brojača: ime, početna vrijednost, prirast i element koji će biti numerisan. Dalje....

Displej brojača

Sada trebate prikazati vrijednost brojača i postaviti pravila za njegovu lokaciju. Ovo se radi pomoću svojstva sadržaja i pseudoelemenata prije i poslije.

Svojstvo sadržaja umeće sadržaj prije ( prije) ili poslije ( poslije) navedenog elementa.

Isječak koda:

tijelo (resetiranje brojača: broj 3 ;)
tijelo p:poslije (protuporast: broj 3 ; sadržaj : " jednako " brojač (broj) "." ;)

Dakle, prethodnom isječku koda smo dodali svojstvo sadržaja koje ispisuje riječ "jednako" praćenu vrijednošću broja brojača i tačkom "." . Sve ovo se ubacuje na stranicu nakon sadržaja pasusa ( tag
), što kaže pseudoelement poslije.

na kraju...

Ispod je opisani primjer.

Isječak koda:

2 puta 3

3 puta 3

4 puta 3

5 puta 3

rezultat:

Ugniježđene liste sa automatskim numeriranjem

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

Već bi trebalo da znate, kako iz HTML-a tako i iz proučavanja lista u CSS-u, da se stavke liste automatski numerišu. Ali ova numeracija je najjednostavnija.

Šta je sa automatskim numerisanjem potklauzula kao što su 1.1, 1.2, 2.1, 2.2, itd.?

Ovaj problem je riješen korištenjem brojača koji vam omogućavaju automatizaciju procesa numeriranja ugniježđenih lista.

Isječak koda:

Automatsko numerisanje u CSS-u

Prva stavka liste

Prvi podstav stava 1

Drugi podstav 1. stava

Druga stavka liste

Prvi podstav stava 2

Drugi podstav 2. stava

Treća stavka na listi

Prvi podstav stava 3

Drugi podstav 3. stava

Treći podstav 3. stava

rezultat:

Ovako automatizujete proces numerisanja ugniježđenih lista!

Dobar dan!

U ovom članku ćete naučiti o svim mogućnostima lista, razumjeti kako napraviti numerisanu listu i savladati oznake koje će vam pomoći da jednostavnu listu s nabrajanjem pretvorite u zanimljiviju i uočljiviju s proizvoljnim naznakama. Nakon završetka lekcije, imat ćete razumijevanje o tome gdje se koriste liste i pod kojim okolnostima se mogu koristiti.

Ovaj članak je treći u ovom kratkom kursu o osnovama HTML-a. Prije čitanja ove lekcije, preporučujem da prođete prethodne dvije:

Članak je tek počeo, a već možete primijetiti korištenje standardne liste s nabrajanjem. Na mojoj web stranici to izgleda prilično jednostavno: lijevo je mala uvlaka s linijom i kvadratnim markerom. Kasnije u članku ćemo detaljno pogledati koje vrste markera postoje, kako napraviti brojeve, a također i kako napraviti svoj marker.

U svakom dijelu članka, kreiranje određenih lista će biti popraćeno detaljnim objašnjenjima za umetanje određene liste.

1. Liste sa nabrajanjem u HTML-u

Ova vrsta liste se koristi za navođenje u tekstu skupa elemenata sa sličnim značenjima. Ovo može biti lista linkova koji se odnose na istu temu, detaljno objašnjenje za pojedine dijelove teksta. Ali hajde da vidimo kako izgledaju liste sa nabrajanjem u kodu:

A ovako to izgleda u pretraživaču:
Rice. 1.1. Standardni prikaz neuređene HTML liste u pretraživaču
1.1 Standardne oznake za nabrajane liste

Na gornjoj slici (slika 1.1.) možete vidjeti krugove na početku svake stavke menija. Ovo je marker. Podrazumevano se pojavljuje kao popunjen krug u pretraživaču. U HTML-u postoji nekoliko tipova markera: popunjeni krug, prazan krug i kvadrat. Ne zahtijevaju nikakve CSS ili slike treće strane:

1.2 Marker liste u obliku praznog kruga

Znate vrijednosti atributa, ali sada da vidimo kako napraviti HTML listu sa nabrajanjem u kodu. Iz gornje tabele odabrali smo drugu vrijednost "krug" za atribut tipa i postavili ga na našu listu s nabrajanjem:

<html > <glava > <naslov > Primjer liste s nabrajanjem s praznim markerom kruga</naslov> </head> <tijelo > zvijezde: <ul type = "krug" > <li > Sirius</li> <li > Arcturus</li> <li > Pollux</li> <li > Betelgeuse</li> <li > Ned</li> </ul> </tijelo> </html>
Hajde odmah da vidimo kako će ovaj kod izgledati u pretraživaču:
Rice. 1.2. Prikaz markera liste kao kruga u pretraživaču
1.3 Marker liste u obliku kvadrata

Pogledajmo i posljednji primjer sa kvadratnim markerom za HTML listu:

Obratite pažnju na marker, postao je kvadratan:
Rice. 1.3. Prikaz markera liste kao kvadrata u pretraživaču
Važna napomena: Ova metoda se više ne koristi za kreiranje stilova za liste sa nabrajanjem. Postoji jasna razlika između CSS-a (pročitajte šta je CSS) i HTML-a. HTML služi za označavanje, a CSS za stvaranje atraktivnog izgleda.

Kôd koji sadrži ovaj atribut kada specificirate trenutnu vrstu dokumenta kao HTML5 (""), će dati grešku tokom validacije. Ako niste čuli šta je validacija, onda je ovo mjesto za vas.

Greška će biti sljedeća:
Rice. 1.4. Greška na validatoru kada se koristi atribut "type" liste
Sredili smo liste sa nabrajanjem. Sada pređimo na numerisane liste, a zatim pogledamo ugniježđene liste i nekoliko gotovi primjeri, koji se najčešće koriste na stvarnim stranicama.

2. Numerisane liste u HTML-u

Za razliku od prethodne vrste lista, numerisane liste imaju jednu važnu osobinu: automatski se numerišu. Ovo je korisno kada trebate numerisati veliku listu. Ručno će vam trebati dosta vremena, a i dalje možete biti zbunjeni. Brojčana lista je specificirana pomoću oznake. Kako to izgleda u praksi:

Primjer numerisane liste:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html > <glava > <naslov > Primjer standardne numerisane liste</naslov> </head> <tijelo > Od jedan do pet: <ol > <li > Prvo</li> <li > Sekunda</li> <li > Treće</li> <li >Četvrto</li> <li > Peto</li> </ol> </tijelo> </html>
Ovako izgleda numerisana lista: standardne postavke u pretraživaču:
Rice. 2.1. Numerisana lista u pretraživaču sa standardnim postavkama
Kao i njegov prethodnik (bullet lista), ima svoje stilove za prikazivanje brojeva. Redovno numerisanje nije jedina vrsta nabrajanja za numerisanu listu u HTML-u.

2.1 Standardne oznake za numerisane liste

Ovdje imamo izbor ne između tri vrste markera, već od pet:

Ime markera vrijednost atributa "type". Primjer liste
Markeri u obliku arapskih brojeva 1
Badminton

Bejzbol

Markeri u obliku malih latiničnih slova a
Chomolungma

Chogori

Kanchenjunga

Markeri u obliku velikih latiničnih slova A
Summit Plummet

Tantrum Alley

Insano

Oznake za male rimske brojeve i
Filipinsko more

Arabijsko more

koraljno more

Oznake velikih rimskih brojeva I
Crveni

Zeleno

Plava

2.2 Vlastito numeriranje u HTML listi

Pored uobičajenog izlaza numerisane liste, takođe možemo započeti naše numerisanje od bilo kog broja. Da biste to učinili, morate postaviti dodatni atribut "start" . Ovo numerisanje radi na svim tipovima markera za numerisane liste. Kako to izgleda u praksi:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html > <glava > <naslov > Prilagođeno numerisanje za numerisanu listu</naslov> </head> <tijelo > Počinjemo numerisati od dvanaest: <ol type = "a" start = "12" > <li > Dvanaest</li> <li > Trinaest</li> <li >Četrnaest</li> <li > Petnaest</li> <li >Šesnaest</li> </ol> </tijelo> </html>
Evo kako će izgledati na stvarnoj stranici:
Rice. 2.2. Numeracija od proizvoljnog broja u numerisanoj listi
Na gornjoj slici smo numerisali listu počevši od dvanaest, dok smo markere napravili u obliku malih latiničnih slova. Sada je, mislim, postalo jasno kako koristiti ove atribute u svojim projektima.

Pa, sada pređimo na ugniježđene HTML liste.

3. Kako napraviti višeslojnu (ugniježđenu) listu u HTML-u

Liste na više nivoa se koriste na sajtu za pravljenje menija. Ovaj meni se najčešće čini ili padajućim menijem nadole (lekcija na) ili levo ili desno padajući meni. Takvi meniji vam omogućavaju da pohranite druge elemente menija u kompaktnom obliku.

Koristeći modele automobila kao primjer, napravit ćemo listu na više nivoa u HTML-u:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html > <glava > <naslov > HTML Nested Bullet List</naslov> </head> <tijelo > <ul > <li > Citroen<ul > <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Picasso</li> <li > C4 Grand Picasso</li> </ul> </li> <li > KIA</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </tijelo> </html>
Obratite pažnju kako lista na više nivoa izgleda u pretraživaču:
Rice. 3.1. Primjer višeslojne liste u HTML-u
Napravili smo listu na više nivoa koristeći oznaku (tag
). Lista na više nivoa sa Citroen modelima pojavila se sa drugim oznakama. Glavna lista ima popunjene oznake, a lista 2. nivoa ima prazne krugove. Ali, kao što se sjećate, pomoću atributa "type" možemo redefinirati markere (bolje je postaviti ).

Ali možemo se ujediniti liste na više nivoa numerisan i označen na sledeći način:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html > <glava > <naslov > Numerisane liste i liste na više nivoa u HTML-u</naslov> </head> <tijelo > <ul > <li > Prva grupa tulipana<ol > <li > Prvi razred<ul > <li > Jednostavni rani tulipani</li> </ul> </li> <li > Druga klasa<ul > <li > Terry tulipani</li> </ul> </li> </ol> </li> </ul> </tijelo> </html>
U gornjem primjeru imamo dvostruko ugniježđenje (2 nivoa). Prvo, uključena je lista dvije klase tulipana; imamo je numerisanu. Zatim je lista sa nabrajanjem ugniježđena unutar svake od stavki u numerisanoj listi.

Pogledajmo kako to izgleda u pretraživaču:
Rice. 3.2. Primer numerisane liste na više nivoa u listi sa nabrajanjem u pretraživaču
4. Korisni materijali na HTML listama

Ovo je informacija koja zahtijeva razumijevanje CSS svojstava. Da biste to učinili, preporučujem proučavanje sljedećih lekcija: . Svi primjeri će biti odmah sa izvorni kod i podijeljeni su na kartice HTML (struktura), CSS (stilovi) i Rezultat (rezultat).

4.1 Kako napraviti HTML listu u string

Pretvaranje HTML liste u string može biti potrebno prilikom kreiranja horizontalnog menija. Vrlo je lako uraditi:

4.2 Kako napraviti HTML listu bez ikone

Svojstvo list-style-type u CSS-u je odgovorno za ovo (više detalja):

4.3 Kako centrirati listu u HTML-u

Stavka liste je blok element, tako da je potrebno centrirati korištenjem paddinga. Ali postoji jedan važna tačka— moramo eksplicitno specificirati širinu da bi poravnanje funkcioniralo:

4.4 Kako napraviti listu u HTML-u sa slikama

Dovoljno je samo jedno CSS svojstvo, list-style-image. Unutar url-a navedite adresu prije ikone. Samo želim napomenuti da je bolje odmah odabrati malu sliku, jer visina linije liste ovisi o tome:

4.5 Lista za nabrajanje HTML-om svoj bullet

U tom slučaju morate unaprijed povezati ikone fonta (na primjer, FontAwesome). Tada možete napraviti bilo koju ikonu umjesto standardnog markera:

4.6 Kako napraviti listu u HTML-u u nekoliko kolona

Za izradu liste u nekoliko kolona koristićemo CSS svojstvo column-count (svojstvo je podržano samo u sljedećim pretraživačima: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Također morate postaviti visinu liste da vidite podjelu na više kolona:

5. HTML kombinovana lista

Da napravite kombinovani okvir HTML je bolji Samo koristite fontove ikona. Na primjer, Flaticon ili Fontawesome.

Ove informacije su već za napredne ljude, pa će vam prvo trebati.

6. Vježbajte rad sa listama

U videu ispod možete vidjeti sav rad sa HTML listama u praksi:

Da biste konsolidirali primljene informacije, preporučujem da sve korake izvršite ručno. Isprobajte različite oznake za liste, kreirajte numerisane liste, a zatim pređite na višeslojne (ugniježđene) liste i eksperimentirajte s njima.

Ovdje završavamo sa listama i prelazimo na sljedeću lekciju o slikama.

Ako vam je potrebno više od samo osnova izrade web stranica, ali želite savladati profesiju Front-end programera, onda obratite pažnju na kurs iz online škole Netology - "" i online škole Skillbox i kurs "".

Kurs traje dugo, ali ćete dobiti strukturirana znanja sa kojima možete odmah dobiti posao ukoliko ste zainteresovani za ovu oblast.

Ime markera	vrijednost atributa "type".	Primjer liste
Markeri u obliku arapskih brojeva	1	Badminton Bejzbol
Markeri u obliku malih latiničnih slova	a	Chomolungma Chogori Kanchenjunga
Markeri u obliku velikih latiničnih slova	A	Summit Plummet Tantrum Alley Insano
Oznake za male rimske brojeve	i	Filipinsko more Arabijsko more koraljno more
Oznake velikih rimskih brojeva	I	Crveni Zeleno Plava

Ispravno numeriranje u HTML ugniježđenim numeriranim listama koristeći CSS. Stiliziranje lista u CSS Standardni bulletovi za liste sa nabrajanjem

Numerisane liste

Primjer: Numerirana lista

Formatiranje numerisanih lista pomoću CSS-a

Primjer: Primjena CSS svojstva tip-stil liste

Označene liste

Ugniježđene liste

Primjer: Ugniježđene liste

Formatiranje lista za nabrajanje

Primjer: Stilovi liste za nabrajanje

Grafički markeri.

Primjer: Grafički markeri

Liste definicija (opisa)

Primjer: Lista definicija

Budućnost CSS3

html

Tradicionalno nespretan način.

css

html

Prekrasan i ispravan način.

css

html

Identifikacija brojila

Povećanje brojača

Displej brojača

na kraju...

Ugniježđene liste sa automatskim numeriranjem

1. Liste sa nabrajanjem u HTML-u

1.1 Standardne oznake za nabrajane liste

1.2 Marker liste u obliku praznog kruga

1.3 Marker liste u obliku kvadrata

2. Numerisane liste u HTML-u

2.1 Standardne oznake za numerisane liste

2.2 Vlastito numeriranje u HTML listi

3. Kako napraviti višeslojnu (ugniježđenu) listu u HTML-u

4. Korisni materijali na HTML listama

4.1 Kako napraviti HTML listu u string

4.2 Kako napraviti HTML listu bez ikone

4.3 Kako centrirati listu u HTML-u

4.4 Kako napraviti listu u HTML-u sa slikama

4.5 Lista za nabrajanje HTML-om svoj bullet

4.6 Kako napraviti listu u HTML-u u nekoliko kolona

5. HTML kombinovana lista

6. Vježbajte rad sa listama