Popis u CSS-u određuje kako su sadržaji ili stavke navedeni na određeni način, tj. mogu se rasporediti uredno ili nasumično, što pomaže u stvaranju čiste web stranice. Budući da su prilagodljivi i jednostavni za rukovanje, mogu se koristiti za organiziranje velikih količina materijala. Zadani stil popisa je bez obruba. Popis se može podijeliti u dvije kategorije:

Neuređeni popis:Prema zadanim postavkama, elementi popisa u neuređenim popisima označeni su grafičkim oznakama, a to su mali crni krugovi.Poredani popis:Elementi popisa u uređenim popisima označeni su brojevima i slovima.

Sljedeća svojstva CSS popisa dostupna su za korištenje u kontroli CSS popisa:

List-style-type:Ovo se svojstvo koristi za određivanje izgleda markera stavke popisa, kao što je disk, znak ili prilagođeni stil brojača.Slika u stilu liste:Pomoću ovog parametra mogu se odrediti slike koje će služiti kao oznake stavki popisa.List-style-position:Opisuje gdje bi trebao biti okvir markera u odnosu na okvir glavnog bloka.Stil popisa:Stil popisa konfiguriran je ovim atributom.

Sada ćemo naučiti više o ovim karakteristikama kroz primjere.

Svojstvo tipa stila popisa

Zadana vrsta popisa oznaka može se promijeniti u razne druge vrste, uključujući kvadrat, krug, rimske brojeve, latinična slova i mnoge druge. Unosi u nesređenom popisu označeni su okruglim oznakama (•), dok su stavke u uređenom popisu prema zadanim postavkama numerirane arapskim brojevima (1, 2, 3, itd.).

Oznake ili meci bit će uklonjeni ako njihovu vrijednost postavimo na ništa.

Sintaksa:

list-style-type:vrijednost;

java pretvara char u niz

Vrijednost možemo koristiti na sljedeći način:

1. krug
2. decimalno, npr.:1,2,3, itd
3. decimalne-početne-nule, npr. :01,02,03,04, itd.
4. niže-rimski
5. gornjo-rimski
6. niža alfa, npr. a,b,c itd
7. gornja alfa, npr. A, B, C itd
8. kvadrat

Napomena: Zadana ispuna i margina također su uključeni u popis. Potrebno je dodati padding:0 i margin:0 u

i
oznake za uklanjanje ovoga.

Primjer

Ovaj primjer prikazuje CSS popis s nekoliko tipova stilova popisa i vrijednostima postavljenim na kvadrat, gornji alfa i mnoge druge.

 Example for CSS Lists .num{ list-style-type:decimal; } .alpha{ list-style-type:upper-alpha; } .circle{ list-style-type:circle; } .square{ list-style-type:square; } .disc{ list-style-type:disc; } <h2> Ordered Lists </h2> <ol class="order"> <li>ONE</li> <li>TWO</li> </ol> <h2> Unordered lists </h2> <ul> <li>ONE</li> <li>TWO</li> </ul> 

Izlaz