Konkretan popis. Popis s grafičkim oznakama

30.03.2019 Željezo

Popis s grafičkim oznakama definira se dodavanjem malog markera, obično u obliku ispunjenog kruga, prije svake stavke popisa. Sama lista se formira pomoću kontejnera

kako je prikazano dolje.
- Prva točka
- Druga točka
- Treća točka
Popis mora sadržavati završnu oznaku

, inače će doći do pogreške. Završna oznaka Iako nije potrebno, uvijek preporučujemo da ga dodate na jasno odvojene stavke popisa.

Primjer 11.1 prikazuje HTML kod za dodavanje popisa s grafičkim oznakama na web stranicu.

Primjer 11.1. Napravite popis s grafičkim oznakama

Popis s grafičkim oznakama

Čeburaška
Krokodil Gena
Shapoklyak
Štakor Larisa

Proizlaziti ovaj primjer prikazano na sl. 11.1.

Riža. 11.1. Prikaz popisa s grafičkim oznakama

Obratite pozornost na ispunu na vrhu, dnu i lijevo od popisa. Takve se uvlake dodaju automatski.

Markeri mogu imati jedan od tri oblika: krug (zadano), krug i kvadrat. Za odabir stila markera upotrijebite atribut tipa oznake

Valjane vrijednosti

Vrsta popisa	HTML kôd	Primjer
Popis s kružnim oznakama		Prvi Drugi Treći
Popis s kružnim oznakama		Prvi Drugi Treći
Popis s kvadratnim oznakama		Prvi Drugi Treći

Izgled markera može malo varirati u različitim preglednicima, kao i pri promjeni fonta i veličine teksta.

Stvaranje liste s kvadratnim grafičkim oznakama prikazano je u primjeru 11.2.

Primjer 11.2. Vrsta markera

Popis s grafičkim oznakama

Mijenjanje uvjerenja

promjena vjere (izborno: budizam, konfucijanizam, hinduizam). Posebna ponuda- Judaizam i islam zajedno;
promjena uvjerenja o nepogrešivosti omiljene stranke;
uvjerenje da vanzemaljci postoje;
sklonost političkom sustavu kao najboljem te vrste (na izbor: feudalizam, socijalizam, komunizam, kapitalizam).

Rezultat ovog primjera prikazan je na sl. 11.2.

Popisi se aktivno koriste za automatsko numeriranje blokovi sadržaja. Međutim, kada se koriste ugniježđene liste, nemoguće je dobiti numeriranje potklauzula kao što su 1.1, 1.2, 1.3, budući da će svaka lista biti neovisna. Ali ono što nije moguće u SHTML-u može se dodijeliti stilovima.

Prvo, pogledajmo kako općenito stvoriti ugniježđene popise. Glavni spremnik je oznaka

. Ugniježđeni popis također počinje s

, ovo je način na koji se održava ispravna sintaksa (primjer 1).

Primjer 1: Uobičajeni ugniježđeni popis

Ugniježđeni popis

Stavak 1
1. Podtočka 1.1
2. Podtočka 1.2
3. Podtočka 1.3

Točka 2
1. Podtočka 2.1
2. Podtočka 2.2

Rezultat ovog primjera prikazan je na sl. 1. Imajte na umu da numeriranje ugniježđenih popisa svaki put počinje iznova.

Riža. 1. Ugniježđeni prikaz popisa

Uklonimo sada ugrađeno numeriranje popisa i napravimo novi, ali u obliku koji nam je potreban. Da biste to učinili, potrebna su vam tri atributa stila: resetiranje brojača, povećanje brojača i sadržaj.

counter-reset - postavlja varijablu koja će pohraniti vrijednost brojača;

protupovećanje - povećava ili smanjuje vrijednost brojača za navedeni broj;

sadržaj - ispisuje vrijednost brojača kada se koristi argument brojač(varijabla). Djeluje u kombinaciji s pseudoelementima poslije ili prije.

Za popis prve razine nazovimo varijablu brojača list1 , a za drugu razinu - list2 . Tada će pokretanje brojača za popise biti kako slijedi.

OL (poništavanje brojača: lista1; ) /* Popis prve razine */
OL OL (poništavanje brojača: lista2; ) /* Popis druge razine*/

