Как поменять маркеры в списке css
Перейти к содержимому

Как поменять маркеры в списке css

  • автор:

Как изменить маркер списка CSS

Сегодня разберемся, как создаются списки на веб-странице, какие маркеры используются и протестируем разные стили для изменения внешнего вида.

Напомню, как подключаются стили к Html странице:

Существуют маркированный, или ненумерованный список css и нумерованный.

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

Нумерованный список представляет собой вывод информации под номерами 1, 2, 3 и т.д.

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

Если вы решили заменить эти кружки на дизайнерские, то нужно освоить оформление списка с помощью css. Чем мы сегодня и займемся.

Основа любого списка состоит из следующего кода веб-страницы:

  • Первый элемент списка
  • Второй элемент списка
  • Последний элемент списка

Выглядит этот блок так:

  • Первый элемент списка
  • Второй элемент списка
  • Последний элемент списка

Css оформление маркеров списка

Внешний вывод будем прописывать в файле стилей style.css. Он может называться и по-другому, но иметь расширение .css.

Стандартные маркеры CSS: кружок (circle) – не закрашенный кружок, точка (disk) – закрашенный кружок, квадрат (square) – закрашенный квадрат.

Формирует список в css код ul — с его помощью мы задаем, какой из стандартных маркеров будет выводиться на странице.

Например, выведем списки с использованием кружка (circle). Запись в css файле будет такая:

Но часто нужно заменить маркеры не во всех выводимых списках, а только в определенных блоках. К примеру, изменить в постах, но не в комментариях. В этом случае, код ul не должен иметь никакого значения, а стиль кружка нужно прописать только для списков в постах. Так выглядит код без значения:

Если вы не можете найти код в файле css, отвечающий за вывод списка в нужном вам блоке, то воспользуйтесь плагином для Firefox — Firebug или в Google Chrom нажмите правой кнопкой мыши на веб-странице блога. Затем «просмотр кода элемента».

Например, один из вариантов изменения внешнего вида списка в постах на стандартный кружок, если для блока контента нет ul:

.post-content ul

Или другой пример:

#content-blok ul

Полный курс «Css практика»

Видеокурс

Знание CSS необходимо каждому вебмастеру, потому что это универсальный способ сделать качественный дизайн без перегрузки кода страницы.

Для тех, кто хочет очень быстро научиться трюкам css стилей, рекомендую расширенный курс «CSS практика» Евгения Попова.

Следующие статьи:

Графические маркеры для списка.

Отступ списка css.

Как поменять css цвет маркера списка, чтобы его цвет был отличным от цвета текста.

Вложенные списки. Как в css сделать горизонтальный список. Изменение стиля нумерованных списков.

Скачать красивые маркеры для списков сайта.

Замена маркеров в HTML списке на символ ✓ : CSS решение

Если вы хотите использовать галочку вместо стандартных маркеров в списках, воспользуйтесь свойствами CSS. Сначала уберите обычные маркеры, применив list-style-type: none; , затем добавьте галочку перед текстом списка с помощью псевдоэлемента ::before .

Скопировать код

ul.no-bullets li::before

Прикрепите класс no-bullets к списку в своём HTML-коде:

Скопировать код

С этого момента каждый элемент списка будет помечен галочкой вместо обычного маркера.

Создание пространства и стилизация

Не забывайте о значимости пространства в дизайне. Подходящее расстояние между галочкой и текстом повышает читаемость. Используйте Unicode-символы \2713 или \2714 , добавляя после них пробельный символ Unicode \0020 :

Скопировать код

ul.no-bullets li::before

Также можно настроить цвет и вес шрифта галочки с помощью соответствующих CSS-свойств:

Скопировать код

ul.no-bullets li::before < content: '\2713\0020'; color: green; /* Зелёный цвет всегда будет уместным */ font-weight: bold; /* Выражайтесь более декларативно */ >

Таким образом, ваш список станет не только функциональным, но и визуально привлекательным.

Абсолютное позиционирование: коррекция положения галочки

