![Маркер списка css. Маркированные списки](https://i1.wp.com/bloggood.ru/wp-content/uploads/2013/04/marker-spisok-2.png)
Маркер списка css. Маркированные списки
Допустим у нас имеется нумерованный список OL (.our-list) такого вида:
- Пункт 1
- Пункт 2
- Пункт 3
А нам необходимо, чтобы номера строк были без точек. Тогда нам необходимо прописать в css-коде следующие правила:
.our-list { counter-reset : item; //item - переменная, которая будет содержать значение счетчика list-style-type : none ; // убираем нумерование списка width : 150px ; //необходимо задать ширину, чтобы отталкиваться от этого значения } .our-list li: before { content : counter(item) " "; //заново вставляем счетчик пунктов уже другим способом и без точки counter-increment : item; //увеличиваем значение счетчика color : #ff0000 ; //можем задать другой цвет цифрам } |
Our-list { counter-reset: item; //item - переменная, которая будет содержать значение счетчика list-style-type: none; // убираем нумерование списка width: 150px; //необходимо задать ширину, чтобы отталкиваться от этого значения } .our-list li:before { content: counter(item) ""; //заново вставляем счетчик пунктов уже другим способом и без точки counter-increment: item; //увеличиваем значение счетчика color: #ff0000; //можем задать другой цвет цифрам }
В результате мы можем наблюдать следующее:
- Пункт 1
- Пункт 2
- Пункт 3
Казалось бы, проблема решена. Но пока это хорошо работает только для однострочных пунктов. Если мы добавим строк к каждому пункту списка, то увидим, что пока еще все не так хорошо… Вот что получится:
- Пункт 1
Строка 2
Строка 3 - Пункт 2
Строка 2
Строка 3 - Пункт 3
Строка 2
Строка 3
Я думаю, это не совсем то, что требуется. Получается, что в данном случае номер принадлежит первой строке пункта списка. Чтобы решить этот вопрос окончательно, стоит добавить еще 3 строки в css-код
Our-list { counter-reset: item; list-style-type: none; width: 150px; } .our-list li:before { content: counter(item) ""; counter-increment: item; color: #ff0000; float:right; //делаем обтекание справа position:relative; //и перемещаем цифры влево, чтобы они встали перед списком left:-165px; }
CSS дает возможность создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначения маркированного списка.
CSS стили списка маркера.
list-style-type
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ;
Значение :
disk – маркированный список в виде закрашенного кружка
circle – маркированный список в виде не закрашенного кружка
square – маркированный список в виде закрашенного квадратика
decimal – нумерованный список арабскими числами (1,2,3 и т.д.)
upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)
lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)
upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)
lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)
none – без маркера.
Пример :
- Верь в лучшее, ожидай худшее.
- Жизнь - это болезнь, со смертельным исходом.
- Никогда не говори никогда.
Результат :
Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите
list-style-type: none;
Пример :
- Верь в лучшее, ожидай худшее.
- Никогда не говори никогда.
Результат :
Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image .
list-style-image
list-style-image: url(картинка.png);
Пример :
- Верь в лучшее, ожидай худшее.
- Жизнь - это болезнь со смертельным исходом.
- Никогда не говори никогда.
Результат :
Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.
Пример :
- Верь в лучшее, ожидай худшее.
- Жизнь - это болезнь со смертельным исходом.
- Никогда не говори никогда.
Результат :
Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
Это выглядит вот так:
Пример :
- Верь в лучшее, ожидай худшее.
- Жизнь - это болезнь со смертельным исходом.
- Никогда не говори никогда.
Результат :
Дополнение к общей теме.
Если вам нужно, по каким-либо причинам, задать нумерацию списка маркера не с нуля, а, допустим, с 8, вы можете сделать такой ход.
Пример :
- Верь в лучшее, ожидай худшее.Пункт 1
- Жизнь - это болезнь со смертельным исходом.Пункт 2
- Никогда не говори никогда.Пункт 3
- Это все что я знал. Пункт 4
Результат :
Вот и подошла к завершению тема .
Приветствую вас на своем блоге. Сегодня я хотел бы затронуть тему, как через css у маркированных пунктов списка (ul li) убрать маркеры, потому что они зачастую не нужны и только мешают оформлять сайт.
Убираем маркеры по умолчанию
Иногда нужно просто убрать их. Например, при оформлении меню или чего-то другого. За отображение маркеров отвечает свойство list-style-type или сокращенное list-style . Значением по умолчанию выступает circle , то есть черный закрашенный кружочек. Чтобы убрать его, всего лишь нужно написать так:
Ul{ List-style-type: none; }
Ul{ List-style: none; }
Заметьте, что свойство записывается всему списку в общем, а не отдельным его пунктам. Это очень важно. Вышеприведенная запись убирает маркеры у всех списков на вашем сайте, но может быть так, что у вас будет несколько оформлений списков.
В таком случае справиться с их стилизацией помогут классы. Нужным спискам просто вешаете стилевой класс и оформляете их.
Как поставить свою картинку маркера
Css позволяет создать свой, гораздо более привлекательный маркер. Его можно задать также с помощью свойства list-style-image , либо упрощенно с помощью list-style . В значении в скобках прописывается путь к файлу, а перед ним нужно поставить ключевое слово url .
Ul{ List-style: url(marker.png); }
Маркированные списки позволяют разбить большой текст на отдельные блоки, каждый из которых начинается с маркера - обычно в его качестве выступает небольшая точка. Это привлекает внимание читателя к тексту и повышает его читабельность.
С элементом
-
связаны следующие особенности:
- в том месте, где встречается
-
, браузер автоматически добавляет перенос строки;
- у списка имеются отступы сверху и снизу;
- маркеры по умолчанию отображаются в виде закрашенного кружка;
- каждый элемент списка сдвигается вправо по отношению к основному тексту.
- disc - маркеры в виде закрашенного кружка;
- circle - маркеры в виде незакрашенного кружка;
- square - квадратные маркеры.
- Сепульки
- Сепулькарии
- Сепуление
- не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style со значением none и в тексте перед содержимым
-
добавляем свой собственный символ с помощью псевдоэлемента ::before
. В примере 2 в качестве такого маркера выступает треугольник.
Пример 2. Использование::before
Списки - Сепульки
- Сепулькарии
- Сепуление
Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача - переместить текст левее на один символ.
Рис. 2. Произвольные маркеры в списке
Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).
Рис. 3. Выбор символа в LibreOffice
Список с рисованными маркерами
Стили позволяют установить в качестве маркера любое подходящее изображение через свойство list-style-image . В качестве значения используется относительный или абсолютный путь к графическому файлу, как показано в примере 3.
Пример 3. Использование изображения в качестве маркера
Списки - Сепульки
- Сепулькарии
- Сепуление
Рисунок лучше всего выбирать небольшого размера, чтобы не превращать элементы списка в подрисуночные подписи. На рис. 4 показан результат действия примера по использованию в качестве маркеров небольших картинок.
Рис. 4. Рисунок в качестве маркера
Применение list-style-image обладает некоторыми недостатками:
- рисунок нельзя сдвинуть вверх или вниз;
- в разных браузерах положение рисунка относительно текста может отличаться.
Этих недочётов можно избежать с помощью свойства background , оно устанавливает фоновое изображение. Для каждого элемента списка
-
мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left
(пример 4).
Пример 4. Использование background
Ul { margin-left: -1em; } li { list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; }
Положение текста и маркера
Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).
inside outside Рис. 5. Размещение маркеров относительно текста
Чтобы управлять положением маркеров, применяется свойство list-style-position . Оно имеет два значения: outside - маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside - маркеры являются частью текстового блока и отображаются в элементе списка (пример 5).
Пример 5. Изменение положения маркеров
Списки - Перед началом работы проверьте наличие оборудования, входящего в комплект 3BM.
- При отсутствии одного или нескольких периферийных устройств следует сразу же обратиться к техническому персоналу ВЦ.
- После осмотра визуальными методами своего рабочего места можно осторожно включить питание 3BM.
Результат данного примера показан на рис. 6.
CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.
С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка , добавить изображение для маркера , а также изменить местоположение маркера . Высоту блока маркера можно задать свойством line-height .
Оформление списков с помощью CSS-стилей
1. Тип маркера списка list-style-type
Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.
list-style-type Значения: disc Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок. armenian Традиционная армянская нумерация. circle В качестве маркера выступает незакрашенный кружок. cjk-ideographic Идеографическая нумерация. decimal 1, 2, 3, 4, 5, … decimal-leading-zero 01, 02, 03, 04, 05, … georgian Традиционная грузинская нумерация. hebrew Традиционная еврейская нумерация. hiragana Японская нумерация: a, i, u, e, o, … hiragana-iroha Японская нумерация: i, ro, ha, ni, ho, … katakana Японская нумерация: A, I, U, E, O, … katakana-iroha Японская нумерация: I, RO, HA, NI, HO, … lower-alpha a, b, c, d, e, … lower-greek Строчные символы греческого алфавита. lower-latin a, b, c, d, e, … lower-roman i, ii, iii, iv, v, … none Маркер отсутствует. square В качестве маркера выступает закрашенный или незакрашенный квадрат. upper-alpha A, B, C, D, E, … upper-latin A, B, C, D, E, … upper-roman I, II, III, IV, V, … initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. Синтаксис
Ul {list-style-type: none;} ul {list-style-type: square;} ol {list-style-type: none;} ol {list-style-type: lower-alpha;}
Рис. 1. Пример оформления маркированного и нумерованного списков
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.
Синтаксис
Ul {list-style-image: url("images/romb.png");} ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.
На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.
Рис. 1. Вид маркированного списка
Вид маркера
Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:
Пример 1. Изменение вида маркера
В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к