U u ovom slučaju Birači sadržaja pomažu odvojiti ugniježđeni popis od vanjskog popisa. OL OL konstrukcija znači primijeniti stil samo na oznaku

Vrijednost brojača povećava se pomoću selektora OL LI:before, kojemu se dodaju atributi protupovećanja i stila sadržaja. Atribut counter-increment s vrijednošću list1 povećava vrijednost ovog brojača za jedan, a content: counter(list1) "." prikazuje vrijednost brojača prije stavke popisa. Ovi atributi rade u parovima, tako da moraju biti omogućeni istovremeno.

OL LI:prije ( /* Popis prve razine */
protupovećanje: popis1;
/* Ispis vrijednosti kao 1., 2.*/
}
OL OL LI:prije ( /* Popis druge razine */
protupovećanje: lista2; /* Povećaj vrijednost brojača */
}

Za ugniježđeni popis ponovno koristimo selektore sadržaja (OL OL) i istovremeno koristimo izlaz brojača list1 i list2, u ovom slučaju ćemo dobiti numeriranje vrste koja nam je potrebna.

Konačni kod je prikazan u primjeru 2.

Primjer 2. Ugniježđene liste s automatskim numeriranjem

Ugniježđeni popis

stavak
1. Podklauzula
2. Podklauzula
3. Podklauzula

stavak
1. Podklauzula
2. Podklauzula

Rezultat ovog primjera prikazan je na sl. 2.

Riža. 2. Vrsta automatskog numeriranja popisa u pregledniku Opera

Komentar

Navedeni primjer ne radi u pregledniku Internet Explorer do inačice 7 uključivo, budući da ne podržava nijedno od danih svojstava stila.

Budući da preglednik Internet Explorer ne podržava mnoge zanimljive stilske atribute, uobičajeno numeriranje na popisima treba ostaviti netaknuto posebno za njega. Da biste to učinili, uklonite list-style-type: none . Ali to će utjecati i na druge preglednike u kojima primjer radi ispravno, pa ćete morati upotrijebiti hack - to znači tehniku kada različitim preglednicima dat je drugačiji kod stila. Na primjer, možete koristiti oznaku !important. Dodavanje !important vrijednosti atributa stila povećava njegovu važnost. Ako redefinirate isti atribut bez !important, preglednici će ga zanemariti. Ali ne na internetu Verzije Explorera 6 i niže.

LI (
list-style-type: ništa !važno; /* Ukloni numeriranje u preglednicima Opera, Safari, Firefox */
list-style-type: decimalni; /* Ostavite numeriranje u pregledniku IE6 i niže */
}

Zamjenom ovih kodova nizom s LI selektorom u primjeru 2, dobivamo ugniježđeni popis koji radi ispravno u svim preglednicima.

Numerirani popisi skup su stavki sa svojim serijski brojevi. 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

moguće vrijednosti

Vrsta popisa	HTML kôd	Primjer
Arapski brojevi		1. Čeburaška 2. Krokodil Gena 3. Šapokljak
Velika slova latinica		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 u mala slova		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

U HTML jezik Postoje dvije vrste popisa: numerirani i nenumerirani. Njihovo stvaranje je gotovo isto. Čak se i oznake razlikuju za jedan znak. Također možete izraditi koji mogu uključivati i one s brojevima i markere.

Ovi popisi se mogu transformirati kako god želite. Sve ovisi o vašoj mašti. Prvo ćemo pogledati standardne liste, isto kao u Uređivač riječi, a zatim ćemo ih unaprijediti i dizajnirati do neprepoznatljivosti.

HTML numerirani popis

Uobičajeni numerirani jedan može se stvoriti pomoću sljedećih oznaka:

Prva stavka popisa

Druga stavka popisa

Treća stavka na popisu

Jednostavne liste izgledaju ovako

Prema standardima, svaka stavka popisa mora biti unutar početne i završne li oznake. Ali ako ne stavite završnu oznaku, rezultat će biti potpuno isti. Procesor je dosta pametan. Tijekom pretvorbe popisa analizira početne oznake. Ako vidi novu

, zatim automatski stavlja ispred njega

Stoga se mogu napraviti popisi kao što je prikazano u nastavku.

Ali sa stajališta profesionalaca, to je netočno.

