CSS-свойство List


Оглавление (нажмите, чтобы открыть):

Списки CSS

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

Свойство list-style-type

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

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

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

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

Свойство list-style-image

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

Вот результат работы этого кода:

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

Мы видим, что теперь маркеры списка отмечены графическим файлом http://komotoz.ru/_images/bullet_li.gif.

Свойство list-style-position

Перед тем, как приступить к изучению этого свойства, более детально изучим модель форматирования элемента

    .

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

» title=»Форматируем блок

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

      .

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

      .

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

    » title=»Форматируем блок

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

        .

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

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

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

      Свойство list-style-position устанавливает положение маркера относительно блока
      . Это свойство имеет два значения:

      Свойство list-style-position

      Значение Действие
      list-style-position: inside Маркер внутри блока
    • .
    • list-style-position: outside Маркер снаружи блока
    • (по умолчанию).
    • По умолчания используется значение outside .

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

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

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

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

      Свойство list-style

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

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

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

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

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

      Подробно о свойстве list-style

      За добавление маркера, его расположение и внешний вид в css отвечают свойства:

      • list-style-image (я не использую это свойство — ниже обьясню, почему);
      • list-style-type;
      • list-style-position.

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

      Свойство list-style-type

      Имеет следующие допустимые значения:

      disc — маркер пункта в списке будет отображаться в виде жирной точки;

      • Пример использования свойства list-style-type с параметром disc

      circle — маркер пункта в списке будет отображаться в виде круга;

      • Пример использования свойства list-style-type с параметром circle

      square — маркер пункта в списке будет отображаться в виде черного квадратика;

      • Пример использования свойства list-style-type с параметром square

      decimal — маркер пункта в списке будет отображаться в виде арабских цифр начиная с 1;

      • Пример использования свойства list-style-type с параметром decimal — первый пункт списка
      • Пример использования свойства list-style-type с параметром decimal — второй пункт списка

      decimal-leading-zero — маркер пункта в списке будет отображаться в виде арабских цифр начиная с 01, 02. 98,99 (не поддерживается в ИЕ 7);

      • Пример использования свойства list-style-type с параметром decimal-leading-zero — первый пункт
      • Пример использования свойства list-style-type с параметром decimal-leading-zero — второй пункт

      lower-roman — маркер пункта в списке будет отображаться в виде прописных букв римского алфавита (i, ii, iii, iv, v);

      • Пример использования свойства list-style-type с параметром lower-roman — первый пункт
      • Пример использования свойства list-style-type с параметром lower-roman — второй пункт
      • Пример использования свойства list-style-type с параметром lower-roman — третий пункт
      • Пример использования свойства list-style-type с параметром lower-roman — четвертый пункт

      upper-roman — маркер пункта в списке будет отображаться в виде римских цифр (I, II, III, IV, V);

      • Пример использования свойства list-style-type с параметром upper-roman — первый пункт
      • Пример использования свойства list-style-type с параметром upper-roman — второй пункт
      • Пример использования свойства list-style-type с параметром upper-roman — третий пункт
      • Пример использования свойства list-style-type с параметром upper-roman — четвертый пункт

      lower-greek — маркер пункта в списке будет отображаться в виде прописных букв греческого алфавита (не поддерживается в ИЕ 7);

      • Пример использования свойства list-style-type с параметром lower-greek
      • Пример использования свойства list-style-type с параметром lower-greek

      lower-latin — маркер пункта в списке будет отображаться в виде прописных букв латинского алфавита (a, b, c) (не поддерживается в ИЕ 7);

      • Пример использования свойства list-style-type с параметром lower-latin
      • Пример использования свойства list-style-type с параметром lower-latin

      upper-latin — маркер пункта в списке будет отображаться в виде заглавных букв латинского алфавита (A, B, C) (не поддерживается в ИЕ 7);

      • Пример использования свойства list-style-type с параметром upper-latin
      • Пример использования свойства list-style-type с параметром upper-latin

      none — маркер пункта в списке не будет отображаться.

      • Пример использования свойства list-style-type с параметром none

      Свойство наследуется и по умолчанию имеет значение disc.

      Свойство list-style-position

      Отвечает за расположение маркера в списке. Имеет два допустимых значения:

      inside — маркер будет находиться внутри блока с элементом списка, к которому он относится;

      • Пример использования свойства list-style-position с параметром inside — маркер расположен внутри блока с элементом списка, к которому он относится.

      outside — маркер будет находиться снаружи блока с элементом списка, к которому он относится.

      • Пример использования свойства list-style-position с параметром outside — маркер расположен снаружи блока с элементом списка, к которому он относится.

      Свойство list-style-image

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

      • Пример использования свойства list-style-image — маркер списка выводится в виде картинки.

      Из-за возникающих сложностей с позиционированием изображения используется не часто. Лично я предпочитаю использовать свойство background-image, если требуется маркер-картинка.

      Свойство list-style

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

      Следующая запись отобразит маркер в виде черной жирной точки снаружи блока с элементом списка:

      • Пример использования свойства list-style с параметрами disc и outside — маркер расположен снаружи блока с элементом списка, к которому он относится.

      Запись такого вида отобразит маркер в виде окружности внутри блока с элементом списка:

      list-style

      Поддержка браузерами

      12.0+ 4.0+ 1.0+ 1.0+ 7.0+ 1.0+

      Описание

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

      Свойства, значения которых могут быть использованы для редактирования маркера элемента списка: list-style-image, list-style-position и list-style-type. Значения разделяются пробелом и могут быть записаны в любом порядке.


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

      Оформление списков: группа свойств list-style в CSS

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

      Виды списков

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

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

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

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

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

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

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

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

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

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

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

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

      По умолчанию установлено значение 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, которое скрывает маркеры у списка любого типа. Оно особенно полезно при создании навигационных панелей, когда требуется сохранить семантику списка, но маркирующие элементы не вписываются в дизайн. Также свойство часто используется для пользовательской стилизации.

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

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

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

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

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

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

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

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

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

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

      CSS: свойства list-style

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

      Люблю рыбалку, жаль только не так часто могу себе позволить выехать на нее. Раньше, когда жил на Севере, приходилось ловить хариуса. На Юге основная добыча окунь, судак, карп, как здесь говорят, карабас. Купил себе новые воблеры, но когда выберусь на речку или мору, не знаю – и у самого работы много и с друзьями никак не договорюсь. Так что я сейчас рыбачу в интернете, занимаясь манимейкерством.

      Одно из главных условий хорошего заработка является красивое оформление сайтов. Если при использовании смс вроде wordpress знание основ программирования не очень нужно, то при создании одностраничников (и правки смс) оно необходимо. Оформление сейчас в основном задается с помощью языка css.

      В этой статье речь пойдет о свойствах тега list-style.

      Свойство list-style позволяет одновременно задавать три параметра маркеров списка, а именно:

      list-style-image — графическое изображение, отображаемое в качестве маркера позиции списка.

      list-style-type — символ, цифра или буква, которые будут являться маркером.

      list-style-position — позицию маркера.

      Способ применения:

      list- style: [list-style-image] [list-style-type] [list-style-position]

      Значение этих атрибутов можно располагать в любом порядке.

      Пример:

      Примеры практического использования свойства list-style для изменения вида списка

      Вид элементов Код
      • пример
      • пример
        задан маркер в виде сплошного квадрата
      1. пример
      2. пример
        задан нумерованный маркер с отступом
      • пример
      • пример
        рисунок отсутствует на сервере
      • пример
      • пример
        рисунок присутствует на сервере

      Примеры использования свойства list-style

      Используются значения соответствующих свойств: list-style-image, list-style-type и list-style-position:

      Возможные значения list-style-image:

      url — адрес файла изображения, которое отображается в качестве маркера, перекрывая установки свойства list-style-type. Однако, если файл, на который ссылается адрес, не найден, то используется все же установка свойства list-style-type;

      none — пункт списка не имеет графического маркера, а берется из атрибута list-style-type;

      inherit — перенять значение у родительского элемента.

      Возможные значения list-style-position:

      outside — задает отображение маркера вне текста;

      inside — заставляет браузер отобразить маркер вместе с текстом в качестве первого символа;

      inherit — перенять значение у родительского элемента.

      Возможные значения list-style-type:

      disc — отображает маркер в виде сплошного круга;

      circle — маркер в виде круга;

      square — маркер в виде сплошного квадрата;

      decimal — нумерует позиции арабскими цифрами, начиная с 1;

      decimal-leading-zero — нумерует позиции арабскими цифрами, начиная с 01, 02 …;

      lower-roman — нумерует позиции малыми римскими цифрами;

      upper-roman — нумерует позиции большими римскими цифрами;

      lower-alpha — помечает позиции строчными латинскими буквами;

      upper-alpha — помечает позиции большими латинскими буквами;

      none — вообще убирает маркер или нумерацию;

      inherit — перенять значение у родительского элемента.

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

      [Window.] Document.getElementById («elementID»). Style.listStyle

      Значение по умолчанию: none disc outside.

      Применяется к элементам: li.

      Добавить комментарий Отменить ответ

      Для отправки комментария вам необходимо авторизоваться.

      List style ( type, image, position) — Css правила для настройки внешнего вида списков в Html коде

      Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня будет очередная статья в копилку CSS справочника. Речь в ней пойдет об оформлении нумерованных и маркированных списков в Html с помощью правил таблиц каскадных стилей. Здесь все очень просто, но тем не менее я решил посвятить этой теме отдельный пост.

      Чуть раньше мы уже успели узнать как задается фон через background, как оформляется текст с помощью text-decoration, vertical-align, align и indent и как можно работать со шрифтами с помощью Font (Weight, Family, Size, Style). Ну, а еще чуть раньше мы во всех подробностях рассмотрели всевозможные селекторы CSS и их различные комбинации для указания именно того элемента Html кода, для которого нужно будет применить определенные свойства стилевого оформления.

      List style — оформление списков в Html коде

      Итак, в языке стилевой разметки существует три отдельных правила начинающихся с list-style, которые служат для настройки внешнего вида списков (нумерованных или маркированных) в коде веб документов. Кроме этого существует сборное Css правило list-style, которое позволяет несколько сократить количество кода. Но обо всем по порядку.

      То, что мы сейчас будем с вами рассматривать, допустимо использовать как для Html элементов LI, так и для элементов Ul и Ol (маркированный и нумерованный списки, соответственно). В чем будет разница применения list-style для этих тегов?

      Если прописать его только для конкретного элемента списка LI, то, соответственно, оно только для него и применится (либо вообще для всех элементов LI). А если аналогичное правило прописать для контейнеров Ul или Ol, то оно применится для всех тегов LI заключенных в этих контейнерах. Т.е. оно перейдет к элементу LI по наследству (читайте более подробно про наследование в CSS).

      Собственно, узнать, наследуется ли свойство или нет, можно на сайте валидатора (читайте про валидатор W3C по приведенной ссылке) в разделе посвященном спецификации таблиц каскадных стилей. В столбце «Inherited» напротив наследуемых правил будет стоять «Yes»:

      Давайте начнем с list-style-type, которое позволяет задать тип маркирации для отдельных элементов Html списка. Для этого правила допустимы следующие значения:

      1. None — маркирация осуществляться вообще не будет (list-style-type:none; применено для этого пункта и поэтому у него нет маркера)
      2. Disc — закрашенный кружок (для этой строки как раз применено list-style-type:disc;)
      3. Circle — окружность в качестве маркера
      4. Square — квадратик в качестве маркера
      5. Decimal — арабские цифры (list-style-type:decimal;)
      6. lower-alpha — латинские буквы в нижнем регистре
      7. upper-alpha — латинские буквы в верхнем регистре
      8. lower-roman — римские цифры в нижнем регистре
      9. upper-roman — римские цифры в верхнем регистре

      Как вы думаете, с помощью каких элементов Ul или Ol был создан расположенный чуть выше список? Вопрос на засыпку. Оказывается, что в современной верстке это уже не важно, хотя в данном конкретном случае я использовал Ol, но изменив его на Ul — внешний вид останется прежним, ибо он задается для каждого элемента своим значением CSS правила list style type.

      По сути Ul и Ol отличаются только поведением по умолчанию (Ul — маркирует, а Ol — нумерует). Но если вы захотите, то сможете легко превратить один вид списка в другой с помощью list-style-type. Шрифт для маркирования цифрами или буквами используется точно такой же, какой был вами определен для содержимого тегов LI. Например, поменяв цвет шрифта для списка мы поменяем и цвет маркеров:

      1. Поменяли цвет текста (list-style-type:lower-roman;color:red) и поменялся цвет маркера

      Давайте перейдем с следующему CSS свойству — list-style-position. С помощью него можно задать позицию (размещение) области с маркером. Для него предусмотрено всего два варианта значений:

      Т.е. по сути в list-style-position мы указываем, где нужно размещать область с маркерам — за пределами элемента LI (outside) или внутри него (inside). По умолчанию область с маркером выносится за пределы, т.е. используется значение outside.

      Давайте посмотрим это на примере. В первом элементе списка я специально пропишу list-style-position:inside и мы посмотрим, что из этого выйдет:

      1. Здесь все по умолчанию
      2. Вот так будет выглядеть размещение области маркера с ins >

      Далее у нас на очереди List-style-image — позволяет задать картинку, которая будет использоваться в качестве маркера. Это правило по умолчанию имеет значение None (т.е. никакой картинки в качестве маркера не используется), но вы можете прописать функционал Url (), указав в нем путь до изображения, которое в последствие будет выполнять роль маркера в этом списке:

      Выглядеть это может так:

      1. Здесь все по умолчанию
      2. Вот так может выглядеть использование картинки в качестве маркера. Понятно, что можно подобрать более подходящее для этой цели изображение
      3. Например, как здесь.

      Как вы помните, в статье про тег изображения Img я говорил, что картинки относятся к строчным элементам (собственно, для браузера эта та же самая буква, но иногда очень большого размера).

      Вот картинка и встает на место маркера (буквы или цифры). При этом высота строки с элементом списка будет увеличена, если вы вставите в качестве маркера большую картинку (как это произошло во втором элементе приведенного чуть выше примера).

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

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

      Где посмотреть значения по умолчанию? Да все там же — в спецификации CSS валидатора W3C в столбце «Initial value» напротив интересующих вас свойств:

      Значения для отдельных свойств в сборном правиле List-style разделяются пробелами. Места расположения, как уже упоминал, не важны:

      На практике это может выглядеть, например, так:

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

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

      Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня будет очередная статья о свойствах каскадных таблиц стилей. В ней речь пойдет об оформлении нумерованных и маркированных списков HTML с помощью правил 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 — нумерация арабскими цифрами от 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 убирает маркер изображение и устанавливает обычный, не графический. Это поведение по умолчанию.

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

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

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

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

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

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

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

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

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

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

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

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

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

      list-style: circle url (//webcodius.ru/images/marker.png) outside;

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

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

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

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

      Свойство CSS list-style-type

      Описание и использование

      Свойство CSS list-style-type определяет тип маркера пункта списка.

      Значение по умолчанию disc
      Наследование да
      Версия CSS CSS 1
      Синтаксис JavaScript object.style.listStyleType=»square»

      Поддержка в браузерах

      Свойство list-style-type поддерживается всеми основными браузерами.

      Заметка: Ни одная версия Internet Explorer (включая IE8) не поддерживает значения свойства «decimal-leading-zero», «lower-greek», «lower-latin», «upper-latin», «armenian», «georgian» или «inherit».

      Стиль списка.

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

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

          — изложенная в учебнике HTML глава 9 «Списки» — рекомендую освежить в голове информацию о данных элементах, прежде чем приступать к работе.

      Ну а если в голове и так свежо тогда начнем!

      Вид маркера в списке.

      Если Вы помните, то в чистом HTML вид маркера в списке определял атрибут type и одно из его возможных значений, в CSS данную задачу берёт на себя свойство: list-style-type которое, в свою очередь, тоже имеет свои стандартные значения определяющие вид маркера как всего списка сразу, так и его отдельного «пункта».

      • disc — Диск. (по умолчанию для )
      • circle — Полый круг.
      • square — Квадрат.
      • decimal — Арабские цифры. (по умолчанию для )
      • lower-roman — Строчные римские цифры.
      • lower-alpha — Строчные буквы.
      • upper-roman — Заглавные римские цифры.
      • upper-alpha — Заглавные буквы.
      • none — Маркер отсутствует.

      CSS Свойство list-style-type

      Пример

      Установить различные типы списков:

      ul.circle ul.square ol.upper-roman ol.lower-alpha

      Попробуйте сами »

      Еще примеры внизу этой страницы.

      Определение и Использование

      Свойство list-style-type указывает тип маркеров пунктов в списке.

      Значение по умолчанию: «disc» для

        и «decimal» для
      Наследуется: да
      Версия: CSS1
      JavaScript синтаксис: объект.style.listStyleType=»square»

    Поддержка Браузерами

    Свойство list-style-type поддерживается всеми основными браузерами.

    Замечание: IE9 и Opera 11 не поддерживают: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana и katakana-iroha.

    Замечание: IE8 и более ранние версии поддерживают только свойства: decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, и inherit, если указано объявление DOCTYPE!

    Значения Свойства

    Значение Описание
    armenian Маркеры — традиционная Армянская нумерация
    circle Маркер — окружность
    cjk-ideographic Маркеры — простые идеографические числа
    decimal Маркер — число. Используется по умолчанию для
    decimal-leading-zero Маркер — число с нулем впереди (01, 02, 03, и т.д.)
    disc Маркер — круг. Используется по умолчанию для
    georgian Маркеры — традиционная Грузинская нумерация
    hebrew Маркеры — традиционная Еврейская нумерация
    hiragana Маркеры — традиционная нумерация Хирагана
    hiragana-iroha Маркеры — традиционная нумерация Хирагана ироха
    inherit Значение свойства наследуется от родительского элемента
    katakana Маркеры — традиционная нумерация Катакана
    katakana-iroha Маркеры — традиционная нумерация Катакана ироха
    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, и т.д.)

    Попробуйте сами — Примеры

    Всевозможные маркеры пунктов списка
    Этот пример демонстрирует всевозможные маркеры пунктов списка.

    Мастер Йода рекомендует:  Зачем и как эффективно учить язык программирования Си исчерпывающая подборка ресурсов для освоения
    Добавить комментарий