Как сделать красивый стиль списка css. Оформление списков: группа свойств list-style в CSS. Изображения для элементов списка list-style-image

Ul li{ border: 2px solid #ff0000; }

Теперь, если вы посмотрите, то Ваш маркер-картинка находится за пределами элемента списка, той самой рамки, что мы создали выше. Поэтому бывают моменты, когда нужно чтобы маркер находился внутри элемента списка. Для этого и существует свойство list-style-position , в которое изначально установлено значение outside , то есть устанавливать маркеры за пределами элемента.

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

Ul{ list-style-image: url(../images/Название картинки маркера.jpg); list-style-position:inside; } ul li{ border: 2px solid #ff0000; }

Вот таким образом работают три этих свойства. Существует и сокращенный вариант записи, который объединяет все эти свойства.

То есть, указывается свойство list-style и затем, по порядку, значения типа маркера, позиции маркера и, если нужно путь к картинке, которая и будет маркером. И, картина у нас получится следующая:

Ul{ list-style: inside url(../images/Название картинки маркера.jpg); }

Вот таким образом записывается краткий вариант правил, относящихся к внешнему виду списков. Данная запись говорит, что маркер должен находится внутри элемента, а маркером, будет является, та самая картинка

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

CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.

С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка , добавить изображение для маркера , а также изменить местоположение маркера . Высоту блока маркера можно задать свойством line-height .

Оформление списков с помощью CSS-стилей

1. Тип маркера списка list-style-type

Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.

Синтаксис

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

Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.

Свойство list-style-type устанавливает вид маркера. Вот таблица допустимых значений для этого свойства:

В таблице я указал два весьма необычных свойства: georgian и cjk-ideographic . Эти свойства используются регионально. Есть ещё несколько похожих любопытных значений этого свойства, например armenian или hiragana , но все их перечислять нет смысла.

Теперь пример использования этого свойства:

1. Первый пункт.
2. Второй пункт.
3. Третий пункт.

Обратите внимание, мы превратили нумерованный список

в маркированный.

Рисунок 1. Свойство list-style-type.

Обязательно обратите внимание на значение none , это значение убирает маркеры вообще. Это свойство часто используется для форматирования списков при помощи CSS.

Свойство list-style-type достаточно простое, как и остальные свойства по работе со списками.

Свойство list-style-image устанавливает символом маркера графический файл.

• Первый пункт.
• Второй пункт.
• Третий пункт.

Вот что мы видим:

Рисунок 3. Форматируем блок
.

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

• , обрамлённого красной границей. Это может привести к неожиданным результатам, вот например обнулим внутренние отступы
  .
  • Первый пункт.
  • Второй пункт.
  • Третий пункт.

  Вот что мы получим:

  Рисунок 4. Форматируем блок
  .

  Теперь маркеры списка вышли за пределы контейнера

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

  Лучше бы поместить их внутрь контейнера

  • . Это бы решило данную проблему. Вот для этого и существует свойство list-style-position .

    Свойство list-style-position устанавливает положение маркера относительно блока

  • . Это свойство имеет два значения:

    По умолчания используется значение outside .

    Применим это свойство к нашему примеру и поместим маркеры в блок

  • , установив этому свойству значение inside .
    • Первый пункт.
    • Второй пункт.
    • Третий пункт.

    Вот что мы получили:

    Рисунок 5. Свойство list-style-position.

    Теперь маркеры списка вложены в блок

  • .

    Свойство list-style

    Свойство list-style является сокращённой формой, позволяющей использовать значения всех трёх предыдущих свойств.

    Пример: сделаем картинку маркером и поместим маркер внутрь блока пункта списка.

    • Первый пункт.
    • Второй пункт.
    • Третий пункт.

    Вот результат:

    Рисунок 6. Свойство list-style.

    Мы в одном свойстве list-style указали два значения: положение маркера и путь графичекого файла маркера.

    Свойство list-style используют чаще всего, даже для задания одного значения. Оно короткое, его легко написать.

    Рецепты CSS по теме

    • Как сделать ниспадающее меню на CSS , сложный пример с тенями.

    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

  Результат :

  

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