V HTML poznamo neurejene in urejene sezname:
- neurejen seznam: alineje seznama so označene s pikami
- urejen seznam: alineje seznama so oštevilčene
Z oblikovnimi slogi lahko seznamoma priredimo tudi druge oznake alinej, lahko uporabimo tudi slike, določamo pa lahko tudi položaj oznak pri seznamih.
Lastnosti CSS, ki jih lahko definiramo seznamom
list-style-type
Z lastnostjo list-style-type določimo, kakšne oznake želimo imeti v seznamih.
| Vrednost | Pomen |
|---|---|
none |
brez oznak |
disc |
poln krogec |
circle |
prazen krogec |
square |
poln kvadrat |
decimal |
1, 2, 3, ... |
decimal-leading-zero |
01, 02, 03, ..., 98, 99 |
lower-roman |
i, ii, iii, iv, v, ... |
upper-roman |
I, II, III, IV, V, ... |
lower-latin |
a, b, c, ..., z |
lower-alpha |
a, b, c, ..., z |
upper-latin |
A, B, C, ..., Z |
upper-alpha |
A, B, C, ..., Z |
lower-greek |
α, β, γ ... |
cjk-ideographic |
ideografično številčenje |
georgian |
tradicionalno gruzijsko številčenje |
armenian |
tradicionalno armensko številčenje |
hebrew |
tradicionalno hebrejsko številčenje |
hiragana |
tradicionalno hiragana številčenje |
hiragana-iroha |
tradicionalno hiragana iroha številčenje |
katakana |
tradicionalno katakana številčenje |
katakana-iroha |
tradicionalno katakana iroha številčenje |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
<p>Seznam z lastnostjo <em>list-style-type: <strong>none</strong></em></p>
<ul class="none">
<li>Jabolko</li>
<li>Hruška</li>
<li>Sliva<</li>
</ul>
<p>Seznam z lastnostjo <em>list-style-type: <strong>disc</strong></em></p>
<ul class="disc">
<li>Jabolko</li>
<li>Hruška</li>
<li>Sliva<</li>
</ul>
....none { list-style-type: none }
.none { list-style-type: disc }
...Seznam z lastnostjo list-style-type: none
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: disc
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: circle
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: square
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: decimal
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: decimal-leading-zero
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: lower-roman
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: upper-roman
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: lower-latin
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: upper-latin
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: lower-greek
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: cjk-ideographic
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: georgian
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: armenian
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: hebrew
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: hiragana
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo list-style-type: katakana
- Jabolko
- Hruška
- Sliva
list-style-image
Z lastnostjo list-style-image določimo, katero sliko želimo imeti kot oznako v seznamih.
| Vrednost | Pomen |
|---|---|
none |
brez slike |
url |
pot do slike |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
<p>Seznam z lastnostjo <em>list-style-image: url('seznam.gif')</em></p>
<ul class="image">
<li>Jabolko</li>
<li>Hruška</li>
<li>Sliva<</li>
</ul>.image { list-style-image: url('seznam.gif') }Seznam z lastnostjo list-style-image: url('seznam.gif')
- Jabolko
- Hruška
- Sliva
list-style-position
Z lastnostjo list-style-position določimo položaj oznak pri številčenju.
| Vrednost | Pomen |
|---|---|
inside |
oznaka je znotraj bloka |
outside |
oznaka je pred blokom, privzeta vrednost |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
<p>Seznam z lastnostjo: <em>list-style-position:<strong>outside</strong></em></p>
<ul class="outside">
<li class="bgd">Jabolko</li>
<li class="bgl">Hruška</li>
<li class="bgd">Sliva</li>
</ul>
<p>Seznam z lastnostjo: <em>list-style-position: <strong>inside</strong></em></p>
<ul class="inside">
<li class="bgd">Jabolko</li>
<li class="bgl">Hruška</li>
<li class="bgd">Sliva</li>
</ul>.outside { list-style-position: outside; width: 30% }
.inside { list-style-position: inside; width: 30% }
.bgd { background-color:#F5DBA9 }
.bgl { background-color:#F9EBCC }Seznam z lastnostjo: list-style-position: outside
- Jabolko
- Hruška
- Sliva
Seznam z lastnostjo: list-style-position: inside
- Jabolko
- Hruška
- Sliva
list-style
Lastnost list-style uporabljamo kot bližnjico za nastavitev vseh lastnosti oznak pri naštevanju:
Za vrednost lastnosti list-style naštejemo vrednosti posameznih lastnosti oznak pri številčenju v poljubnem vrstnem redu, pri čemer jih ločimo s presledki. Če vrednosti katere od lastnosti oznak ne navedemo, bo dobila svojo privzeto vrednost.