Абсолютное позиционирование позволяет вам иметь больше контроля над положением галочки. Оставьте место для галочки, увеличив отступ у элементов списка:

Скопировать код

ul.positioned-ticks < list-style: none; padding-left: 30px; /* Увеличиваем пространство для манёвра */ >ul.positioned-ticks li

Теперь давайте применим абсолютное позиционирование к псевдоэлементу ::before , чтобы галочка занимала нужное положение:

Скопировать код

ul.positioned-ticks li::before

Добавляем в дело SVG

Для большей контролируемости и гибкости галочки можно использовать SVG-иконки. Это поможет лучше адаптировать символ к дизайну сайта и обеспечит отличное отображение на всех размерах экранов:

Скопировать код

ul.svg-ticks li::before < content: url('path/to/tick-icon.svg'); padding-right: 8px; /* Защитаем достаточное пространство для текста */ >

Выберите SVG-иконки, которые в лучшем соответствии с дизайном вашего сайта, из широкого ассортимента, предложенного такими библиотеками, как Font Awesome.

Полезные материалы

  1. list-style – CSS: Cascading Style Sheets | MDN — подробное руководство по стилизации списков с помощью CSS.
  2. ::before / ::after | CSS-Tricks – CSS-Tricks — внесите магию в CSS с помощью псевдоэлементов ::before и ::after.
  3. Unicode Character ‘CHECK MARK’ (U+2713) — узнайте больше о различных вариантах использования Unicode-символа галочки.
  4. CSS Styling Lists — гид по стилизации списков с использованием CSS.
  5. Circle Check Icon | Font Awesome — иконка галочки в круге от Font Awesome может стать прекрасным выбором для маркера списка.
  6. HTML Lists — всё о создании списков в HTML с возможностями настройки.
  7. CSS Content Property — руководство по применению свойства CSS content для вставки содержимого, включая Unicode-символы.

Списки в CSS

У каждого элемента списка есть маркер. Это значёк перед текстом. В CSS есть возможность установить внешний вид маркера. В том числе, можно вообще убрать маркер списка. Для этого есть свойство list-style-type . У него достаточно много значений. Часть значений применяется для маркированного, другая часть для нумерованного списка.

Для маркированного списка:

list-style-type: disc — в виде диска (по умолчанию)

list-style-type: circle — в виде круга

list-style-type: square — в виде квадрата

Для нумерованного списка

list-style-type: decimal — арабские цифры (по умолчанию)

list-style-type: decimal-leading-zero — арабские цифры c 0 впереди для чисел 1-9

list-style-type: upper-roman — заглавные римские цифры

list-style-type: lower-roman — строчные римские цифры

list-style-type: upper-latin — заглавные латинские буквы

list-style-type: upper-alpha — то же, что и upper-latin

list-style-type: lower-latin — строчные латинские буквы

list-style-type: lower-alpha — то же, что и lower-latin

list-style-type: lower-greek — строчные греческие буквы

list-style-type: armenian — армянские числа

list-style-type: georgean — грузинские числа

list-style-type: none — позволяет убрать маркеры списка. Для обоих списков

list-style-type: inherit — значение принимается от родительского элемента. Для обоих списков

Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:

7
8
9
10
11
12
13
14
#nl1 < list-style-type: circle; >#nl2

CSS Design: Укрощение списков

Помню как в июле 1999 года я просвещал людей в мейл-листах о прелестях стилевой вёрстки. С тех пор мало что поменялось.

Впрочем, кое-что поменялось. Поменялся мой взгляд на CSS и на (X)HTML, который выступает в роли каркаса для стилей. Например, я обнаружил, что большинство страниц содержат панель навигации. Чаще всего она оформляются как простая текстовая строка со ссылками, разделенными тегами или . Структурно же они представляют собой списки ссылок, и следовательно должны оформляться как таковые.

Причина, по которой мы не оформляем их как списки, состоит в том, что нам не очень хочется перед каждой ссылкой в меню видеть маркер. Ранее я рассказал о некоторых приемах верстки страниц с помощью CSS. В одном из тех приемов мы научились выводить списки в строку, а не вертикально.

