Otisni ovo poglavljeOtisni ovo poglavlje

CSS svojstva

Svojstva popisa

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;

}
   
CARNet