Настройка на маркера на списъка по различни начини. Искам да сменя типа на маркера с друг символ

CSS списъци- набор от свойства, отговорни за дизайна на списъците. Използването на HTML списъци е много често срещано при създаване на ленти за навигация на сайта. Списъчните елементи представляват набор от блокови елементи.

Използвайки стандартни CSS свойства, можете промяна външен видсписък маркер, добавете изображение за маркер, и промяна на местоположението на маркера. Височината на маркерния блок може да бъде зададена със свойството line-height.

Оформяне на списъци с CSS стилове

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

Свойството променя типа маркер или премахва маркераза обозначени с водещи символи и номерирани списъци. Наследени.

Синтаксис

Ul (тип стил на списък: няма;) ul (тип стил на списък: квадрат;) ol (тип стил на списък: няма;) ol (тип стил на списък: долен алфа;) Ориз. 1. Пример за дизайн на списъци с водещи и номерирани списъци

2. Изображения за елементи на списък стил-изображение

Изображенията и градиентните запълвания могат да се използват като маркери за елементи от списък. Наследени.

Синтаксис

Ul (изображение в стил на списък: url("images/romb.png");) ul (изображение в стил на списък: линеен градиент (#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Ориз. 2. Проектиране на списък с водещи символи с изображение
Ориз. 3. Оформяне на списък с водещи символи с градиент

3. Местоположение на маркер в списък списък-стил-позиция

Това свойство предоставя възможност за позициониране на маркера извън или вътре в съдържанието на елемента на списъка. Наследени.

Има два популярни начина за промяна на цвета на водещите точки, така че да се различават от цвета на текста.

Използване

Вътре във всеки елемент

създайте дизайн

В този случай цветът на маркерите се определя от свойството color style за селектора li, а цветът на текста се определя от селектора span (пример 1).

Пример 1: Използване на вложени тагове

• цигулка
• китара
• гайда
• варел орган
• Селеста

Резултатът от този пример е показан по-долу (фиг. 1).

Ориз. 1. Маркери, които се различават по цвят от основния текст

Въпреки своята простота, методът е неудобен, особено при големи списъци, защото сега трябва да добавяте към всеки елемент от списъка .

Употреба::преди

Идеята е да премахнем маркерите на оригиналния списък чрез свойството 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 псевдо-елементи, така че за водещия символ на диска ще изглежда така:

ul ( list-style-type: none; ) li ( position: relative; ) li:before ( content: ""; display: block; position: absolute; width: 5px; /* коригирайте според вашите нужди */ height: 5px; /* настройте според вашите нужди */ border-radius: 50%; ляво: -15px; /* коригирайте според вашите нужди */ горе: 0,5em; фон: #f00; /* коригирайте според вашите нужди * / )

• първи
• второ
• трети

• ширината и височината трябва да са равни, за да поддържат указателите заоблени
• можете да зададете border-radius на нула, ако искате да имате квадратни куршуми

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

Чудех се дали има начин да променя цвета на куршумите в списъка.

Имам списък:

• къща
• градина

Не е възможно да вмъкнете нищо в li, като например "span" и "p". Мога ли да променя цвета на куршумите, но не и текста по някакъв начин умен начин?

Ако можете да използвате изображение, можете. И без изображение няма да можете да промените цвета само на водещите точки, но не и на текста.

Използване на изображение

Li (изображение в стил на списък: url(images/yourimage.jpg); )

Без да използвате изображение

След това трябва да редактирате HTML маркиранеи включва span в списъка и цвят li и span с различни цветове.

Също така много ми хареса отговорът на Марк - имам нужда от набор от различни цветни UL и очевидно би било по-лесно просто да използвам клас. Ето какво използвах например за портокала:

ul.orange ( list-style: none; padding: 0px; ) ul.orange > li:before ( content: "\25CF "; font-size: 15px; color: #F00; margin-right: 10px; padding: 0px ; височина на реда: 15px; )

Освен това открих, че шестнадесетичният код, който използвах за "съдържание:", е различен от този на Марк (този шестнадесетичен кръг изглеждаше твърде висок). Този, който използвах, изглежда стои идеално в средата. Намерих и няколко други форми (квадрати, триъгълници , кръгове и т.н.)

Можем да комбинираме list-style-image със svg вграждане в 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, "); }

• големи кръгове!
  • Големи правоъгълници!
  • b
    • Малки кръгове!
    • ° С
      • Малки правоъгълници!

• бикове
• очи.

• Мулти
• цвят

Атрибут Ширина/Височина

Някои браузъри изискват атрибутите за ширина и височина да бъдат зададени

Кодировки

Решението, което използвам, е базирано на решенията на @Marc и @jessica:

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

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

Знам, че това е наистина, наистина стар въпрос, но си играех с това и измислих начин, който не виждах. Дайте цвят на списъка и след това заменете цвета на текста със селектора::first-line::first-line. Не съм експерт, така че може да има нещо нередно с този подход, който пропускам, но изглежда, че работи.

li ( цвят: син; ) li::първи ред ( цвят: черен; )

• къща
• градина

Задача

Променете външния вид на маркерите в списъка и ги заменете с различен знак.

Решение

СЪС използвайки HTMLили CSS е позволено да зададете един от трите вида маркери: диск (точка), кръг (кръг), квадрат (квадрат). Трябва да добавите тези стойности към свойството стил на стил на списък, което е указано за селектора UL или LI (пример 1).

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

IN този примеркато маркери се използва квадрат (фиг. 1).

Ориз. 1. Вид маркери

Изборът и настройката на вашия собствен маркер се извършва по много особен начин, чрез псевдоелемента :before. Първо, премахнете изцяло куршумите от списъка, като зададете свойството стил на стила на списъка на none и след това добавите псевдоелемента :before към селектора LI. Самото извеждане на знаци се извършва с помощта на свойството content, чиято стойност е желаният текст или знак (пример 2).

Пример 2: Използване на :before и съдържание

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

В този пример маркерът по подразбиране е скрит и вместо него се добавя символ (фиг. 2).

Ориз. 2. Символни маркери

За да зададете някакъв труден знак като маркер, можете да използвате Програма на MicrosoftТаблица с думи или знаци е стандартна програмавключен в Комплект Windows. Кодирането на кода трябва да е UTF-8.