Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.
По умолчанию стоит черная точка. Если просто задать цвет элементу 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 и нумерованный.
Маркеры списка представляют собой изображения разных фигур: кружочки, квадратики, галки и тому подобное. Их еще называют пульками. В качестве маркеров для списка используются и собственные рисунки.
Нумерованный список представляет собой вывод информации под номерами 1, 2, 3 и т.д.
Обычно маркеры представляют собой простые черные кружочки, что привычно для пользователя, но с другой стороны не привлекают особого внимания к тексту.
Если вы решили заменить эти кружки на дизайнерские, то нужно освоить оформление списка с помощью css . Чем мы сегодня и займемся.
Основа любого списка состоит из следующего кода веб-страницы:
- Первый элемент списка
- Второй элемент списка
- Последний элемент списка
Выглядит этот блок так:
- Первый элемент списка
- Второй элемент списка
- Последний элемент списка
Css оформление маркеров списка
Внешний вывод будем прописывать в файле стилей style.css . Он может называться и по-другому, но иметь расширение.css.
Стандартные маркеры CSS: кружок (circle) – не закрашенный кружок, точка (disk) – закрашенный кружок, квадрат (square) – закрашенный квадрат.
Формирует список в css код ul - с его помощью мы задаем, какой из стандартных маркеров будет выводиться на странице.
Например, выведем списки с использованием кружка (circle). Запись в css файле будет такая:
Ul {list-style-type: circle}
Но часто нужно заменить маркеры не во всех выводимых списках, а только в определенных блоках. К примеру, изменить в постах, но не в комментариях. В этом случае, код ul не должен иметь никакого значения, а стиль кружка нужно прописать только для списков в постах. Так выглядит код без значения:
Ul {list-style-type: none}
Если вы не можете найти код в файле css, отвечающий за вывод списка в нужном вам блоке, то воспользуйтесь плагином для Firefox - Firebug или в Google Chrom нажмите правой кнопкой мыши на веб-странице блога. Затем «просмотр кода элемента».
Например, один из вариантов изменения внешнего вида списка в постах на стандартный кружок, если для блока контента нет ul :
Post-content ul {list-style-type: circle}
Или другой пример:
#content-blok ul{list-style-type:square}
Полный курс «Css практика»
]]> ]]>
Знание CSS необходимо каждому вебмастеру, потому что это универсальный способ сделать качественный дизайн без перегрузки кода страницы.
Для тех, кто хочет очень быстро научиться трюкам css стилей , ]]> рекомендую ]]> расширенный курс "CSS практика" Евгения Попова .
Следующие статьи:
Графические маркеры для списка.
Отступ списка css.
Как поменять css цвет маркера списка, чтобы его цвет был отличным от цвета текста.
Вложенные списки. Как в css сделать горизонтальный список. Изменение стиля нумерованных списков.
Скачать красивые маркеры для списков сайта.
Хочу изменить вид маркера на другой символ. Как это сделать?
С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому параметру list-style-type , который указывается для селектора UL или LI .
- Чебурашка
- Крокодил Гена
- Шапокляк
Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент before . Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому атрибуту list-style-type , а затем через двоеточие добавить псевдоэлемент before к селектору LI . Сам вывод символа осуществляется с помощью параметра content , в качестве значения которого и выступает желаемый текст или код знака в юникоде.
- Чебурашка
- Крокодил Гена
- Шапокляк
В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ +.
Замечание
Псевдоэлемент before не работает в браузере Internet Explorer, поэтому собственные маркеры в нем отображаться не будут.
Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word, выбрав меню Вставка > Символ... После чего откроется окно, как показано на рис. 1.
Рис. 1. Выбор символа в программе Microsoft Word
Код знака, выделенный на рисунке цветом, следует вписать в качестве параметра content , добавив перед ним слэш. Например, для приведенного символа следует указывать content: "\25aa" .
С помощью окна диалога Список можно изменить следующие параметры маркированного списка:
Символ маркера на любой символ из шрифтов, установленных на компьютере.
Величину выступа.
Расстояние между символом маркера и текстом.
Выравнивание.
Для этих целей необходимо войти в меню Формат – Список и нажать кнопкуИзменить , после чего откроется окно диалогаИзменить маркированный список , представленное на рис. 4.25.
Рис. 4.25. Окно диалога Изменить маркированный список
Ниже приведен состав его опций:
Опции |
Назначение |
Символ маркера |
|
Предлагает варианты различных шрифтов для выбранного символа |
|
Позволяет осуществить выбор варианта символа маркера |
|
Положение маркера |
|
Определяет выравнивание и положение маркера относительно левой границы текста |
|
Положение от текста |
|
Устанавливает величину отступа от правого края маркера до начала текста |
|
Позволяет визуально оценить, как будет выглядеть список после внесения в него изменений |
Изменение формата нумерованного списка
Нумерованные списки создаются на вкладке Нумерованные (рис. 4.24). Если предложенные форматы нумерованного списка не подходят для оформления конкретного документа, можно создать собственный формат списка, нажав кнопкуИзменить в диалоговом окнеСписок на вкладкеНумерованный. При этом откроется окно диалогаИзменение нумерованного списка (рис. 4.26).
Рис. 4.26. Окно диалога Изменить нумерованный список
Ниже приведены опции этого окна диалога, с помощью которых осуществляется изменение формата нумерованного списка.
Опция |
Назначение |
|
Формат номера |
||
Нумерация |
Осуществляет выбор стиля номеров для списка |
|
Задает номер, с которого должна начаться нумерация в списке |
||
Позволяет выбрать шрифт для номеров в списке и для любого текста до и после номеров Открывает вкладку Шрифт |
||
Положение номера |
||
Выравнивание |
Устанавливает выравнивание списка |
|
Определяет выравнивание и положение номера |
||
Положение текста |
||
Устанавливает расстояние от правого края номера до начала текста |
||
Дает возможность увидеть все проводимые изменения до внесения их в документ |
||
Создание многоуровневых списков
Во многих видах документов встречаются более сложные типы списков. Это так называемые многоуровневые списки. В них также используется либо маркировка, либо нумерация, а иногда и сочетание того и другого. Но главное их отличие от предыдущих типов списков – наличие нескольких уровней. В зависимости от уровня для каждого абзаца устанавливается символ или номер.
Рис. 4.27. Вкладка Многоуровневые окна диалогаСписок .
Многоуровневые списки отличаются от обычных наличием отступов. Определенный отступ принимается за уровень такого списка.
Создание многоуровневого списка возможно только с помощью окна диалога Список . Причем уровни задает сам исполнитель, устанавливая определенные отступы. Word анализирует отступы и, в зависимости от их величины, нумерует, создавая уровни.
Можно создавать измененные форматы нумерации для различных уровней многоуровневого списка, однако в одном документе допустим только один формат многоуровневого списка.
Для создания многоуровневого списка необходимо выполнить следующие действия:
1. Определить фрагмент документа, который предполагается оформить в виде списка.
2. Создать отступы каждого абзаца, воспользовавшись кнопкойУвеличить отступ на панели инструментовФорматирование (при создании отступов нельзя использовать табуляцию).
3. Выделить выбранный фрагмент текста.
4. Выбрать команду Формат –Список . В окне диалогаСписок перейти на вкладкуМногоуровневый (рис. 4.27).
5. Выбрать нужный тип многоуровневого списка из предложенных вариантов. Нажать ОК .
Задача
Изменить вид маркеров в списке и заменить их на другой символ.
Решение
С помощью 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.