В данной же статье я покажу, как с помощью CSS можно укротить эти неповоротливые и неуклюжие списки. Хватит им беспризорно шататься по вашим веб-страницам. Настало ваше время командовать им, как себя вести.

Готовим арену

В качестве предмета дрессировки я выбрал простые ненумерованные списки. Все упомянутые тут правила CSS можно применить и к нумерованным спискам с тем же результатом. Во всех примерах (кроме специально оговоренных случаев) используется следующий список:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

Каждый список просто помещен внутрь отдельного элемента , и поведение списка определяется с помощью этого DIV-а. Базовое правило, действующее на все DIV-ы, таково:

#base

Без каких-либо дополнительных стилевых правил, список в базовом DIV-е будет выглядеть так:

Позиционирование


    срабатывает не для всех броузеров. Для того, чтобы список полностью передвинулся скажем влево, вам необходимо поменять оба свойства: и margin, и padding. Связано это с тем, что Internet Explorer и Opera создают левый отступ у списка с помощью левого margin, а Mozilla/Netscape используют для этого левый padding.

В следующем примере свойствам margin-left и padding-left у элемента UL присвоено значение 0:

Обратите внимание, что маркеры лежат за границей DIV-а. Если бы контейнером был не DIV, а документа, маркеры оказались бы за пределами окна броузера, т.е. пропали бы с глаз долой. Если вы хотите, чтобы маркеры лежали внутри границ DIV-а, вдоль левого его края, присвойте либо свойству left-padding либо свойству left-margin значение «1em».

Маркеры

Стилевое правило выглядит так:

А броузер покажет список так:

Для тех броузеров, которые не поддерживают вывод графики, добавьте в правила следующую строчку:

list-style-type: disc;
list-style-position: inside;

Все три декларации можно объединить в одно краткое правило:

Список в результате будет выглядеть так:

Либо свойство левый padding, либо свойство левый margin должно иметь значение 0, а другое — значение 1em. Меняя это свойство вы можете подогнать размер отступа от вашего маркера до приемлемого. Отрицательное значение в свойстве text-indent приводит к тому, что первая строка каждого пункта списка сдвигается влево и «надвисает» над остальным текстом.

Следующий наш список будет обычным, только в качестве маркера будет использован стандартный HML-символ, например », который соответствует закрывающей типографской кавычке: «.

Здесь следует отметить, что Netscape6/7/Mozilla (и другие производные Gecko-броузеры), а также Opera умеют генерировать контент с помощью псевдо элемента :before из стандарта CSS2. Воспользуемся этой функцией и сгенерируем автоматически символ » или какой другой символ в качестве маркера. Таким образом нам не надо будет вписывать его вручную в каждый LI элемент. Если вы работает с броузером Opera или с семейством броузеров Gecko, нижеприведенный CSS создаст такой же список, что и предыдущий, при этом в сам список ничего дополнительно добавлять не нужно.

#custom-gen ul li:before

Свойству content может быть присвоена текстовая строка, URL или что-то другое, включая специальные символы. Если вы остановили свой выбор на символе типа », в свойстве надо прописать шестнадцатеричный код этого символа. У правой типографской кавычки это код 0BB (другой символ 020 — это пробел, добавлен из эстетических соображений). Конечный результат представлен ниже (смотрите броузером Opera или Mozilla/Netscape):

Выстраиваем список в ряд

Кто сказал, что списки должны идти вертикально и оформляться слева маркерами? К примеру вам нужен нумерованный список ссылок, но визуально вы хотите, чтобы этот список на странице выглядел как вертикальная панель навигации. Или скажем, вы хотите, чтобы ссылки располагались горизонтально вдоль верхнего края страницы.

Это касается не только списка ссылок. Вам может понадобиться привести список несколько раз внутри абзаца (например, список книг). Структурно — это список, но раньше если бы вы такое сделали, этот список разорвал бы ваш абзац. CSS опять приходит к вам на помощь!

