CSS list-style — маркери списку одним рядком
Властивість list-style — універсальна властивість і дозволяє одночасно задати значення для наступних властивостуй:
list-style-typelist-style-positionlist-style-image
Значення, між собою, розділяються пропуском та повинні слідувати в зазначеному порядку:
- тип списку
- положення маркера
- картинка маркера
Ця властивість застосовується до елементів списку, тобто елементів із display: list-item;. За умовчанням це включає в себе елементи. Оскільки ця властивість успадковується, її можна встановити на батьківський елемент (зазвичай <ol> або <ul>), щоб створити такий же стиль списку, що застосовується до всіх елементів всередині.
Загальний опис
автор: NagarD
- Нотатка
-
Жодне з значень не є обов'язковим, тому невикористовувані дозволено опустити.
автор: Svitlana - Нотатка
-
Якщо одне із зазначених значень відсутнє, наприклад,
автор: Svitlanalist-style:circle inside;, замість нього буде встановлено його значення за замовчуванням.
Синтаксис
list-style: list-style-type list-style-position list-style-image|initial|inherit;Властивість list-style може отримувати 5 значень:
-
list-style-type -
Визначає тип елемента списку.
автор: Svitlana -
list-style-position -
Визначає позицію мітки списку.
автор: Svitlana -
list-style-image -
Визначає зображення для мітки списку.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | disc outside none |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.listStyle="decimal inside" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 7 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Все про маркери одним рядком: тип і зображення. Зображення (фіолетовий квадратик) має пріоритет, а square — запасний варіант на випадок, якщо картинка не завантажиться.
HTML
<ul>
<li>перший пункт</li>
<li>другий пункт</li>
</ul>CSS
ul {
list-style: square url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='10' height='10' fill='%23803ab3'/%3E%3C/svg%3E");
}HTML
<code>list-style-type</code>
<br>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<br>
<code>list-style-image</code>
<br>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<br>
<code>list-style-position</code>
<br>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus eius cupiditate deleniti dignissimos repellat sed amet voluptate ullam culpa??</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus eius cupiditate deleniti dignissimos repellat sed amet voluptate ullam culpa??</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus eius cupiditate deleniti dignissimos repellat sed amet voluptate ullam culpa??</li>
</ul>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus eius cupiditate deleniti dignissimos repellat sed amet voluptate ullam culpa??</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus eius cupiditate deleniti dignissimos repellat sed amet voluptate ullam culpa??</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus eius cupiditate deleniti dignissimos repellat sed amet voluptate ullam culpa??</li>
</ul>CSS
body {
margin: 50px;
}
ul{
display: inline-block;
}
li{
font-size: 18px;
}
ul:nth-of-type(1) {
list-style-type: disc;
}
ul:nth-of-type(2) {
list-style-type: circle;
}
ul:nth-of-type(3) {
list-style-type: square;
}
ul:nth-of-type(4) {
list-style-type: decimal;
}
ul:nth-of-type(5) {
list-style-type: decimal-leading-zero;
}
ul:nth-of-type(6) {
list-style-type: lower-roman;
}
ul:nth-of-type(7) {
list-style-type: upper-roman;
}
ul:nth-of-type(8) {
list-style-type: lower-greek;
}
ul:nth-of-type(9) {
list-style-type: lower-latin;
}
ul:nth-of-type(10) {
list-style-type: upper-latin;
}
ul:nth-of-type(11) {
list-style-type: armenian;
}
ul:nth-of-type(12) {
list-style-type: georgian;
}
ul:nth-of-type(13) {
list-style-type: lower-alpha;
}
ul:nth-of-type(14) {
list-style-type: upper-alpha;
}
ul:nth-of-type(15) {
list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%23e76f51'/%3E%3C/svg%3E");
}
ul:nth-of-type(16) {
list-style-position: inside;
}
ul:nth-of-type(17) {
list-style-position: outside;
}Три однакові списки. У середньому list-style: none прибрав маркери, але відступ лишився — це padding самого <ul>. У правому додано padding-left: 0, і список нарешті став урівень із текстом.
HTML
<figure>
<ul>
<li>перший пункт</li>
<li>другий пункт</li>
</ul>
<figcaption>як є</figcaption>
</figure>
<figure>
<ul class="none">
<li>перший пункт</li>
<li>другий пункт</li>
</ul>
<figcaption>list-style: none</figcaption>
</figure>
<figure>
<ul class="none flat">
<li>перший пункт</li>
<li>другий пункт</li>
</ul>
<figcaption>+ padding-left: 0</figcaption>
</figure>CSS
figure {
display: inline-block;
width: 180px;
margin: 0 16px 0 0;
font: 14px sans-serif;
vertical-align: top;
}
figcaption {
margin-top: 8px;
font: 12px monospace;
text-align: center;
}
figure ul {
margin: 0;
border-left: 2px solid #b34b4b;
background: #edf3f6;
}
.none {
list-style: none;
}
.flat {
padding-left: 0;
}Коментарі
Коментарів ще немає — будьте першим!