Nenumerirane (ili bullet) liste se kreiraju na isti način, samo se umjesto oznake ol piše ul.

Nema brojeva ni slova - samo razni simboli zvani markeri.

HTML višerazinski numerirani popis

Mnogi korisnici su zainteresirani za ovu priliku. Stoga treba napomenuti da se svaki HTML numerirani popis može napraviti na više razina. Dodatne razine mogu biti isti ili označeni.

Za izradu popisa prikazanog u gornjem primjeru morate napisati sljedeće.

Imajte na umu da je u ovom kodu, za razliku od prvih primjera, dodan atribut tipa. Zahvaljujući njemu, možete odrediti vrstu sortiranja i za numerirane i za popise s grafičkim oznakama.

Za numerirane označavamo abecedu ili vrstu brojeva, a za ostale slučajeve - vrstu oznake.

Ako koristite posebna HTML oznaka, numerirani popis može postati što god želite.

Možete navesti atribut tipa s bilo kojom vrijednošću iz tablice. Ili u klasi stila css odredite list-style-type sa željenom vrstom sortiranja.

Prijevod vrijednosti je vrlo jednostavan. Dovoljno osnovno znanje na engleskom. Ali čak i ako ne možete prevesti riječi "krug", "kvadrat" itd., možete vizualno razumjeti što će biti rezultat kada navedete ove vrijednosti u atributu tipa.

Za numerirane popise koristite sljedeće opcije:

1 - arapski brojevi;
A - velika slova;
a - mala latinična slova;
I - veliki rimski brojevi;
i - male rimske brojke.

Zadana vrijednost je uvijek popis s To jest, ako ništa ne navedete, to je isto kao type="1".

Osim toga, numerirani popisi mogu započeti na bilo kojoj željenoj poziciji. Prema zadanim postavkama, izlaz počinje od 1. Ali ako želite, možete početi barem od sto. Da biste to učinili, trebate navesti početni atribut s bilo kojom vrijednošću.

Uz to se može zaključiti da obrnuti redoslijed. Da biste to učinili, morate pisati obrnuto.

Dizajn popisa

HTML numerirani popis može biti dizajniran tako lijepo da možda nećete odmah pogoditi o čemu se radi redoviti popis, a ne slika napravljena u Photoshopu.

Evo primjera lijepih popisa.

Kao što se može vidjeti iz primjera, možete promijeniti izgled numeriranje i sami elementi.

Možete napraviti običan popis poput ovog.

U css stilovima trebate navesti dizajn za ol oznake. Imajte na umu da će se u ovom slučaju postavke primijeniti na sve popise na web-mjestu gdje se koristi ova stilska datoteka.

Razmotrimo prvo opciju s dizajnom okruglog popisa. Povratak na popis kodova. Tamo je naznačena zaokružena lista klase. Ovo je klasa s kojom se trebate petljati kako biste stvorili takvu ljepotu. Možete nazvati razred kako god želite.

Sada pogledajmo kvadratni dizajn.

Stilovi su prilično slični. Razlika je u tome što je u prvom slučaju element zaokružen korištenjem CSS mogućnosti.

Profesionalni dizajner izgleda mora predvidjeti i razumjeti da ga ne koriste svi korisnici moderna računala. Nemaju svi instalirane Windows 7, 8, 10. Postoji postotak korisnika koji još uvijek koriste Windows XP i koriste starije verzije Internet preglednik Istraživač.

U pravilu, gotovo sva moderna poboljšanja dizajna elemenata nisu podržana od njih. Korisniku će se činiti da se na dizajnu stranice uopće nije radilo. Da se sve odselilo. Elementi se sudaraju jedni s drugima. Da biste to izbjegli, morate razmotriti sve mogućnosti.

Neki webmasteri zažmire na njih jer njihov udio jest moderno tržište postaje sve manji i manji. Ali profesionalcu je svaki posjetitelj bitan, pogotovo ako se radi o komercijalnoj stranici.

Napravite nešto prikladno za svakoga ili uzmite u obzir sve varijacije preglednika.

Dobar dan!

U ovom članku naučit ćete sve mogućnosti popisa, razumjeti kako napraviti numerirani popis i savladati oznake koje će vam pomoći pretvoriti jednostavan popis s grafičkim oznakama u zanimljiviji i uočljiviji s proizvoljnim grafičkim oznakama. Nakon završetka lekcije, razumjet ćete gdje se popisi koriste i pod kojim okolnostima se mogu koristiti.

