Izrada popisa: grupa entiteta u popisu stila u CSS-u

Popisi su važan element web stranice. Oni pomažu strukturirati informacije i predstaviti ih u formatu koji je user-friendly. Osim toga, u obliku popisa, izbornici i navigacijski paneli često su sastavljeni. Upravljanje položajem i izgledom elementa za označavanje omogućuje grupu svojstava CSS popis stila.

Vrste popisa

Postoje naručeni i neuređeni popisi. Prvi marker može biti bilo koji znak koji se ne mijenja od točke do točke, drugo, svaki element popisa ima svoj vlastiti marker, koji određuje njegovo mjesto među ostalima.

U naručenim popisima za označavanje obično se koriste brojevi ili slova različitih sustava i pisama.

Ovisno o stupnju gniježđenja, na razini jedne i na razini višerazinski popisi. Svaka razina često ima svoj element obilježavanja.

Korištenje popisa pri stvaranju izbornika ili navigacijskih traka potiče najnovija inačica HTML standarda, jer taj element ima važan semantičko značenje.

Prikaz u CSS-u

Svaka stavka je blok-spremnik s posebnom vrstom prikaza: popis-stavka. Prema zadanim postavkama, ova je vrijednost postavljena za elemente koji se nalaze unutar uljnih i uljnih spremnika i daje oznaku pred blokom.

Ako je potrebno, ova vrsta zaslona može se postaviti za bilo koji HTML spremnik. Novi element označavanja oblikovan je pomoću grupe CSS popisa stila.

p {display: popis-item-list-style-type: decimal-}

Sva tri od sljedećih svojstava nasljeđuju djeca s prikazom: popisna stavka i, ako je potrebno, zahtijevaju eksplicitno nadjačavanje.

Položaj oznake popisa

Prvo svojstvo grupe je položaj stila u listi. Određuje je li marker ostao u bloku teksta ili je premješten iz nje.

Objekt ima jednu od dvije vrijednosti:

• unutra,
• vani.

Razlika između njih posebno je vidljiva na višestrukim stavkama.

.list1 {popis stila-pozicija: izvan -}. popis2 {list-style-position: inside-}

Zadana postavka je izvan i oznaka na popisu se premješta iz okvira.

Izgled markera

Drugi svojstvo - vrsta popisa - kontrolira vrstu markera i može potrajati više od petnaest vrijednosti.

Uobičajeno, numerički popis koristi arapske brojeve, a za popis s grafičkim oznakama koristi se točka. Ali svojstva stila u CSS-u omogućuju promjenu ovih postavki, pa čak i potpuno uklanjanje oznaka.

Neodređeni bilježnici popisa:

• disk - obična točka, ispunjena bojom teksta;
• krug - prazan krug s udarcem u boji teksta;
• kvadrat - osvijetljeni trg.

Za naručene popise opcija mnogo je više:

Neke vrijednosti preklapaju, kao što je niže-alfa i niže latinski, a drugi ne podržava nekim preglednicima i fontova.

Ako je potrebno, markeri naručenog tipa mogu se primijeniti na neregularne popise ul i obratno.

U međuvremenu, odaberite vrijednost koja ne sadrži oznake s popisa bilo koje vrste. To je posebno korisno prilikom kreiranja navigacijskih ploča kada želite zadržati listu semantike, ali elementi označavanja ne uklapaju se u dizajn. Isto tako, imovina se često koristi za korisnički definirani stil.

.popis {list-style-type: none;}

Prilagođeni marker

Umjesto određenih vrsta CSS elemenata za označavanje, možete koristiti bilo koju sliku. Da biste to učinili, morate prenijeti vezu do imovine slikovnog stila.

Možete čak koristiti slike u gif formatu - animacija će biti spremljena. Važno je zapamtiti to CSS popis stila prikazuje sliku u punoj veličini.

.popis {image-style-image: url (image.jpg) -line-visina: 25px;}

Na primjer:

Osim slikovnih datoteka, možete koristiti CSS funkcije radijalnih ili linearnih gradijenata:

.popis {image-style-image: radijalno-gradijent (svijetlo plava, aqua, plava) -}

Oblik marker ostaje kvadrat.

Kombinirana sintaksa

Sva svojstva koja definiraju prikaz oznake popisa mogu se kombinirati u jednom - CSS popisu stila.

popis stila: popis stila tipa popis stila položaja popis stila-image

Specifična svojstva navedena su u prostoru, ne mogu prekidati njihovu narudžbu, no bilo koji od njih može se izostaviti:

.popis1 {list-style: none;} .list2 {list-style: gornji roman unutar -}. popis3 {list-style: unutar url (/images/img1.jpg) -}

Za vraćanje stilova na izvorne parametre, postoji početna vrijednost koja se može prenijeti na bilo koju od četiri navedena svojstva.

Pomoću grupe CSS-svojstava popisa stila u kombinaciji s efektima ciljanja možete stvoriti prekrasne jedinstvene popise koji privlače pažnju korisnika.