Красивый маркированный список css. Стилизация номеров строк (цифр) в упорядоченных списках ol

Сегодня нет практически ни одного сайта, где бы не использовались HTML списки (

представляет упорядоченный список,
- неупорядоченный список). В этом уроке я покажу вам 8 отличных способов, позволяющих сделать обычные скучные html-списки привлекательными. Мы лишь добавим несколько простых CSS техник и наши списки не только приобретут потрясающий вид, но и несколько дополнительных возможностей.

А теперь посмотрите демо-версию, чтобы увидеть, что же мы с вами будем создавать.

Выглядят гораздо лучше, не так ли? И вы тоже можете создать такие списки при помощи простого CSS кода. Хотите знать как? Читайте!

Список #1: Простая система навигации



Чаще всего списки используются при создании навигационного меню. Код данного HTML/CSS примера позволяет создать простую, даже немного скромную, но привлекательную систему навигации.

• Home
• Blog
• About
• Contact

/* LIST #1 */ #list1 { } #list1 ul { list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; } #list1 ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; } #list1 ul li a { text-decoration:none; color:#eee; } #list1 ul li a:hover { text-decoration:underline; }

Список #2: Использование различного шрифта при нумерации



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

The Netherlands is a country in ...

The United States of America is a federal constitutional ...

The Philippines officially known as the Republic ...

The United Kingdom of Great Britain and ...

/* LIST #2 */ #list2 { width:320px; } #list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1; } #list2 ol li { } #list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; } #list2 ol li p em { display:block; }

Список #3: Изображения-маркеры



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

• Java
• .NET

/* LIST #3 */ #list3 { } #list3 ul { list-style-image: url("../images/arrow.png"); color:#eee; font-size:18px; } #list3 ul li { line-height:30px; }

Список #4: iPhone-стиль



Данный список взят из статьи the iPhone Contacts App, созданный при помощи CSS и jQuery. Так выглядят списки на iPhone. Очень привлекательно, не так ли? Хотите такой на свой сайт?

• Toronto2004
• Beijing2008
• London2012
• Rio de Janeiro2016

/* LIST #4 */ #list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; } #list4 ul { list-style: none; } #list4 ul li { } #list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; } #list4 ul li a:hover { color:#FFFFFF; background-image:url(../images/hover.png); background-repeat:repeat-x; } #list4 ul li a strong { margin-right:10px; }

Список #5: Вложенные списки



Вложенные списки могут быть необыкновенно полезны и выглядят красиво. Изменив третью технику (Изображения-маркеры), мы можем создать «расширенный список». Конечно же не без помощи jQuery:

1. Google
   1. Picasa
   2. Feedburner
   3. Youtube
2. Microsoft
   1. Corel Corporation
   2. Zignals
   3. ByteTaxi
3. Yahoo!
   1. Xoopit
   2. BuzzTracker
   3. MyBlogLog

/* LIST #5 */ #list5 { color:#eee; } #list5 ol { font-size:18px; } #list5 ol li { } #list5 ol li ol { list-style-image: url("../images/nested.png"); padding:5px 0 5px 18px; font-size:15px; } #list5 ol li ol li { color:#bfe1f1; height:15px; margin-left:10px; }

Список #6: Римская нумерация + многострочный тип



По умолчанию в списке используются стандартная нумерация (1, 2, 3, 4 и т.д.). Изменив значение в CSS, вы можете задать другой тип нумерации, к примеру, римский.
Так же по умолчанию, нумерация и маркеры располагаются вне списка (отличный пример тому - наш список под номером 2). Но и это исправимо, всего лишь нужно изменить значение list-style-position свойства на inside.

1. Lorem ipsum dolor sit amet, ...
   Fusce sit amet ...
2. Aenean placerat lectus tristique...
   Vivamus interdum ...
3. Mauris eget sapien arcu, vitae...
   Phasellus neque risus...
4. Phasellus feugiat lacus ...
   Duis rhoncus ...

/* LIST #6 */ #list6 { font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; } #list6 ol { list-style-type: upper-roman; color:#eee; font-size:14px; list-style-position: inside; } #list6 ol li { }

Список #7: Линейный список, в котором пункты перечисляются через запятую



Обычно списки используются для отображения количества чего-либо и отражаются в виде столбика. Но как быть, если вам нужен линейный список? Это достигается путем смены значения display свойства на inline. Но если вам вдруг понадобится встроить список в текст, то по правилам, пунктики списка должны быть разделены запятой. Как этого добиться? А, просто, при помощи элемента:after символического кода.

• First inline item
• Second inline item
• Third inline item
• Fourth inline item

/* LIST #7 */ #list7 { } #list7 ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; } #list7 ul li { display: inline; } #list7 ul li:after { content: ", "; } #list7 ul li.last:after { content: ". "; }

Список #8: Вращающееся навигационное меню



