Својство list-style-type
Својството list-style-type овозможува
за список ul
наместо маркери-точки да се направат квадрати или
кругови. За список ol
наместо обични бројки може да се направат римски,
нумерирање во вид на букви: латински или грчки.
Синтакса
селектор {
list-style-type: вредност;
}
Вредности за ul
| Вредност | Опис |
|---|---|
circle |
Создава маркери во вид на кругови. |
disc |
Создава маркери во вид на пополнети кругови. |
square |
Создава маркери во вид на квадрати. |
none |
Ги отстранува маркерите. |
Вредност по стандард: disc.
Вредности за ol
| Вредност | Опис |
|---|---|
armenian |
Традиционална ерменска нумерирање. |
decimal |
Арапски бројки. |
decimal-leading-zero |
Арапски бројки со нула пред бројките помали од десет. |
georgian |
Традиционална грузиска нумерирање. |
lower-alpha |
Мали латински букви. |
lower-greek |
Мали грчки букви. |
lower-latin |
Оваа вредност е аналогна на lower-alpha. |
lower-roman |
Римски бројки во мали букви. |
upper-alpha |
Големи латински букви. |
upper-latin |
Оваа вредност е аналогна на upper-alpha. |
upper-roman |
Римски бројки во големи букви. |
none |
Ги отстранува маркерите. |
Вредност по стандард: decimal.
Пример
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: disc;
}
:
Пример
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: circle;
}
:
Пример
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: square;
}
:
Пример
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: none;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: decimal;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: armenian;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: decimal-leading-zero;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: georgian;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: lower-alpha;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: lower-greek;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: lower-latin;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: lower-roman;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: upper-alpha;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: upper-roman;
}
:
Пример
Овој пример покажува дека својството color
влијае не само на бојата на текстот, туку и на
бојата на маркерите:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: disc;
color: red;
}
:
Погледнете ги исто така
-
својство
list-style-image,
кое ги поставува маркерите во вид на зададени слики -
својство
list-style-position,
кое ја поставува позицијата на маркерите -
својство
list-style,
кое е кратенка за маркерите