Маркери, webreference
Маркери дозволяють розбити великий текст на окремі блоки, кожен з яких починається з маркера - зазвичай в його якості виступає невелика точка. Це привертає увагу Новомосковсктеля до тексту і підвищує його Новомосковскбельность.
З елементом
- пов'язані такі особливості:
- в тому місці, де зустрічається
- . браузер автоматично додає перенесення рядка;
- у списку є відступи зверху і знизу;
- маркери за замовчуванням відображаються у вигляді закрашеного гуртка;
- кожен елемент списку зсувається вправо по відношенню до основного тексту.
- disc - маркери у вигляді закрашеного гуртка;
- circle - маркери у вигляді незаповнених гуртка;
- square - квадратні маркери.
- не вийде, тому доведеться діяти в обхід. Для цього ховаємо маркери за допомогою властивості list-style зі значенням none і в тексті перед вмістом
- додаємо свій власний символ за допомогою псевдоелемента. before. У прикладі 2 в якості такого маркера виступає трикутник.
Приклад 2. Використання. before
Мал. 2. Довільні маркери в списку
Мал. 3. Вибір символу в LibreOffice
Список з мальованими маркерами
Стилі дозволяють встановити в якості маркера будь-яке придатне зображення через властивість list-style-image. Як значення використовується відносний або абсолютний шлях до графічного файлу, як показано в прикладі 3.
Приклад 3. Використання зображення в якості маркера
Малюнок найкраще вибирати невеликого розміру, щоб не перетворювати елементи списку в підписи. На рис. 4 показаний результат дії прикладу з використання в якості маркерів невеликих картинок.
Мал. 4. Малюнок в якості маркера
Застосування list-style-image володіє деякими недоліками:
- малюнок можна зрушити вгору або вниз;
- в різних браузерах положення малюнка щодо тексту може відрізнятися.
Цих недоліків можна уникнути за допомогою властивості background. воно встановлює фонове зображення. Для кожного елемента списку
- ми прибираємо вихідні маркери і встановлюємо фонову картинку без повторення. А щоб текст не виводився поверх малюнка, зміщуємо його вправо через padding-left (приклад 4).
Приклад 4. Використання background
Положення тексту і маркера
Існує два способи розміщення маркера щодо тексту: маркер виноситься за кордон елементів списку або обтекается текстом (рис. 5).
На рис.1 показаний результат прикладу, що ілюструє наведені особливості маркованого списку.
Мал. 1. Вид маркованого списку
вид маркера
Маркери можуть приймати один з трьох видів: зафарбований кружок (за замовчуванням), зафарбований кружок і квадрат. Для вибору типу маркера використовується властивість list-style-type або універсальне list-style (приклад 1). Застосовуються наступні значення:
Приклад 1. Зміна виду маркера
У прикладі показано створення маркованого списку, де в якості значка маркера використовується невеликий однотонний квадрат. Хоча кількість значень обмежена трьома, це не означає, що в нашому розпорядженні всього три види маркера. Існує безліч спецсимволов, які з успіхом можуть виступати в якості значка маркера. «Прикрутити» їх безпосередньо до