Omadus list-style-type
Omadus list-style-type võimaldab
loendile ul
punktmarkerite asemel teha ruudud või
ringid. Loendile ol
tavapäraste numbrite asemel saab teha rooma numbrid,
numereerimise tähtedena: ladina või kreeka tähestikus.
Süntaks
selektor {
list-style-type: väärtus;
}
Väärtused ul jaoks
| Väärtus | Kirjeldus |
|---|---|
circle |
Loob markerid ringikujulistena. |
disc |
Loob markerid täidetud ringidena. |
square |
Loob markerid ruudukestena. |
none |
Eemaldab markerid. |
Vaikeväärtus: disc.
Väärtused ol jaoks
| Väärtus | Kirjeldus |
|---|---|
armenian |
Traditsiooniline armeenia nummerdus. |
decimal |
Araabia numbrid. |
decimal-leading-zero |
Araabia numbrid eesoleva nulliga numbritele väiksem kui kümme. |
georgian |
Traditsiooniline gruusia nummerdus. |
lower-alpha |
Väiketähed ladina tähestikus. |
lower-greek |
Väiketähed kreeka tähestikus. |
lower-latin |
See väärtus on analoogne lower-alpha'ga. |
lower-roman |
Roma numbrid väikeste tähtedega. |
upper-alpha |
Suurtähed ladina tähestikus. |
upper-latin |
See väärtus on analoogne upper-alpha'ga. |
upper-roman |
Roma numbrid suurte tähtedega. |
none |
Eemaldab markerid. |
Vaikeväärtus: decimal.
Näide
<ul>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ul>
ul {
list-style-type: disc;
}
:
Näide
<ul>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ul>
ul {
list-style-type: circle;
}
:
Näide
<ul>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ul>
ul {
list-style-type: square;
}
:
Näide
<ul>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ul>
ul {
list-style-type: none;
}
:
Näide
<ol>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ol>
ol {
list-style-type: decimal;
}
:
Näide
<ol>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ol>
ol {
list-style-type: armenian;
}
:
Näide
<ol>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ol>
ol {
list-style-type: decimal-leading-zero;
}
:
Näide
<ol>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ol>
ol {
list-style-type: georgian;
}
:
Näide
<ol>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ol>
ol {
list-style-type: lower-alpha;
}
:
Näide
<ol>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ol>
ol {
list-style-type: lower-greek;
}
:
Näide
<ol>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ol>
ol {
list-style-type: lower-latin;
}
:
Näide
<ol>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ol>
ol {
list-style-type: lower-roman;
}
:
Näide
<ol>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ol>
ol {
list-style-type: upper-alpha;
}
:
Näide
<ol>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ol>
ol {
list-style-type: upper-roman;
}
:
Näide
See näide näitab, et omadus color
mõjutab mitte ainult teksti värvi, vaid ka
markerite värvi:
<ul>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
<li>loendi element</li>
</ul>
ul {
list-style-type: disc;
color: red;
}
:
Vaata ka
-
omadus
list-style-image,
mis määrab markerid etteantud piltidena -
omadus
list-style-position,
mis määrab markerite asukoha -
omadus
list-style,
mis on markerite lühend