Красивые маркированные списки css. Правила CSS для настройки внешнего вида списка на html странице

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

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

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

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

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

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

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

    Собственно, узнать, наследуется ли свойство или нет, можно на сайте валидатора (читайте про по приведенной ссылке) в разделе посвященном спецификации таблиц каскадных стилей. В столбце «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. Вот так будет выглядеть размещение области маркера с inside. Обратите внимание, что вторая строка в этом элементе и маркер расположены на одном уровне
    3. Здесь все по умолчанию

    List-style-image и сборное Css правило

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

    

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

    List-style-image: url(https://сайт/images/list_star.png);

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

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

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

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

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

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

    

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

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

    List-style:inside upper-roman url(https://сайт/images/list_star.png);

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

    List-style-type:none;

    List-style:none;

    Удачи вам! До скорых встреч на страницах блога сайт

    посмотреть еще ролики можно перейдя на

    ");">
    

    Вам может быть интересно

    Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
    Float и clear в CSS - инструменты блочной верстки
    Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
    Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
    Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
    CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html

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

    Виды списков

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

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

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

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

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

    С помощью 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	Пример
    	работоспособность всех ссылок поддержку разных браузеров читабельность текста
    	Что следует учитывать при тестировании сайта: работоспособность всех ссылок поддержку разных браузеров читабельность текста
    	Что следует учитывать при тестировании сайта: работоспособность всех ссылок поддержку разных браузеров читабельность текста
    	Нумерованный список с арабскими цифрами: первый второй третий
    	Нумерованный список со строчными римскими цифрами: первый второй третий
    	Нумерованный список с заглавными римскими цифрами: первый второй третий
    	Нумерованный список со строчными буквами латинского алфавита: первый второй третий
    	Нумерованный список с заглавными буквами латинского алфавита: первый второй третий