HTML popis. Primjena CSS stilova
Na mnogim HTML stranicama u tekstu možete vidjeti popise. Uz njihovu pomoć, kreirajte izbornike, upute, korak po korak algoritme, sistematizirajte informacije i izvedite mnogo više. HTML popis izrađuje se pomoću jezika za označavanje teksta. Da biste to učinili, upotrijebite nekoliko oznaka. To je jedan od najčešćih oblika prezentiranja informacija u komprimiranom obliku i istovremeno jasno.
Popisi se uglavnom koriste u sljedećim slučajevima:
- prikazivanje informacija u jednoj strukturi s prikladnom percepcijom;
- pojednostavljenje složenih sekvencijalnih procesa;
- stvaranje struktura sa sadržajem, točkama i objašnjenjima.
Popisi postoje u tri varijante:
- brojevima;
- oznakom;
- popisa definicija.
Numerirani popis
Numeriranje je prikladno kada se stavke redom navode. HTML popis se otvara i zatvara oznakama <ol> i </ ol>.
Kôd popisa bit će:
<Ol>
<li> 1 stavka </ li>
<li> 2 </ item> element
<li> 3 element </ li >›
</ Ol>
Svaka pozicija nalazi se unutar oznake <li>.
Popis s grafičkim oznakama
Položaji nisu numerirani i raspoređeni u proizvoljnom redoslijedu. Popis kodova sličan je prethodnom. Jedina je razlika u tome što se nalazi unutar oznake <ul>:
<Ul>
<li> prvo </ li>
<li> drugo </ li>
<li> treće </ li>
- </ ul>
Zadani marker označen je crnim krugom, ali se njegova slika mijenja pomoću atributa tipa, na primjer:
<ul type = "square">
Slično tome, promijenite oznaku numeriranog popisa, na primjer, dodjeljujući atributu vrijednost literala:
<ol type = "A">
Popis definicija
Često je potrebno odabrati riječi iz glavnog teksta i dati im objašnjenja. Da biste to učinili, napravite popis elemenata s njihovim definicijama. Kôd se otvara i zatvara s oznakama <dl> i </ dl>. Unutra su uređeni redoslijedni elementi zatvoreni u par <dt> i </ dt>. Često se dodatno razlikuju oznakama <strong> ... </ strong>. Nakon svake stavke nalaze se objašnjenja, uokvirena uparenim <dd> ... </ dd>. Općenito, kôd izgleda ovako:
<h2> DefinicijaList </ h2>
<Dl>
<dt> www </ dt>
<dd> www predstavlja World Wide Web </ dd>
<dt> CSS </ dt>
<dd> CSS predstavlja stilske listove </ dd>
</ dl>
Na stranici će rezultat izvršavanja ovog koda izgledati ovako: 
Padajući popis
Ponekad je zgodno napraviti padajući popis. U početnom stanju, oni su zatvoreni, a po zadanom je vidljiva samo prva pozicija. Shema koda je slična prethodnoj. Stavke popisa izrađene su oznakom opcije koja je ugrađena u spremnik <select>:
<Odaberi>
<opcija> el1
<opcija> el2
<odabrana opcija> el3
Prema zadanim postavkama, prva se stavka uvijek prikazuje. Može se zamijeniti primjenom odabranog atributa oznake <option>, kao što je prikazano u kodu s padajućeg popisa. Treća stavka postaje vidljiva u njoj kada je popis zatvoren.
U nekim popisima potrebno je odjednom odabrati nekoliko mjesta. Za to se koristi višestruki atribut oznake <select>.
Kako napraviti popis u HTML-u i CSS-u
Iako je oznaka široko korištena, ona je prilično ograničena. HTML padajući popis poboljšava CSS. Njegov tip može biti bilo koji.
<div class = "role">
<gumb> proizvode
<Ul>
<a> <li> 1 element </ li> </ a>
<a> <li> 2 element </ li> </ a>
<a> <li> 3 element </ li> </ a>
</ ul>
Sada trebate primijeniti CSS svojstva na kôd. Često se koriste za spektakularan dizajn, ali bolje je da se prvo usredotočite na učinkovitost padajućeg popisa. Trebao bi se pojaviti na zaslonu kada zadržite pokazivač iznad naslova.
Stilovi postavljaju uvjete za prikazivanje ili skrivanje popisa:
.rolls a {
list-style: nema;
prikaz: ništa}
.rolls: lebdite na {
prikaz: blok}
Dakle, kada miš lebdi iznad gumba, na stranici se pojavljuje popis prikazan na donjoj slici. 
Padajući popisi na više razina
Kada izgled stranice jednostavne popise možda neće biti dovoljno, ali količina informacija bi trebao biti velik. Ovdje spašavaju popisi s više razina. Njihova je struktura ponekad složena. Da biste uklonili pogreške, pažljivo pratite početne i završne oznake. Prethodni popis definicija također je višerazinski. Pogodno je koristiti za stvaranje rječnika ili objašnjenja pojmova.
Padajući popis HTML-a koristi se kako ne bi zakrčio stranicu i proširio njene mogućnosti. Kao osnovni alat dovoljno je upotrijebiti označni jezik. U isto vrijeme, za bilo koju razinu gniježđenja, kod ostaje isti.
Funkcionalno, HTML lista će raditi, ali uz korištenje stilskih listova možete je dizajnirati tako da bude lijepa i udobna. 
zaključak
Postoje popisi različitih vrsta HTML-a. Stvaraju se prema istoj shemi, uključujući ugniježđene. Značajke popisa poboljšane su CSS stilovima. Uz pomoć stilova možete stvoriti jedinstvene alate. Istovremeno, važno je da su popisi ispravno semantički oblikovani kako bi se olakšalo održavanje samih mjesta.