Так как данный список не будет являться на странице чем-то отдельным, я не буду помещать его в базовый DIV, как предыдущие списки. На этот раз разметка будет выглядеть так: абзац, список, следующий абзац.

Уже слышу крики: «Болван! Мы думали ты научишь нас, как помещать списки внутри абзаца, а не между двумя абзацами.»

И на это я отвечу: «Ну да, вы правы. К сожалению (X)HTML не разрешает помещать списки внутрь абзаца. Однако с помощью стилей вы можете сделать вот что».

Сначала, вот стилевые правила:

#inline-list < border: 1px solid #000; margin: 2em; width: 80%; padding: 5px; font-family: Verdana, sans-serif; >#inline-list p < display: inline; >#inline-list ul, #inline-list li

Результат выглядит так (список выделен синим цветом):

Как и в примере выше с маркером мы можем с помощью CSS автоматически генерировать запятые и точки. Если ваши посетители пользуются только броузерами Opera и Gecko, вам не о чем беспокоиться. Стилевые правила будут выглядеть вот так:

#inline-list-gen ul li:after < content: ", "; >#inline-list-gen ul li.last:after

Здесь мы используем псевдо-элемент :after для добавления запятой в конце каждого пункта списка, а точку ставим с помощью класса . Результат будет таким (помните, он работает только в Opera или Mozilla/Netscape):

Навигация

Как я уже сказал в самом начале меню ссылок, которые мы видим на каждом сайте, должны быть оформлены как списки, чем они по сути и являются. Так как мы не хотим видеть этот список так, как его выводит броузер по умолчанию, воспользуемся CSS для внесения косметических изменений. Мы уже знаем, что списки можно специально выводить горизонтально (в одну строчку), а не только вертикально (как они выводятся по умолчанию). С помощью стилей маркеры можно убрать, а в ваших руках появляется широкий набор возможностей, как визуально отделить один пункт списка от другого.

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

#h-contain

Два примера ниже используют все тот же UL только без длинного текста в последнем пункте. Добавлен также дополнительный класс, который позволяет отдельно работать с одним из LI в списке.

Границы

Символ | часто используется для обозначения различных вариантов выбора. Вполне естественно использовать его в меню. Сымитируем этот символ с помощью границ у LI.

#pipe ul < margin-left: 0; padding-left: 0; display: inline; >#pipe ul li < margin-left: 0; padding: 3px 15px; border-left: 1px solid #000; list-style: none; display: inline; >#pipe ul li.first

Мы добавили класс к первому LI, чтобы у него слева не появлялась ненужная граница.

Правила можно изменить, чтобы придать списку вид закладок:

#tabs ul < margin-left: 0; padding-left: 0; display: inline; >#tabs ul li < margin-left: 0; margin-bottom: 0; padding: 2px 15px 5px; border: 1px solid #000; list-style: none; display: inline; >#tabs ul li.here

В данном примере мы добавили класс к одному из LI, благодаря чему нижняя граница этого пункта списка имеет цвет, совпадающий с фоном. Таким образом в меню мы указываем на текущее положение пользователя на сайте.

Примечание: этот прием был предложен Ренделом Растом (Randal Rust), а затем его улучшили подписчики списка рассылки css-discuss

Ссылки-цепочки

Еще один тип ссылок, которые обычно располагаются горизонтально на веб-странице — это известные всем нам ссылки-цепочки (breadcrumb links). Эти ссылки показывают наглядно, где в иерархии сайта вы сейчас находитесь — весь ваш путь от главной страницы до текущего раздела или страницы. Если вы действительно хотите сделать код вашей страницы семантически правильным, этот тип ссылок следует оформить как серию вложенных списков, так как каждый раздел является частью предыдущего раздела:

в результате получаем:

Применив следующие правила:

#bread < color: #ccc; background-color: #006; padding: 3px; margin-bottom: 25px; >#bread ul < margin-left: 0; padding-left: 0; display: inline; border: none; >#bread ul li

получаем вот что:

И опять-таки символ «»» (или любой другой подходящий символ) можно генерировать автоматически с помощью псевдо-элемента :before в сочетании с классом , чтобы первый пункт LI не имел этого символа.