Вот и последняя техника, для работы которой понадобится CSS3 (поддерживается только последними версиями Firefox, Safari и Chrome). При наведении курсора на один из элементов блока включается эффект - вращение. Конечно не самый удобный способ, но очень красивый.

• Home
• Blog
• About
• Contact

/* LIST #8 */ #list8 { } #list8 ul { list-style:none; } #list8 ul li { font-family:Georgia,serif,Times; font-size:18px; } #list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px; text-decoration:none; color:#bfe1f1; } #list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000; -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000; transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

Заключение

Как видите, реально создать уникальные вещи из обычного html-списка. И все это силами CSS. Очень рад, если вы узнали много интересного для себя.

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

В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.

Табл. 1. Свойства CSS для управления видом списка

Свойство	Значение	Описание	Пример
list-style-type	disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none	Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного.	LI {list-style-type: circle} LI {list-style-type: upper-alpha}
list-style-image	none URL	Устанавливает символом маркера любую картинку.	LI {list-style-image: url(check.gif)}
list-style-position	outside inside	Выбор положения маркера относительно блока строк текста.	LI {list-style-position: inside}
list-style		Универсальное свойство, включает одновременно все вышеперечисленные свойства.

Поскольку тег

• наследует стилевые свойства тега
  или
  , который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL , так и для селектора LI . Так, в примере 1 используется селектор UL , для него и задаются стилевые параметры.

  Пример 1. Создание маркированного списка

  Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

  Рис. 1. Вид списка, измененого с помощью стилей

  Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.

  Пример 2. Использование изображений в качестве маркера

  • Заголовок должен быть короче трех строк.
  • При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.
  • Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.

  Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

  

  Рис. 2. Изображения в качестве маркеров

  Некоторые примеры создания различных списков приведен в табл. 2.

  Табл. 2. Возможные виды списков

  Код HTML	Пример
  	работоспособность всех ссылок поддержку разных браузеров читабельность текста
  	Что следует учитывать при тестировании сайта: работоспособность всех ссылок поддержку разных браузеров читабельность текста
  	Что следует учитывать при тестировании сайта: работоспособность всех ссылок поддержку разных браузеров читабельность текста
  	Нумерованный список с арабскими цифрами: первый второй третий
  	Нумерованный список со строчными римскими цифрами: первый второй третий
  	Нумерованный список с заглавными римскими цифрами: первый второй третий
  	Нумерованный список со строчными буквами латинского алфавита: первый второй третий
  	Нумерованный список с заглавными буквами латинского алфавита: первый второй третий

  Свойство 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 , сложный пример с тенями.

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

      Думаю, вы уже знаете, что в HTML 5 применяется два основных вида списков (если не брать в расчет списки описаний и элементы меню):

      • нумерованный (упорядоченный) список – HTML элемент
        1. маркированный (неупорядоченные) список – HTML элемент

           CSS предоставляет нам широкие возможности форматирования внешнего вида этих списков, давайте рассмотрим основные из них.

           Изменение типа маркера

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

           Меню навигации, к примеру, часто составляется из обычных маркированных списков (HTML элемент

           ), по умолчанию маркер которых, отображается в форме закрашенного круга, чтобы его убрать необходимо, воспользоваться CSS свойством list-style-type со значением none :
           ul { list-style-type : none ; /* убираем маркер у списка */ }

           Для маркированных (неупорядоченных) списков (HTML элемент

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

           Значение	Описание
           none Элемент списка Элемент списка Элемент списка	Маркер не отображается.
           disc Элемент списка Элемент списка Элемент списка	Маркер в форме закрашенного кружка. Это значение по умолчанию.
           armenian Элемент списка Элемент списка Элемент списка	Числовой маркер (традиционная Армянская нумерация).
           circle Элемент списка Элемент списка Элемент списка	Маркер в форме круга.
           cjk-ideographic Элемент списка Элемент списка Элемент списка	Простые идеографические числа.
           decimal Элемент списка Элемент списка Элемент списка	Числовой маркер (десятеричные арабские числа, начинающихся с 1).
           decimal-leading-zero Элемент списка Элемент списка Элемент списка	Числовой маркер (десятеричные арабские числа, начинающихся с 1 и дополненные начальным нулем - 01, 02, 03...).
           georgian Элемент списка Элемент списка Элемент списка	Числовой маркер (традиционная Грузинская нумерация - an, ban, gan, ..., he, tan, in, in-an...).
           hebrew Элемент списка Элемент списка Элемент списка	Числовой маркер (традиционная Еврейская нумерация.).
           hiragana Элемент списка Элемент списка Элемент списка	Числовой маркер (японская слоговая азбука Хирагана - a, i, u, e, o, ka, ki...).
           hiragana-iroha Элемент списка Элемент списка Элемент списка	Числовой маркер (японская слоговая азбука Хирагана ироха - i, ro, ha, ni, ho, he, to, ...).
           katakana Элемент списка Элемент списка Элемент списка	Числовой маркер (японская слоговая азбука Катакана - A, I, U, E, O, KA, KI, ...).
           katakana-iroha Элемент списка Элемент списка Элемент списка	Числовой маркер (японская слоговая азбука Катакана ироха - I, RO, HA, NI, HO, HE, TO, ...).
           lower-alpha Элемент списка Элемент списка Элемент списка	Буквы ascii нижнего регистра (a, b, c, d...z).
           lower-greek Элемент списка Элемент списка Элемент списка	Строчные греческие буквы (α, β, γ, δ, и т.д.).
           lower-latin Элемент списка Элемент списка Элемент списка	Строчные латинские буквы (a, b, c, d,...z).
           lower-roman Элемент списка Элемент списка Элемент списка	Римские числа в нижнем регистре (i, ii, iii, iv, v и т.д.).
           square Элемент списка Элемент списка Элемент списка	Маркер в форме квадрата.
           upper-alpha Элемент списка Элемент списка Элемент списка	Буквы ascii верхнего регистра (A, B, C, D,...Z).
           upper-latin Элемент списка Элемент списка Элемент списка	Заглавные латинские буквы (A, B, C, D,...Z).
           upper-roman Элемент списка Элемент списка Элемент списка	Римские цифры в верхнем регистре (I, II, III, IV, V и т.д.).

           Обращаю Ваше внимание, что значения hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha не поддерживаются браузером Internet Explorer .

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

           /* список со значением типа маркера по умолчанию (disc). */
           • Элемент списка
           • Элемент списка
           • Элемент списка
           /* нумерованный список с типом маркера lower-roman */
           1. Элемент списка
           2. Элемент списка
           3. Элемент списка
           /* маркированный список с типом маркера circle */
           • Элемент списка
           • Элемент списка
           • Элемент списка

           В данном примере мы создали два стиля, первый устанавливает тип маркера - римские числа в нижнем регистре (значение lower-roman ), мы его применили к нумерованном списку (HTML элемент

           ), а к маркированному списку (HTML элемент
           ) мы применили стиль, который устанавливает тип маркера в форме полого круга (значение circle ).

           Результат нашего примера:

           Обращаю Ваше внимание, что вы можете применить свойство list-style-type даже к отдельно взятому элементу списка (HTML элемент

           • ), чтобы установить свой тип маркера, либо создать стили, которые будет применять определённый маркер к чётным, либо нечетным элементам списка, как рассмотрено в следующем примере:
             • Элемент списка
             • Элемент списка
             • Элемент списка
             • Элемент списка
             • Элемент списка
             • Элемент списка
             • Элемент списка
             • Элемент списка

             В этом примере мы стилизовали все нечетные элементы списка - указали тип маркера квадрат , а цвет текста указали зеленый . Четные элементы списка получили следующий стиль: красный цвет текста и отсутствие маркера.

             Результат нашего примера:

             Расположение маркера относительно элемента списка

             Результат нашего примера:

             Рис. 71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).

             Создание собственных маркеров

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

             Синтаксис свойства следующий:

             ol { list-style-image : url("images/primer.png") ; /* указываем относительный путь к изображению */ } ul { list-style-image : ; /* указываем абсолютный путь к изображению */ }

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

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

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

             .test { list-style-image : url("http://сайт/images/mini5.png") ; /* указываем абсолютный путь к изображению, которое будет использовано в качестве маркера */ }
             • Элемент списка
             • Элемент списка
             • Элемент списка

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

             Результат нашего примера:

             Изменение цвета маркера в CSS

             В завершении этой статьи давайте рассмотрим продвинутый способ изменения цвета маркера без изменения цвета элемента, с использованием CSS свойства content и ранее рассмотренного псевдоэлемента :before :

             • Элемент списка
             • Элемент списка
             • Элемент списка

             Суть этого способа заключается в том, что мы перед каждым элементом списка (HTML элемент

           • ) вставляем псевдоэлементом (:before) сгенерированный контент (CSS свойство content), который идентичен по внешнему виду маркеру в маркированном списке (HTML элемент
             ), только уже необходимого для нашей задачи цвета .

             Обращаю Ваше внимание, что в данном примере использовано свойство padding-right , которое нам позволило сделать внутренний отступ справа в каждом элементе списка (HTML элемент

             • ). Если в данном случае не применять это свойство, то маркер будет находится в упор к тексту, что зрительно некрасиво. Работа с внутренними и внешними отступами элементов будет подробно рассмотрена в следующей статье учебника " ".

               Вопросы и задачи по теме

               Перед тем как перейти к изучению следующей темы пройдите практические задания:

               
               

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

               2016-2019 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу сайт@gmail.com