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

Значення	Опис
none Елемент списку Елемент списку Елемент списку	Маркер не відображається.
disc Елемент списку Елемент списку Елемент списку	Маркер у формі зафарбованого кухоль. Це значення за промовчанням.
armenian Елемент списку Елемент списку Елемент списку	Числовий маркер (традиційна Вірменська нумерація).
circle Елемент списку Елемент списку Елемент списку	Маркер у формі кола.
cjk-ideographic Елемент списку Елемент списку Елемент списку	Прості ідеографічні числа.
decimal Елемент списку Елемент списку Елемент списку	Числовий маркер (десяткові арабські числа, що починаються з 1).
decimal-leading-zero Елемент списку Елемент списку Елемент списку	Числовий маркер (десяткові арабські числа, що починаються з 1 і доповнені початковим нулем - 01, 02, 03...).
georgian Елемент списку Елемент списку Елемент списку	Числовий маркер (традиційна Грузинська нумерація – an, ban, gan, …, he, tan, in, in-an…).
hebrew Елемент списку Елемент списку Елемент списку	Числовий маркер (традиційна Єврейська нумерація).
hiragana Елемент списку Елемент списку Елемент списку	Числовий маркер (японська складова абетка Хірагана - a, i, u, e, o, ka, ki...).
hiragana-iroha Елемент списку Елемент списку Елемент списку	Числовий маркер (японська складова абетка Хірагана іроха - i, ro, ha, ni, ho, he, to, ...).
katakana Елемент списку Елемент списку Елемент списку	Числовий маркер (японська складова абетка Катакана - A, I, U, E, O, KA, KI, ...).
katakana-iroha Елемент списку Елемент списку Елемент списку	Числовий маркер (японська складова абетка Катакана Іроха - I, RO, HA, NI, HO, HE, TO, ...).
lower-alpha Елемент списку Елемент списку Елемент списку	Літери ascii нижнього регістру (a, b, c, d...z).
lower-greek Елемент списку Елемент списку Елемент списку	Рядкові грецькі букви (α, β, γ, δ, тощо).
lower-latin Елемент списку Елемент списку Елемент списку	Рядкові латинські літери (a, b, c, d, ... z).
lower-roman Елемент списку Елемент списку Елемент списку	Римські числа у нижньому регістрі (i, ii, iii, iv, v тощо).
square Елемент списку Елемент списку Елемент списку	Маркер у вигляді квадрата.
upper-alpha Елемент списку Елемент списку Елемент списку	Літери ascii верхнього регістру (A, B, C, D,...Z).
upper-latin Елемент списку Елемент списку Елемент списку	Великі латинські літери (A, B, C, D, ... Z).
upper-roman Елемент списку Елемент списку Елемент списку	Римські цифри в верхньому регістрі(I, II, III, IV, V тощо).

Змінити колір маркерів у 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: -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-коді за нумерований список відповідає тег , а за маркований - .

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

Щоб усунути цей негативний ефект, треба скасувати висновок маркера, скориставшись властивістю list-style :

ol, ul (list- style: none; )

З цього починається формування списку з унікальними маркерами та значками. Нижче представлені найпоширеніші способи представлення унікальних та однакових для всіх браузерів значків елементів списку.

Маркери через картинки

Найпоширеніший і найпростіший спосіб вказати для списку маркер – це скористатися бекграундною картинкою (властивість background). Метод ґрунтується на вказівці таблиці стилів фонового малюнка для елементів списку, а також внутрішній відступ (властивість padding), який зарезервує місце для нового маркера. Нижче наведено приклад коду:

ul ( list- style: none; ) li( background: url(шлях- до- картинці) no- repeat; padding- left: 20px; )

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

Головна позитивна сторона цього методу полягає в 100%-ної кросбраузерності, але, не дивлячись на це, є маленький недолік. Використання зображення – це додаткове звернення до сервера.

Маркери за допомогою before

Існує варіант, коли можна обійтися без малюнку, якщо дизайнерські умови дозволяють це. Таке часто допускається при оформленні основного контенту, коли список маркується найпростішими елементами, типу квадратик ( ) або стрілочка (→). Таким чином, ми підійшли до того, що як маркер може виступати будь-який відповідний спецсимвол.

Далі виникає питання, як спецсимволи вставляти в елементи списку. Природно не вручну, інакше це був би дуже затягнутий і нудний процес, плюс ще й трудомісткий. Вийти із цієї ситуації нам допоможе псевдоелемент before, Застосування якого прив'язується до певного селектора, що дозволяє автоматизувати наш процес присвоєння маркерів зі спецсимволів. Таке рішення підходить до більшості браузерів, з урахуванням того, що для IE буде прописано expression.

Нижче наведено приклад коду, який формує маркований список з коротким тире:

li( this. innerHTML = "-" + this. innerHTML) /*хак для IE*/ ) li: before( content: " \201 3" ; }

На практиці отримаємо таку картину:

Нагадую про те, що в реальних умовах хакі підключаються умовними коментарями.

