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

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

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

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

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

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



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



Маркеры

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

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

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

  ul { list-style-image: url(bullet.gif); }

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

  

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

  list-style-type: disc;

  Изображения, выбранное вами в качестве маркера, может «выползти» за границы списка. Чтобы этого не произошло, поместите изображение внутрь блока

• . Для этого добавьте следующую строку:

  list-style-position: inside;

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

  ul { list-style: disc url(bullet.gif) inside; }

  что эквивалентно

  ul { list-style-type: disc; list-style-image: url(bullet.gif); list-style-position: inside; }

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

  

  Бывает так, что у вас есть список, но вам не нужны маркеры, или вы хотите использовать в качестве маркера какой-то другой символ. Опять-таки CSS спешит к вам на помощь. Добавьте правило list-style: none; и сделайте элементы

• «надвисающими». Всё правило целиком будет выглядеть так:

  ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; }

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

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

  

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

  #custom-gen ul li:before { content: "0BB 020"; }

  Свойству 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 { display: inline; margin: 0; padding: 0; color: #339; font-weight: bold; }

  Весь код помещен в

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

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

  

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

  #inline-list-gen ul li:after { content: ", "; } #inline-list-gen ul li.last:after { content: ". "; }

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

  

  Навигация

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

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

  Два примера ниже используют все тот же 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 { margin-left: 0; border-left: none; list-style: none; display: inline; }

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

  #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 { border-bottom: 1px solid #ffc; list-style: none; display: inline; }

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

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

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

  • Home
    • » Products
      • » Computers
        • » Software

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

  

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

  #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 { margin-left: 0; padding-left: 2px; border: none; list-style: none; display: inline; }

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

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

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

  Конечный результат:

  Мир реалий

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

  

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

  • Home
  • Hidden Cameras
  • CCTV Cameras
  • Employee Theft
  • Helpful Hints
  • F.A.Q
  • About Us
  • Contact Us

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

  #button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #90bade; color: #333; }

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

  #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; }

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

  Синтаксис

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

  Обозначения

  	Описание	Пример
  <тип>	Указывает тип значения.	<размер>
  A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
  A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
  A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
  	Группирует значения.	[ crop || cross ]
  *	Повторять ноль или больше раз.	[,<время>]*
  +	Повторять один или больше раз.	<число>+
  ?	Указанный тип, слово или группа не является обязательным.	inset?
  {A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
  #	Повторять один или больше раз через запятую.	<время>#

  ×

  Значения

  Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

  Маркированный список

  circle Маркер в виде кружка. disc Маркер в виде точки. square Маркер в виде квадрата.

  Нумерованный список

  armenian Традиционная армянская нумерация. decimal Арабские числа (1, 2, 3, 4,...). decimal-leading-zero
  Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...). georgian Традиционная грузинская нумерация. lower-alpha Строчные латинские буквы (a, b, c, d,...). lower-greek Строчные греческие буквы (α, β, γ, δ,...). lower-latin Это значение аналогично lower-alpha . lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v,...). upper-alpha Заглавные латинские буквы (A, B, C, D,...). upper-latin Это значение аналогично upper-alpha . upper-roman Римские числа в верхнем регистре (I, II, III, IV, V,...). none Отменяет маркеры для списка.

  Песочница

  1. Четыре

  ul { list-style-type: decimal ; }

  Пример

  1. Gaius Octavius Thurinus
  2. Tiberius Claudius Nero
  3. Gaius Iulius Caesar Augustus Germanicus
  4. Tiberius Claudius Drusus
  5. Lucius Arruntius Camillus Scribonianus
  6. Nero Claudius Caesar Drusus Germanicus
  7. Lucius Clodius Macer

  Результат данного примера показан на рис. 1.

  Рис. 1. Применение свойства list-style-type

  Объектная модель

  Объект .style.listStyleType

  Примечание

  В браузере Internet Explorer 6 при использовании нумерованного списка

  и значения inside свойства list-style-position , числа идущие с 10, начинают накладываться на текст списка.

  Браузер Internet Explorer до версии 7 включительно не поддерживает значения armenian , decimal-leading-zero , georgian , lower-greek , lower-latin , upper-latin . Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов (ul { float: left; } ).

  Internet Explorer 8 дополнительно понимает значение upper-greek , которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ,...).

  Спецификация

  Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации ) - первая черновая версия стандарта.
  ×

  Браузеры

  none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman	4	12	1	7	1	1
  lower-latin, upper-latin, lower-greek, armenian, georgian	8	12	1	6	1	1
  decimal-leading-zero	8	12	1	8	1	1

  Списки - важный элемент веб-страницы. Они помогают структурировать информацию и преподносить ее в удобном для пользователя виде. Кроме того, в виде списков часто оформляются меню и навигационные панели. Управлять положением и внешним видом маркирующего элемента позволяет группа свойств

  Виды списков

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

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

  В зависимости от степени вложенности различают одноуровневые и Каждый уровень часто имеет собственный маркирующий элемент.

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

  Отображение в CSS

  Каждый пункт является блочным контейнером с особым типом отображения display: list-item. По умолчанию это значение устанавливается для элементов li, расположенных внутри контейнеров ul и ol, и обеспечивает отображение маркера перед блоком.

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

  P { display: list-item; list-style-type: decimal; }

  Все три перечисленные ниже свойства наследуются дочерними элементами, имеющими display: list-item, и в случае необходимости требуют явного переопределения.

  Положение маркера списка

  Первое свойство группы - list-style-position. Оно определяет, остается ли маркер в блоке текста или выносится за его пределы.

  Свойство принимает одно из двух значений:

  • inside,
  • outside.

  Разница между ними особенно хорошо заметна на многострочных пунктах.

  List1 { list-style-position: outside; } .list2 { list-style-position: inside; }

  По умолчанию установлено значение outside, и маркер списка выносится за границу блока.

  Внешний вид маркера

  Второе свойство - list-style-type - управляет типом маркирующего элемента и может принимать больше пятнадцати значений.

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

  

  Маркеры неупорядоченных списков:

  • disc - обычная точка, закрашенная цветом текста;
  • circle - незаполненный кружок с обводкой в цвет текста;
  • square - закрашенный квадрат.

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

  Значение свойства list-style-type	Описание
  decimal	стандартная арабская нумерация, с единицы и далее: 1, 2, ..., 10, ...
  decimal-leading-zero	использует арабские цифры, значения состоящие из одного символа дополняет незначащим нулем слева: 01, 02, ... , 10, ...
  	латинского алфавита: a, b, ... , e, ...
  	заглавные алфавита: A, B, ... , E, ...
  lower-greek	греческий алфавит, строчные символы
  lower-roman	римские цифры, обозначенные строчными символами: i, ii, ... , vi, ...
  upper-roman	римские цифры, обозначенные заглавными символами: I, II, ... , VI, ...
  armenian	армянский стиль нумерации
  georgian	грузинский стиль нумерации
  hebrew	еврейский стиль нумерации
  	различные японские стили нумерации, строчные символы
  	различные японские стили нумерации, заглавные символы
  cjk-ideographic	восточная идеографическая нумерация

  Некоторые значения дублируют друг друга, например lower-alpha и lower-latin, а другие не поддерживаются рядом браузеров и шрифтов.

  При необходимости маркеры упорядоченного типа могут быть применены к неупорядоченным спискам ul и наоборот.

  

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

  List { list-style-type: none; }

  Пользовательский маркер

  Вместо определенных CSS видов маркирующих элементов можно использовать любое изображение. Для этого необходимо передать ссылку на него свойству list-style-image.

  Можно использовать даже изображения в формате gif - анимация будет сохранена. Важно помнить, что отображает изображение в натуральную величину.

  List { list-style-image: url(image.jpg); line-height: 25px; }

  Например:

  

  Помимо файлов изображений, можно использовать CSS-функции радиальных или линейных градиентов:

  List { list-style-image: radial-gradient(lightblue, aqua, blue); }

  Форма маркера при этом остается квадратной.

  Объединенный синтаксис

  Все свойства, определяющие отображение маркера списка, могут быть объединены в одном - CSS list-style.

  List-style: list-style-type list-style-position list-style-image

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

  List1 { list-style: none; } .list2 { list-style: upper-roman inside; } .list3 { list-style: inside url(/images/img1.png); }

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

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

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

  Значение	Пример
  disc	Пункт списка
  circle	Пункт списка
  square	Пункт списка
  decimal	Пункт списка
  decimal-leading-zero	Пункт списка
  lower-roman	Пункт списка
  upper-roman	Пункт списка
  lower-alpha	Пункт списка
  upper-alpha	Пункт списка
  georgian	Пункт списка Пункт списка Пункт списка
  cjk-ideographic	Пункт списка Пункт списка Пункт списка
  none	Пункт списка

  В таблице я указал два весьма необычных свойства: 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 , сложный пример с тенями.