|
Ukoliko uz oznaku <div> možemo navesti još poneku
HTML oznaku kojoj se dolaskom CSS-a znatno povećala uporaba, onda su to sigurno
popisi. Mogućnost formatiranja koje je donio CSS omogućile su da se popisi, od običnog
elementa za nizanje teksta, pretvore u moćan alat.
Popisi se sastoje od <ul>, odnosno
<ol> oznake, koje ustvari čine blok element, te od
jedne ili više <li> oznaka koje predstavljaju označavaju
elemente popisa. Svaku od ovih oznaka možemo zasebno formatirati.
list-style-type
Definira tip grafičkih oznaka koji će biti prikazan ispred pojedinog elementa
popisa. Može poprimiti sljedeće vrijednosti: disc, circle, square, decimal,
lower-roman, upper-roman, lower-alpha, upper-alpha, none.
ul {
list-style-type: square;
}
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipisicing elit</li>
<li>sed do eiusmod tempor incididunt</li>
<li>ut labore et dolore magna aliqua.</li>
</ul>
- Lorem ipsum dolor sit amet
- consectetur adipisicing elit
- sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua.
list-style-image
Ovo nam svojstvo omogućava da popisu umjesto uobičajene grafičke oznake dodamo
sliku. Primjerice:
ul {
list-style-image: url("arrows.gif");
}
li {
padding: 4px;
}
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipisicing elit</li>
<li>sed do eiusmod tempor incididunt</li>
<li>ut labore et dolore magna aliqua.</li>
</ul>
- Lorem ipsum dolor sit amet
- consectetur adipisicing elit
- sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua.
list-style-position
Definira uvlačenje elemenata popisa. Može poprimiti vrijednosti inside
ili outside. Pretpostavljena vrijednost je outside.
ul {
list-style-position: inside;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in elit non orci
sollicitudin dignissim.</li>
<li>Sed eu lectus ac leo varius faucibus.
Aliquam erat volutpat. Aliquam erat
volutpat.</li>
<li>Duis orci mauris, lacinia faucibus
dictum consectetur, aliquam a nibh.</li>
</ul>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
in elit non orci sollicitudin dignissim.
- Sed eu lectus ac leo varius faucibus. Aliquam erat volutpat. Aliquam
erat volutpat.
- Duis orci mauris, lacinia faucibus dictum consectetur,
aliquam a nibh.
Skraćeni selektor – list-style
Skraćeno svojstvo za istovremen prikaz svih svojstava popisa. U ovom primjeru,
ukoliko je slika nedostupna, prikazuje se circle:
ul {
list-style: circle url("arrows.gif")
outside;
}
|