З використанням цього методу головне знати кодування необхідного значка. Також варто зазначити, що для expresion спецсимволи прописуються числовою комбінацією або мнемонічним кодом. Що стосується властивості content , то в цьому випадку спочатку ставиться сліш, а потім йде запис шістнадцяткового коду.

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

Вищезгаданий спосіб не завжди коректно відпрацьовує в легендарному IE (не дивлячись на хак). Точніше, "милиці" для цього браузера не до кінця доопрацьовані. Більш дієвим є метод, заснований на insertAdjacentHTML, Нижче представлений код цього методу:

li( //z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }

Маркери, намальовані CSS-властивістю

Деякі квадратні маркери можна намалювати за допомогою деяких CSS-властивостей. Наприклад, квадрат із кольоровою заливкою малюється через властивість background-color , а квадратик як рамки – border (до речі, квадрат із заливкою можна намалювати й у такий спосіб). Приклад запису в CSS-файлі:

li( //z-index: expression(runtimeStyle.zIndex = 1,це. innerHTML = "

" + Це. innerHTML) /* хак для ие6 і 7 */) li: before, . listMarkerBackColor( background- color: #539127; width: 7px; height: 7px; content: "" ; float: left; margin: 6px 6px 0 0 ; overflow: hidden; ) html . listMarkerBackColor( margin- right: 1px; /* виправляємо малюнковий косяк у IE6 */ }

Таким чином, мальований CSS-властивістю маркер виглядатиме на практиці:

Використання before та first-child у комплексі

Такий спосіб часто застосовується при оформленні хлібних крихт на сайті. Хто не знає про що мова, дивимося на приклад нижче

У такому разі кожне посилання відокремлюється один від одного спецсимволом, але перед першим елементом ніякого спецсимволу не повинно бути. У цьому нам допоможе псевдоклас first-child, який звертається лише до першого елементу списку. У кодовому вигляді це має виглядати так

HTML

< ul> < li>< a href= "#" >Головна < li>< a href= "#" >Блог < li>< a href= "#" >CSS < li>Валідний код при використанні target = "_blank"

li: before( content: " \21 92" ; ) li: first- child: before( content: "" ; )

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

У яких браузерах працює?


6.0+	4.0+	9.5+	3.0+	3.0+	-	-

Висновки

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

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

За замовчуванням стоїть чорна крапка. Якщо просто встановити колір елементу li, то нічого не вийде - колір буде заданий усьому рядку, а потрібно змінити тільки колір маркера (ul li колір точок).

Як змінити колір булітів за допомогою CSS

Приховуємо оригінальні маркери списку за допомогою властивості list-style-type
Додаємо свої власні маркери за допомогою псевдоелементу :beforeта властивості content. Це дозволить вставити будь-який текст або символ перед елементом li.
Зовнішнім виглядом маркера можна керувати через стилі CSS, змінюючи колір, шрифт, фон та інше. Я використовував жирне зображення шрифту Монтсеррат.

li ( list-style-type: none; /* Приховуємо маркери, що відображаються за замовчуванням */ ) li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Колір маркера */ content: " "; /* Маркер */ padding-right: 7px;

Якщо у вас виникла ситуація, коли маркери з'явилися в непотрібних місцях, наприклад, у головному меню або в дублюючому меню у футері, то це можна легко виправити. Просто допишіть батьківський елемент, де знаходяться списки, колір маркерів яких нам треба змінити. Я додав слово articleі тепер ці зміни стали належати лише до контентної області сайту.

article li ( list-style-type: none; /* Приховуємо маркери, що відображаються за замовчуванням */ ) article li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Колір маркера */ content: " "; /* Маркер */ padding-right: 7px; / * Відступ від маркера до тексту */ )

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

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

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

вкладаємо , а вже всередину його поміщаємо текст. Іншими словами замість традиційної схеми

текст

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

текст

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

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

Колір тексту та маркерів у списку

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

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

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

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

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

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

. Причому видом тексту (колір, шрифт, тло та ін.) також можна керувати через стилі, що продемонстровано в прикладі 2.

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

Колір маркерів у списку

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

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

У цій статті підручника мова піде про роботу зі списками CSS, ви навчитеся змінювати тип маркера, розташування маркера щодо елемента списку, створювати власні маркери і навіть змінювати колір маркера.

Думаю, ви вже знаєте, що в HTML 5 застосовується два основні види списків (якщо не брати до уваги списки описів та елементи меню):

нумерований (упорядкований) список – HTML елемент
1. маркований (невпорядкований) список – HTML елемент
  CSS надає нам широкі можливості форматування зовнішнього вигляду цих списків, розглянемо основні з них.
  
  Зміна типу маркера
  
  Перше властивість, яке хотілося б розглянути цю властивість list-style-type , воно визначає тип маркера елемента списку.
  
  Меню навігації, наприклад, часто складається зі звичайних маркованих списків (HTML елемент

Розташування маркера щодо елемента списку

Створення власних маркерів

Зміна кольору маркера в CSS

Запитання та завдання на тему