CSS Metak Stil

Da li ste ljubitelj pravljenja puno, puno spiskova? Nisam ni ja. Ali, ovde ne govorimo o sitnicama ili spiskovima za kupovinu. Govorimo o uređenim i neuređenim listama koje su neizbežne pri izradi modernih veb lokacija i aplikacija.

Kao što je pomenuto, prilikom kreiranja lista u HTML-u i CSS-u postoje dve vrste: uređene i neuređene. U slučaju uređenih lista prisutna je numeracija. S druge strane,u slučaju neuređenih spiskova, numeracija nije prisutna, zato je uobičajeni naziv za ovu vrstu lista nabrajane liste.

Kada koristite liste, važno je pravilno formatirati tekst.

Fokus ovog članka biće na neuređenim spiskovima i vrstama i svojstvima metaka.

Neuređena lista koristi oznaku <ul> </ul>. Pogledajmo jednostavan primer.

HTML

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
<ul>

Atribut Tip

Atribut tip može se koristiti za određivanje vrste metaka koji će se koristiti na listi. Ovaj atribut se može sastojati od tri različite vrednosti:

Krug,
Disk,
Kvadrat.

Tip metka može se podesiti na element <ul> </ul> ili <li> </li>, što znači da možete da postavite stil na celoj listi ili da stilizirate svaku stavku liste pojedinačno.

Dobro je znati koju veličinu fonta koristiti prilikom pravljenja lista.

Metak stil

Za promenu stila nabrajanja mogu se koristiti dve osobine. Svojstvo list-style-type ili list-style. Razlika je u tome što pomoću drugog možemo istovremeno promeniti više svojstava. Ali do toga ćemo doći kasnije.

CSS

.ul {
  list-style-type: square;
}

Ovde vidimo stil liste postavljen na kvadrat.

Korišćenje prilagođene slike

Snagom CSS-a moguće je koristiti prilagođenu sliku kao metak. Obično je to jednostavna mala ikona. U tu svrhu koristimo list-style-image.

CSS

ul {
  list-style-image: url(‘images/sample-bullet.png’);
}

Pozicija Metka

CSS

ul {
  list-style-position: outside;
}

CSS

ul {
  list-style-position: inside;
}

Prva slika prikazuje vrednost postavljenu na outside, a druga ima vrednost postavljenu na inside.
Kada podešavate vrednost na spoljašnju vrednost, to znači da će tačka biti izvan stavke liste. I, pri podešavanju vrednosti na unutra, tačka će biti unutar stavke liste.

Ne zaboravite da listama date neki stil.

Ako ova vrsta stajlinga nije dovoljna, možete promeniti boju metaka.

Kombinacija Svojstava

Kao što smo već pomenuli, možete kombinovati više svojstava postavljanjem stila liste.

CSS

ul {
  list-style: square inside url("element.gif");
}

Ovom skraćenicom istovremeno podešavamo list-style-type,list-style-position i list-style-image

Sažetak

Liste se koriste vrlo često prilikom razvijanja veb lokacija i aplikacija, tako da uvek treba da znate kako da ih stilizujete. Nadam se da će vam ovo kratko objašnjenje pomoći u projektima.

Hvala vam što ste pročitali i obavezno se pretplatite na naš bilten!