#bread-gen ul li:before < content: "020 020 020 0BB 020"; color: #ff9; >#bread-gen ul li.first:before

Мир реалий

Закончу свою статью реальным примером, в котором использован вышеописанный трюк. Мы возьмем стандартный список UL со ссылками и создадим динамическое меню с эффектами перекатывания. Для создания эффекта перекатывания визуальные стили будут применяться к элементам A, а элементы UL и LI будут служить лишь как структурный каркас.

Это меню — фактически ответ на вопрос, заданный Майклом Эффордом (Michael Efford) в списке рассылки css-discuss. Майкл создал в точности такое же меню с помощью таблиц, графики и JavaScript. Затем он спросил в списке рассылки, можно ли то же самое получить с помощью CSS.

Дайте разберем стилевую таблицу правило за правилом, и я объясню для чего нужно каждое из них.

#button

Первое правило — для DIV-а #button. Оно задает, сколько места будет занимать меню, и создает контекст, чтобы мы могли управлять поведением ссылок и пунктов списка. Я предпочел сделать меню гибким и зависимым от установок броузера, поэтому (почти) все значения заданы в «em»-ах. Включая ширину меню. Черная граница была взята из исходного дизайна Майкла. Большой нижний отступ (padding) у меню сделан для того, чтобы вы могли видеть фон у DIV. Опять таки, это было сделано, чтобы повторить исходный дизайн. Нижнее поле (margin) используется для того, чтобы отделить меню от того, что за ним идет. Все цвета взяты из исходного дизайна.

#button ul < list-style: none; margin: 0; padding: 0; border: none; >#button li

Тут я определил, как должен выглядеть список. Так как все пункты списка у нас являются ссылками, а эффект перекатывания пока имеется только у ссылок, я намеренно удалил все стилистические правила из списков. Я добавил лишь границу шириной в один пиксель, у которой цвет совпадает с цветом фона DIV-а #button. Эта граница служит разделителем между пунктами меню. В исходном дизайне для этого использовалась отдельная картинка.

#button li a < display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; >html>body #button li a < width: auto; >#button li a:hover

Наконец, я дошел до ссылок. В исходном дизайне слева и справа были границы по 10 пикселей каждый. Эти границы меняли свой цвет вместе с фоном при наведении мышки. Это поведение довольно просто получить с помощью псевдо-класса :hover, поэтому эффект изменения цвета границ и фона применен к элементам .

Здесь воспользовался одним трюком: чтобы поведение ссылок распространялось на весь блок (по ширине и высоте), я присвоил им правило display: block;. Это сработало во всех броузерах, кроме IE для Windows. Если вы явно укажите ширину в 100%, IE для Windows все поймет. Но при этом вы получаете проблемы в броузерах IE5 для Mac и Netscape/Mozilla. Поэтому я схитрил: с помощью дочернего селектора «>» я присвоил ширине значение «auto». Так как броузер IE для Windows не понимает дочерних селекторов, он игнорирует это правило. IE5 для Mac, Opera и Netscape/Mozilla понимают это правило, и все остались довольными.

Правило для псевдо-класса :hover меняет цвет фона и границ при наведении мышки на ссылку.

Все стилевые правила и список (1 кб кода) заменили примерно 5кб JavaScript-ов и вложенных таблиц, не говоря уже о примерно 8кб графических файлов, использовавшихся для создания эффекта перекатывания. Кроме того разметка стала более читаемой, ее легче обновлять, так как вам не нужно создавать новые картинки, если поменяется название какого-либо меню. Достаточно лишь поменять текст. Окончательный вариант меню вы можете посмотреть на сайте Asset Surveillance.

Вершина айсберга

Хотите верьте, хотите — нет, но мы лишь слегка затронули тему списков и того, что с ними можно вытворять с помощью CSS. Я не утверждаю, что все приемы, изложенные тут, являются верхом совершенства, но я очень надеюсь что данная статья изменит ваше отношение к CSS и привлечет ваше внимание к идее структурной верстки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *