› › Ul без точек. Стандартные маркеры для маркированного списка. Маркер в виде изображения

Ul без точек. Стандартные маркеры для маркированного списка. Маркер в виде изображения

Допустим у нас имеется нумерованный список OL (.our-list) такого вида:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 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. Пункт 1
  2. Пункт 2
  3. Пункт 3

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

  1. Пункт 1
    Строка 2
    Строка 3
  2. Пункт 2
    Строка 2
    Строка 3
  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 у маркированных пунктов списка (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); }

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

  • Верь в лучшее, ожидай худшее.
  • Жизнь - это болезнь, со смертельным исходом.
  • Никогда не говори никогда.

Результат :

Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите

list-style-type: none;

Пример :

Свойства списков в css

  • Верь в лучшее, ожидай худшее.
  • Никогда не говори никогда.

Результат :

Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image .

list-style-image

list-style-image: url(картинка.png);

Пример :

Свойства списков в css

  • Верь в лучшее, ожидай худшее.
  • Жизнь - это болезнь со смертельным исходом.
  • Никогда не говори никогда.

Результат :

Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.

Пример :

Свойства списков в css

  • Верь в лучшее, ожидай худшее.
  • Жизнь - это болезнь со смертельным исходом.
  • Никогда не говори никогда.

Результат :

Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
Это выглядит вот так:

  • текст

    • Пример :

    Свойства списков в css

    • Верь в лучшее, ожидай худшее.
    • Жизнь - это болезнь со смертельным исходом.
    • Никогда не говори никогда.

    Результат :

    Дополнение к общей теме.
    Если вам нужно, по каким-либо причинам, задать нумерацию списка маркера не с нуля, а, допустим, с 8, вы можете сделать такой ход.

    Пример :

    Свойства списков в css

    • Верь в лучшее, ожидай худшее.Пункт 1
    • Жизнь - это болезнь со смертельным исходом.Пункт 2
    • Никогда не говори никогда.Пункт 3
    • Это все что я знал. Пункт 4

    Результат :

    Вот и подошла к завершению тема .

    Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать маркер списка 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 - значение принимается от родительского элемента. Для обоих списков

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

    Стиль:

    1
    2
    3
    4
    5
    6

    		 Страница