Ovaj je članak treći u ovom kratkom tečaju o osnove HTML-a. Prije čitanja ovu lekciju Preporučujem da prođete kroz prethodna dva:

Članak je tek započeo, a već možete primijetiti korištenje standardnog popisa s grafičkim oznakama. Na mojoj web stranici to izgleda prilično jednostavno: s lijeve strane postoji mala uvlaka s linijom i četvrtastim markerom. Kasnije u članku ćemo detaljno pogledati koje vrste markera postoje, kako napraviti brojeve, a također i kako napraviti vlastiti marker.

U svakom dijelu članka, izrada određenih popisa bit će popraćena detaljnim objašnjenjima za umetanje pojedinog popisa.

1. Popisi s grafičkim oznakama u HTML-u

Ova vrsta popisa koristi se za popis u tekstu skupa elemenata sa sličnim značenjima. Ovo može biti popis poveznica koje su povezane s istom temom, detaljno objašnjenje Za pojedini dijelovi tekst. Ali pogledajmo kako liste s grafičkim oznakama izgledaju u kodu:

A ovako to izgleda u pregledniku:

Standardni pogled

1.1 Standardne grafičke oznake za popise s grafičkim oznakama

Na gornjoj slici (Slika 1.1.) možete vidjeti kružiće na početku svake stavke izbornika. Ovo je marker. Prema zadanim postavkama, pojavljuje se kao ispunjeni krug u pregledniku. U HTML-u postoji nekoliko vrsta markera: ispunjeni krug, prazan krug i kvadrat. Ne zahtijevaju CSS ili slike trećih strana:

1.2 Marker liste u obliku praznog kruga

Znate vrijednosti atributa, ali sada pogledajmo kako napraviti HTML popis s grafičkim oznakama u kodu. Iz gornje tablice odabrali smo drugu vrijednost "krug" za atribut tipa i zamolio ga za naš popis s grafičkim oznakama:

<html > <glava > <naslov > Primjer popisa s grafičkim oznakama s oznakom praznog kruga</naslov> </glava> <tijelo > Zvijezde: <ul tip = "krug" > <li > Sirius</li> <li > Arkturus</li> <li > Pollux</li> <li > Betelgeuse</li> <li > Sunce</li> </ul> </tijelo> </html>

Pogledajmo odmah kako će ovaj kod izgledati u pregledniku:

1.3 Marker popisa u obliku kvadrata

Pogledajmo i posljednji primjer s kvadratnim markerom za HTML popis:

Obratite pozornost na marker, postao je kvadrat:

Važna nota: Ova se metoda više ne koristi za stvaranje stilova za popise s grafičkim oznakama. postoji jasno odvajanje CSS (pročitajte što je CSS) i HTML. HTML je za označavanje, a CSS za stvaranje atraktivnog izgleda.

Kod koji sadrži ovaj atribut, prilikom navođenja vrste trenutni dokument poput HTML5(""), javit će pogrešku tijekom provjere valjanosti. Ako niste čuli što je validacija, onda je ovo mjesto za vas.

Greška će biti sljedeća:

Sredili smo popise s grafičkim oznakama. Sada prijeđimo na numerirane popise, a zatim pogledajmo ugniježđene popise i nekoliko njih gotove primjere, koji se najčešće koriste na stvarnim stranicama.

2. Numerirani popisi u HTML-u

Za razliku od prethodne vrste popisa, numerirani popisi imaju jedan važna značajka: Automatski ih numeriraju. Ovo je korisno kada trebate numerirati veliki popis. Ako to radite ručno, trebat će vam puno vremena, a još uvijek se možete zbuniti. Numerirani popis naveden je pomoću oznake. Kako to izgleda u praksi:

Primjer numerirane liste:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<html > <glava > <naslov > Primjer standardne numerirane liste</naslov> </glava> <tijelo > Od jedan do pet: <ol > <li > Prvi</li> <li > Drugi</li> <li > Treći</li> <li >Četvrta</li> <li > Peti</li> </ol> </tijelo> </html>

Ovako izgleda numerirani popis: standardne postavke u pregledniku:

Kao i njegov prethodnik (bullet list), ima vlastite stilove za prikaz brojeva. Uobičajeno numeriranje nije jedina vrsta grafičkih oznaka za numerirani popis u HTML-u.

2.1 Standardne grafičke oznake za numerirane popise

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

Ime markera	vrijednost atributa "type".	Primjer popisa
Markeri u obliku arapskih brojeva	1	Badminton Bejzbol
Markeri kao mala slova latinična slova	a	Chomolungma Čogori Kanchenjunga
Markeri u obliku velikih latiničnih slova	A	Summit Visak Aleja bijesa Insano
Oznake malim slovima rimskih brojeva	ja	Filipinsko more Arapsko more koraljno more
Oznake velikih slova rimskih brojeva	ja	Crvena zelena Plava

2.2 Vlastita numeracija u HTML listi

Osim uobičajenog izlaza numerirane liste, također možemo započeti naše numeriranje od bilo kojeg broja. Da biste to učinili, morate postaviti dodatni atribut "start" . Ovo numeriranje radi na svim vrstama markera za numerirane popise. 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 numeriranje za numerirani popis</naslov> </glava> <tijelo > Počinjemo brojati 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 pravoj web stranici:

bilo koji broj

Na gornjoj slici popis smo numerirali počevši od dvanaest, a oznake smo napravili u obliku malih latiničnih slova. Sada je, mislim, postalo jasno kako koristiti te atribute u svojim projektima.

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

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

Popisi s više razina koriste se na web mjestu za izradu izbornika. Ovaj izbornik najčešće izgleda kao padajući izbornik prema dolje (o lekciji) ili kao padajući izbornik lijevo ili desno. Takvi izbornici omogućuju pohranjivanje drugih elemenata izbornika u kompaktnom obliku.

Koristeći modele automobila kao primjer, napravit ćemo popis na više razina 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 ugniježđeni popis s grafičkim oznakama</naslov> </glava> <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 na to kako višerazinska lista izgleda u pregledniku:

Napravili smo popis na više razina koristeći grafičke oznake (tag

Ali možemo se ujediniti višerazinske liste numerirani i označeni na sljedeć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 > Numerirani, s grafičkim oznakama i višerazinski popisi u HTML-u</naslov> </glava> <tijelo > <ul > <li > Prva skupina tulipana<ol > <li > Prvi razred<ul > <li > Jednostavni rani tulipani</li> </ul> </li> <li > Drugi razred<ul > <li > Terry tulipani</li> </ul> </li> </ol> </li> </ul> </tijelo> </html>

U gornjem primjeru imamo dvostruko gniježđenje (2 razine). Prvo je uključen popis dviju klasa tulipana; imamo ga numeriranim. Zatim je popis s grafičkim oznakama ugniježđen unutar svake od stavki na numeriranom popisu.

Pogledajmo kako to izgleda u pregledniku:

4. Korisni materijali o HTML listama

Ovo su informacije koje zahtijevaju razumijevanje CSS svojstava. Da biste to učinili, preporučujem proučavanje sljedećih lekcija: . Svi primjeri bit će odmah uz izvorni kod i podijeljeni su na kartice HTML (struktura), CSS (stilovi) i Result (rezultat).

4.1 Kako napraviti HTML popis u niz

Pretvaranje HTML popisa u niz može biti potrebno prilikom stvaranja horizontalni izbornik. To je vrlo jednostavno učiniti:

4.2 Kako napraviti HTML popis bez ikone

Odgovoran za ovo list-style-type svojstvo u CSS-u (više detalja):

4.3 Kako centrirati popis u HTML-u

Element liste je blok element, tako da mora biti centriran pomoću margine. Ali postoji jedan važna točka— moramo izričito navesti širinu da bi poravnanje radilo:

4.4 Kako napraviti popis 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 retka popisa ovisi o tome:

4.5 Popis s grafičkim oznakama HTML svoje grafičke oznake

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

4.6 Kako napraviti popis u HTML-u u nekoliko stupaca

Za izradu popisa u nekoliko stupaca koristit ćemo se CSS svojstvo column-count (svojstvo je podržano samo u sljedećim preglednicima: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Također morate postaviti visinu popisa da biste vidjeli podjelu u više stupaca:

5. Vježbajte rad s listama

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