Встановлення маркера списку у різний спосіб. Хочу змінити вигляд маркера на інший символ

CSS-списки- Набір властивостей, що відповідають за оформлення списків. Використання HTML-списків дуже поширене під час створення панелей навігації сайтом. Елементи списку є набором блокових елементів.

За допомогою стандартних CSS-властивостей можна змінити зовнішній виглядмаркера списку, додати зображення для маркера, а також змінити розташування маркера. Висоту блоку маркера можна встановити властивістю line-height .

Оформлення списків за допомогою CSS-стилів

1. Тип маркера списку list-style-type

Властивість змінює тип маркера або видаляє маркердля маркованого та нумерованого списків. Успадковується.

Синтаксис

Ul (list-style-type: none;) ul (list-style-type: square;) ol (list-style-type: none;) ol (list-style-type: lower-alpha;) Мал. 1. Приклад оформлення маркованого та нумерованого списків

2. Зображення для списку елементів list-style-image

Як маркер елементів списку можна використовувати зображення та градієнт заливки. Успадковується.

Синтаксис

Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Мал. 2. Оформлення маркованого списку за допомогою зображення
Мал. 3. Оформлення маркованого списку за допомогою градієнта

3. Розташування маркера списку list-style-position

Ця властивість надає можливість розташовувати маркер поза або всередині вмісту списку. Успадковується.

Існує два популярні способи зміни кольору маркерів, щоб вони відрізнялися від кольору тексту.

Використання

Всередину кожного елемента

створюємо конструкцію

У цьому колір маркерів визначається стильовим властивістю color для селектора li , а колір тексту - селектора span (приклад 1).

Приклад 1. Використання вкладених тегів

• Скрипка
• Гітара
• Волинка
• Шарманка
• Челеста

Результат цього прикладу показаний нижче (рис. 1).

Мал. 1. Маркери, які відрізняються за кольором від основного тексту

Незважаючи на простоту, метод незручний, особливо при об'ємних списках, адже до кожного пункту списку тепер доведеться додавати .

Використання:before

Сенс у наступному - прибираємо оригінальні маркери списку через властивість list-style-type і додаємо свої власні маркери за допомогою псевдоелементу ::before та властивості content. Така зв'язка дозволяє вставляти будь-який текст або символ перед елементом, у разі

Приклад 1. Використання вкладених тегів

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Скрипка
• Гітара
• Волинка
• Шарманка
• Челеста

Результат цього прикладу показаний нижче (рис. 1).

Мал. 1. Маркери, які відрізняються за кольором від основного тексту

Незважаючи на простоту, метод незручний, особливо при об'ємних списках, адже до кожного пункту списку доведеться додавати тег. . Тому розберемо хитрий спосіб повністю заснований на роботі CSS.

Сенс у наступному - прибираємо оригінальні маркери списку через властивість list-style-type і додаємо свої власні маркери за допомогою псевдоелемента: before та властивості content. Така зв'язка дозволяє вставляти будь-який текст або символ перед елементом, у разі LI . Причому видом тексту (колір, шрифт, тло та ін.) також можна керувати через стилі, що і продемонстровано в прикладі 2. Тут як маркер використовується символ параграфа ¶.

Приклад 2. Використання псевдоелемента: before

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Північ
• Південь
• Захід
• Схід

Результат цього прикладу показано на рис. 2.

Мал. 2. Маркери, створені за допомогою стилів

Змінити колір маркерів у HTML-списку без використання діапазону (6)

Для мене найкращим варіантомє використання псевдоелементів CSS, тому для disc кулі disc це буде виглядати так:

ul ( list-style-type: none; ) li ( position: relative; ) li:before ( content: ""; display: block; position: absolute; width: 5px; /* adjust to suit your needs */ height: 5px;/* adjust to suit your needs */ border-radius: 50%;left: -15px; / )

• first
• second
• third

• width і height повинні мати рівні значення, щоб утримувати вказівники округлими
• ви можете встановити border-radius рівним нулю, якщо ви хочете мати square кулі

Для більш стилів кулі можна використовувати інші css-форми https://css-tricks.com/examples/ShapesOfCSS/ (виберіть це, для якого не потрібні псевдоелементи, наприклад, трикутники)

Мені було цікаво, чи є спосіб змінити колір на кулі у списку.

У мене є список:

• House
• Garden

Неможливо вставити щось у li, наприклад, span і p. Чи можу я змінити колір куль, але не текст якийсь розумним способом?

