CSS lista
Ajde i ovde da damo sve atribute sa svim vrednostima pa zatim da objasnimo.
- list-style-type - Definiše izgled znaka u listama (nabrajanjima).
- Za neuredjenu listu atribut list-style-type može imati sledeće vrdnosti:
- none - bez oznaka;
- disc - pun kružić (što je i po defaultu);
- circle - prazan kružić;
- square - pun kvadratić.
- Za uredjene liste atribut list-style-type može imati sledeće vrednosti:
- armenian - neki Armenski znaci;
- decimal - decimalni brojevi, 1, 2, 3, 4 itd;
- decimal-leading-zero - decimalni brojevi sa vodećom nulom, 01, 02, 03 itd;
- georgian - neki Georgian brojevi:
- lower-alpha - mala slova abecede, a, b, c, d itd;
- lower-latin - isto mala slova abecede a, b, c, d itd;
- lower-greek - grčka slova, alfa, beta. gama, delta itd;
- lower-roman - rimski mali brojevi, i, ii, iii, iv, v itd;
- upper-latin - velika slova latinice, A, B, C, D itd;
- upper-alpha - isto velika slova latinice, A, B, C, D itd;
- upper latin - veliki rimski brojevi, I, II, III, IV, V itd.
- list-style-position - Odredjuje poziciju liste. Vrednosti su:
- outside - po defaultu kao i obična pozicija liste;
- inside - malo uvučenija lista nego obično;
- list-style-image - Za oznaku u nabrajanju definiše jednu sliku. Pošto je jedna slika onda je to neuredjena lista. Vrednosti su:
- none - bez slike;
- url("adresaSlike.jpg") - upišete edresu slike;
Mislim da nije teško ovo shvatiti zato ću objasniti kroz primer sve atribute
ali samo sa pojedinim vrednostima. Naravno vi možete u cilju vežbanja menjati
vrednosti atributa i videti konkretno izgled svih vrednosti. Evo primera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
ul.a {list-style-type: square;}
ul.b {list-style-type: none;}
#a {list-style-type: decimal; list-style-position: inside;}
</style>
</head><body>
<ul class="a">
<li>Milan</li>
<li>Zoran</li>
<li>Steva</li>
</ul>
<ul class="b">
<li>Milan</li>
<li>Zoran</li>
<li>Steva</li>
</ul>
<ul id="a">
<li>Milan</li>
<li>Zoran</li>
<li>Steva</li>
</ul>
</body></html>
|
