Можно ли изменить маркер для маркированного списка. Как создать маркированный список? Маркированные и нумерованные списки. Положение от текста
Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.
По умолчанию стоит черная точка. Если просто задать цвет элементу li, то ничего не получится - цвет будет задан всей строке, а нужно изменить только цвет маркера (ul li цвет точек).
Как изменить цвет буллитов с помощью CSS
- Скрываем оригинальные маркеры списка с помощью свойства list-style-type
- Добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content . Это позволит вставить любой текст или символ перед элементом li .
- Внешним видом маркера можно управлять через стили CSS, изменяя цвет, шрифт, фон и другое. Я использовал жирное начертание шрифта Монтсеррат.
Если у вас возникла ситуация, когда маркеры появились в ненужных местах, например в главном меню или в дублирующем меню в футере, то это можно легко исправить. Просто допишите родительский элемент, в котором находятся списки, цвет маркеров которых нам надо изменить. Я добавил слово article и теперь эти изменения стали относиться только к контентной области сайта.
article li { list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */ } article li:before { font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: " "; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ }Задача
Изменить вид маркеров в списке и заменить их на другой символ.
Решение
С помощью 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.
С помощью окна диалога Список можно изменить следующие параметры маркированного списка:
Символ маркера на любой символ из шрифтов, установленных на компьютере.
Величину выступа.
Расстояние между символом маркера и текстом.
Выравнивание.
Для этих целей необходимо войти в меню Формат – Список и нажать кнопкуИзменить , после чего откроется окно диалогаИзменить маркированный список , представленное на рис. 4.25.
Рис. 4.25. Окно диалога Изменить маркированный список
Ниже приведен состав его опций:
Опции |
Назначение |
Символ маркера |
|
Предлагает варианты различных шрифтов для выбранного символа |
|
Позволяет осуществить выбор варианта символа маркера |
|
Положение маркера |
|
Определяет выравнивание и положение маркера относительно левой границы текста |
|
Положение от текста |
|
Устанавливает величину отступа от правого края маркера до начала текста |
|
Позволяет визуально оценить, как будет выглядеть список после внесения в него изменений |
Изменение формата нумерованного списка
Нумерованные списки создаются на вкладке Нумерованные (рис. 4.24). Если предложенные форматы нумерованного списка не подходят для оформления конкретного документа, можно создать собственный формат списка, нажав кнопкуИзменить в диалоговом окнеСписок на вкладкеНумерованный. При этом откроется окно диалогаИзменение нумерованного списка (рис. 4.26).
Рис. 4.26. Окно диалога Изменить нумерованный список
Ниже приведены опции этого окна диалога, с помощью которых осуществляется изменение формата нумерованного списка.
Опция |
Назначение |
|
Формат номера |
||
Нумерация |
Осуществляет выбор стиля номеров для списка |
|
Задает номер, с которого должна начаться нумерация в списке |
||
Позволяет выбрать шрифт для номеров в списке и для любого текста до и после номеров Открывает вкладку Шрифт |
||
Положение номера |
||
Выравнивание |
Устанавливает выравнивание списка |
|
Определяет выравнивание и положение номера |
||
Положение текста |
||
Устанавливает расстояние от правого края номера до начала текста |
||
Дает возможность увидеть все проводимые изменения до внесения их в документ |
||
Создание многоуровневых списков
Во многих видах документов встречаются более сложные типы списков. Это так называемые многоуровневые списки. В них также используется либо маркировка, либо нумерация, а иногда и сочетание того и другого. Но главное их отличие от предыдущих типов списков – наличие нескольких уровней. В зависимости от уровня для каждого абзаца устанавливается символ или номер.
Рис. 4.27. Вкладка Многоуровневые окна диалогаСписок .
Многоуровневые списки отличаются от обычных наличием отступов. Определенный отступ принимается за уровень такого списка.
Создание многоуровневого списка возможно только с помощью окна диалога Список . Причем уровни задает сам исполнитель, устанавливая определенные отступы. Word анализирует отступы и, в зависимости от их величины, нумерует, создавая уровни.
Можно создавать измененные форматы нумерации для различных уровней многоуровневого списка, однако в одном документе допустим только один формат многоуровневого списка.
Для создания многоуровневого списка необходимо выполнить следующие действия:
1. Определить фрагмент документа, который предполагается оформить в виде списка.
2. Создать отступы каждого абзаца, воспользовавшись кнопкойУвеличить отступ на панели инструментовФорматирование (при создании отступов нельзя использовать табуляцию).
3. Выделить выбранный фрагмент текста.
4. Выбрать команду Формат –Список . В окне диалогаСписок перейти на вкладкуМногоуровневый (рис. 4.27).
5. Выбрать нужный тип многоуровневого списка из предложенных вариантов. Нажать ОК .
В статье представлено несколько способов, которые позволяют установить определенный маркер для ненумерованного списка, а также указаны их достоинства и недостатки
Если проанализировать какой-либо сайт, то можно обнаружить тот факт, что в контенте очень часто присутствуют списки разного рода: меню, список товаров и т. д. В 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" ; }
На практике получим такую картину:
Напоминаю о том, что в реальных условиях хаки подключаются условными комментариями .
При использовании этого метода главное знать кодировку необходимого значка. Также стоит отметить, что для expression спецсимволы прописываются числовой комбинацией или мнемоническим кодом. Что касается свойства 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, this. innerHTML = "" + this. 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= "#" > Главная a> li> < li>< a href= "#" > Блог a> li> < li>< a href= "#" > CSS a> li> < li> Валидный код при использовании target= "_blank" li> ul>
li: before{ content: "\21 92" ; } li: first- child: before{ content: "" ; }
Стоит также отметить, что такой прием используют не только для хлебных крошек, но и для обычных маркированных списков, в зависимости от дизайнерского задания.
В каких браузерах работает?
6.0+ | 4.0+ | 9.5+ | 3.0+ | 3.0+ | - | - |
Выводы
Подводя итог, можно отметить тот факт, что применение псевдоэлемента before является оправданным и рациональным в основном контенте, так как там не выдвигают особых требований к оформлению списков. Это в свою очередь позволит уменьшить нагрузку на сервер, в сравнении с вариантом, когда используют картинку. А если еще отметить тот факт, что в основном контенте может быть очень много маркированных списков, то разница может стать существеннее. Но картинки значительно выигрывают в плане дизайнерских решений маркера.
- Изменение вида стандартного маркера для нумерованных списков
- Установка типа маркера для маркированных списков
- Установка изображения вместо маркера для элементов списка
С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные . По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.
Изменение и удаление маркеров
Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type , в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.
Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:
CSS Свойство:
list-style-type:
Результат:
- Кликните на значение свойства list-style-type
- Наблюдайте за сменой маркеров
- Используйте для своих списков наиболее подходящие маркеры
Ol#myList {
list-style-type: decimal
;
}
Кликните на любое значение свойства, чтобы увидеть результат
Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:
- Кофе
- Чай
- Кофе
- Чай
Замена маркеров картинками
Если вам не подходит ни один из предлагаемых по умолчанию маркеров, то CSS предоставляет возможность заменить их любой картинкой, в этом вам поможет свойство list-style-image , в значении которого нужно прописать путь к выбранному изображению.
Примите во внимание тот факт, что изображение не будет автоматически масштабироваться под список и будет отображено собственным размером, поэтому придется подбирать изображение подходящее по размеру или редактировать существующее, уменьшив или увеличив его до нужного:
- Кофе
- Чай
- Кофе
- Чай
Отступ списка
При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left , которое позволяет регулировать внутренний отступ:
- Кофе
- Чай
- Кофе
- Чай
В примере мы полностью убрали отступ с левой стороны, поэтому пункты списка теперь вплотную прилегают к краю окна браузера. И как видно из примера маркированный список отображается именно так, как и было задумано, но в нумерованном списке пропали маркеры. Причина кроется в самих маркерах - по умолчанию маркеры не являются частью содержимого пунктов списка, поэтому если убрать левый отступ они не сдвигаются вместе с содержимым элементов
Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:
- outside - маркер располагается слева от содержимого (является значением по умолчанию)
- inside - маркер располагается внутри пункта списка вместе с содержимым
Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
В примере к каждому пункту списка была добавлена рамка, чтобы визуально показать границы пунктов списка.