Якщо ви можете використати зображення, ви можете це зробити. І без зображення ви не зможете змінити колір лише кулі, а не текст.

Використання зображення

Li (list-style-image: url(images/yourimage.jpg); )

Без використання зображення

Потім вам потрібно відредагувати розмітку HTMLі включити проліт всередині списку і пофарбувати і діапазон з різними кольорами.

Мені теж дуже сподобалася відповідь Марка - мені потрібен набір різних кольорових UL, і, очевидно, було б простіше використовувати клас. Ось що я використав для апельсина, наприклад:

Ul.orange ( list-style: none; padding: 0px; ) ul.orange > li:before ( content: "\25CF "; font-size: 15px; color: #F00; margin-right: 10px; padding: 0px line-height: 15px;

Крім того, я виявив, що шістнадцятковий код, який я використав для «content:», був іншим, ніж у Marc's (це шестигранне коло здавалося надто високим). Той, який я використав, здається, сидить зовсім посередині. Я також знайшов кілька інших постатей (квадрати, трикутники, кола тощо. буд.)

Ми можемо комбінувати list-style-image із svg s, який ми можемо вбудувати в css! Цей метод пропонує неймовірний контроль над «кулями», які можуть стати чим завгодно.

Щоб отримати червоне коло, просто використовуйте наступний css:

"); }

Але це лише початок. Це дозволяє нам робити будь-яку божевільну річ, яку ми хочемо з цими кулями. кола або прямокутники легко, але все, що ви можете намалювати за допомогою svg, можете зайти туди! Перегляньте приклад яблучного яблука нижче:

ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul.bulls-eye ( list-style-image: url("data:image/svg+xml, "); ) ul.multi-color ( list-style-image: url("data:image/svg+xml, "); }

• Big circles!
  • Big rectangles!
  • b
    • Невеликі circles!
    • c
      • Невеликі rectangles!

• Bulls
• eyes.

• Multi
• color

Ширина/висота атрибутів

Для деяких браузерів потрібні атрибути width і height які мають бути встановлені на

Кодування

Побудова обох рішень @Marc та @jessica - це рішення, яке я використовую:

Li ( position:relative; ) li:before ( content:""; display: block; position: absolute; width: 6px; height:6px; border-radius:6px; left: -20px; top: .5em; background- color: #000;

Я використовую em для розмірів шрифту, тому якщо ви встановили top значення в.5em воно завжди буде поміщено в середину вашого першого рядка тексту. Я використав left:-20px тому що це є позиція left:-20px за замовчуванням у браузерах: parent padding/2

Я знаю, що це дійсно, дійсно, старе питання, але я грав із цим і придумав спосіб, якого я не бачив. Дайте списку колір, а потім перезапишіть колір тексту за допомогою::first-line селектора::first-line . Я не експерт, тому, можливо, щось не таке з цим підходом, що мені не вистачає, але, схоже, він працює.

li ( color: blue; ) li::first-line ( color: black; )

• House
• Garden

Завдання

Змінити вигляд маркерів у списку та замінити їх на інший символ.

Рішення

З допомогою HTMLабо CSS допускається встановлювати один із трьох типів маркерів: disc (точка), circle (кружок), square (квадрат). Додавати ці значення потрібно до стильової властивості list-style-type, яка вказується для селектора UL або LI (приклад 1).

Приклад 1. Стандартні маркери

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Чебурашка
• Крокодил Гена
• Шапокляк

У даному прикладіяк маркерів використовується квадрат (рис. 1).

Мал. 1. Вид маркерів

Вибір і встановлення власного символу маркера відбувається дуже своєрідно через псевдоелемент :before . Спочатку слід взагалі прибрати маркери у списку, надавши значення none стильової властивості list-style-type, а потім додати псевдоелемент: before до селектора LI. Сам висновок символу здійснюється за допомогою властивості content, як значення якого і виступає бажаний текст або символ (приклад 2).

Приклад 2. Використання: before та content

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Чебурашка
• Крокодил Гена
• Шапокляк

У цьому прикладі маркер, встановлений за умовчанням, ховається, а натомість додається символ (рис. 2).

Мал. 2. Маркери як символу

Щоб встановити як маркер якийсь хитрий символ, можна скористатися програмою Microsoft Word або таблиця символів, це стандартна програмащо входить у комплект Windows. Кодування коду має бути обов'язково UTF-8.