Маркировка списка css. Правила CSS для настройки внешнего вида списка на html странице. Свойство list style (type, image, position)

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); }

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

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

Свойство 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.

    Вообще списки среди блочных элементов стоят особняком. Это связано с тем, что они включают в себя маркеры и нумерацию, которые расставляет сам браузер.

    Свойство List style — оформление списка на html странице

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

    Все эти свойства допустимо использовать как для html элементов li, так и для элементов ul и ol. Единственное отличие, если правила прописать для конкретного значения списка li, то оно только для него и применится. А если эти же css правила прописать для контейнеров ul или ul, то они применятся для всех элементов li заключенных в этих контейнерах.

    Начнем с атрибута list-style-type , который задает вид маркеров или нумерации у пунктов списка:

    list-style-type: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|armenian|georgian|none|inherit

    Как видно, свойство list-style-type имеет много доступных значений, которые могут задавать как вид маркера, так и различные виды нумерации.

    • disc - маркер в виде черного кружка (значение по умолчанию для маркированных списков).
    • circle - маркер в виде не закрашенного кружка.
    • square - маркер в виде квадратика. Он может быть светлым или темным, в зависимости от браузера.
    • decimal - нумерация арабскими цифрами (значение по умолчанию для нумерованных списков).
    • decimal-leading-zero - нумерация арабскими цифрами от 01 до 99 с начальным нулем.
    • lower-roman - нумерация маленькими римскими цифрами.
    • upper-roman - нумерация большими римскими цифрами.
    • lower-greek - нумерация маленькими греческими буквами.
    • lower-alpha и lower-latin - нумерация маленькими латинскими буквами.
    • upper-alpha и upper-latin - нумерация большими латинскими буквами.
    • armenian - нумерация традиционными армянскими цифрами.
    • georgian - нумерация традиционными грузинскими цифрами.
    • none - маркерация и нумерация осуществляться вообще не будет.

    Так примерно будут выглядеть элементы списка в браузере с различными значениями list-style-type:

    При использовании CSS стилей не важно какой элемент (OL или UL) используется для создания списка. OL и UL отличаются только поведением по умолчанию и с помощью свойства list-style-type вы можете легко превратить один вид списка в другой.

    Атрибут стиля list-style-image позволяет задавать в качестве маркера пунктов списка графическое изображение . При использовании атрибута list-style-image значение атрибута list-style-type игнорируется:

    list-style-image: none|<интернет-адрес файла изображения>|inherit

    Значение none убирает маркер изображение и устанавливает обычный, не графический. Это поведение по умолчанию.

    При указании адреса файла изображения, на место маркера будет вставлена картинка. Как и при использовании , в качестве адреса картинки можно использовать как абсолютные так и относительные адреса. В случае если браузер не сможет подгрузить изображение, то будет использоваться маркер или нумерация по умолчанию или то, что прописано в свойстве в list-style-type.

    Пример списка с картинкой в качестве маркера:

    
    
    • первый пункт списка;
    
    
    • второй пункт списка;
    
    
    • третий пункт списка.
    
    

    А вот как это выглядит:

    • первый пункт списка;
    • второй пункт списка;
    • третий пункт списка.

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

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

    list-style-position: inside|outside

    В случае значения inside маркер или нумерация помещается как бы внутри списка, а в случае outside за пределами элементов li. По умолчанию используется значение outside и маркер выносится за пределы.

    Пример списка с различными значениями list-style-position:

    • в первом пункте все по умолчанию;
    • во втором пункте list-style-position установлен в inside. В этом случае, обратите внимание, вторая строка размещается на одном уровне с маркером;
    • в этом пункте list-style-position равен outside.

    Сборное CSS правило list-style

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

    Разделять значения в сборном правиле list-style следует пробелами:

    list-style: list-style-type list-style-image list-style-position;

    Реальное CSS правило для оформления списков может выглядеть примерно вот так:

    list-style: circle url (http://сайт/images/marker.png) outside;

    Таким образом свойство list-style позволяет значительно сократить объем кода, ведь вместо трех правил достаточно задать лишь одно.

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

    list-style: none;

    Тоже самое можно сделать используя свойство list-style-type:

    list-style-type: none;

    На этом рассказ об оформлении html списков при помощи каскадных таблиц стилей я закончу. Чтобы узнать о других CSS свойствах вы можете почитать статьи из раздела « » и не забудьте подписаться на обновления блога . До новых встреч!

    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

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

    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

  Результат :

  

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