Оформление ul. CSS Design: Укрощение списков. Сборное CSS правило list-style

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

Виды списков

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

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

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

Использование списков при создании меню или панелей навигации поощряется последней версией стандарта 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 - закрашенный квадрат.

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

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

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

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

    Синтаксис

    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

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

    Обычный вид маркера

    И, первое - задать внешний вид маркеров. Маркеры у списков бывают разные. В уроках по HTML Нумерованных списках показывается, как менять маркеры с помощью атрибута type . Но зная CSS данный атрибут больше не нужен, так как все это делается, куда удобней, благодаря таблице стилей CSS .

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

    HTML

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

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

    Убирается маркер у списка с помощью свойства list-style-typet и присваивая ему значение none . Это является самым популярным вариантом по удалению маркеров у списка. И для списка зададим то самое свойство.

    Ul{ list-style-type: none; }

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

    

    • none - Удаляет маркеры у списка
    • circle - Маркер в виде круга
    • disc" - Маркер в виде заполненного круга. Значение по умолчанию
    • square - Маркер в виде квадрата
    • armenian - Армянская нумерация
    • decimal - Маркер в виде цифры
    • decimal-leading-zero - Цифры с «0» перед началом (01, 02, 03, и т.д.)
    • georgian - Грузинская нумерация
    • lower-alpha - (а, Ь, с, d, е, и т.д.)
    • lower-greek - (alpha, beta, gamma, и т.д.)
    • lower-latin - (a, b, с, d, e, и т.д.)
    • Iower-roman - (i, ii, iii, iv, v, и т.д.)
    • upper-alpha - (А, В, С, D, Е, и т.д.)
    • upper-latin - (А, В, С, D, Е, и т.д.)
    • upper-roman - (I, II, III, IV, V, и т.Д.)
    • inherit - Значение должно быть унаследовано от элемента родителя

    Это все вида маркеров для списков. Первые четыре вида самые распространённые, остальные виды применяются достаточно редко.

    Ну и для примера давайте выберем и зададим маркер в виде больших римских цифр. Делается это просто: в место значения none ставим название нашего маркера upper-roman .

    Ul{ list-style-type: upper-roman; }

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

    Маркер в виде изображения

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

    Возьмите любую картинку в интернете размером (15px x 15px) , которую планируется использовать в качестве маркера и поместите ее в ранее уже созданную папку с картинками images . После этого, остается свойству list-style-image указать путь к картинке и браузер вместо маркера подставит картинку.

    В CSS путь указывается с помощью ключевого слова url() . В скобках указываем путь к картинке ../images/Название картинки.jpg , относительно таблицы стилей.

    То есть, что значит относительно таблицы стилей? Наша таблица стилей - файл style.css , лежит в каталоге CSS , а картинка лежит в каталоге images . Это значит, что браузеру нужно указать, что ему сначала нужно выйти из каталога CSS , это делается так: ../ , а затем зайти в в каталог с картинкой images и уже затем найти нужную картинку.

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

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

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

    1. .

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

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

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