В HTML існує два основних типи списків:
- unordered lists (<ul>) - елементи списку позначені маркерами
- ordered lists (<ol>) - елементи списку позначені цифрами або буквами
Властивості списку CSS дозволяють:
- Задати різні маркери елементів списку для упорядкованих списків
- Задати різні маркери елементів списку для неупорядкованих списків
- Установка зображення в якості маркера елемента списку
- Додавання кольорів фону до списків і елементів списків
CSS-властивості списків
- list-style-type: визначає тип маркерів для використання у списку, наприклад, квадратні або круглі маркери для неупорядкованого списку, або цифри, літери або римські цифри для впорядкованого списку.
- list-style-position: керує чи буде маркер з'являється всередині пунктів списку або поза ними перед початком кожного елемента.
- list-style-image: дозволяє використовувати власні зображення в якості маркерів, а не просто квадрат або коло.
Властивість list-style-type вказує тип маркера елемента списку.
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
See the Pen list-style-type-css by kravets (@raisa69) on CodePen.
Властивість list-style-image вказує зображення в якості маркера елемента списку:
ul {
list-style-image: url('sqpurple.gif');
}
See the Pen list-style-image-css by kravets (@raisa69) on CodePen.
Також для властивості list-style-image можна застосувати лінійний градієнт:
See the Pen list-style-image: linear-gradient by kravets (@raisa69) on CodePen.
Властивість list-style-position вказує положення маркерів елементів списку (маркерів).
Для CSS властивості list-style-position, яке задає розташування маркерів/нумерації щодо тексту, є два значення – outside та inside.
За замовчуванням використовується значення outside – це означає, що маркер/число відображається окремо від тексту списку, тоді як при значенні inside маркер/число розташовується всередині текстового блоку і обтікається текстом.
Приклад застосування властивості list-style-position: outside;
Приклад застосування властивості list-style-position: inside ;
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Властивість list-style-type: none також можна використовувати для видалення маркерів додавши властивість в <ul> або <ol>:
ul {
list-style-type: none;
}
Стиль списків з кольорами
Все, що додано до тегу <ol> або <ul>, впливає на весь список, а властивості, що додаються в тег <li>, будуть впливати на окремі елементи списку:
ol {
background: #ff9999;
}
ul {
background: #3399ff;
}
ol li {
background: #ffe5e5;
}
ul li {
background: #cce5ff;
}
See the Pen Styling Lists With Colors by kravets (@raisa69) on CodePen.
Завдання 1
Створити веб-сторінку із списком важливих справ на тиждень. Нйважливішим справам задати рожевий колір фону
Завдання 2
Створити в окремій папці веб-сторінку за вкзаним зразком, правила оформлення тексту прописати самостійно!
Текст для завдання: