Задача

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

Решение

Для этой цели применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору UL или LI как показано в примере 1.

Пример 1. Список без маркеров

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Север
• Юг
• Запад
• Восток

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

Рис. 1. Список без маркеров

Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо. Чтобы управлять положением элементов списка, для селектора UL в данном примере добавлены свойства margin-left и padding-left . Два свойства вместо одного требуется, чтобы одинаково показывать результат в разных браузерах.

Для списков, о создании которых средствами HTML рассказано здесь, предусмотрены следующие CSS-правила.

list-style-type

Задаёт маркер или нумерацию списков вместо атрибута type в HTML-коде. Значения свойств для маркированных списков могут быть:

• disk - кружок, установлен по умолчанию.
• circle - окружность.
• square - квадрат.

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

• decimal - арабские цифры, значение установлено по умолчанию.
• lower-roman - маленькие римские цифры.
• upper-roman - заглавные римские цифры.
• lower-alpha - строчные латинские буквы.
• upper-alpha - прописные латинские буквы.

Также для любого типа списка свойству list-style-type можно указать значение none, которое вообще уберёт маркер.

Для нумерованных списков доступны и другие значения, например, cjk-ideographic задаёт идеографическую нумерацию, Armenian - традиционную армянскую, а decimal-leading-zero установит нумерацию римскими цифрами, но с нулём в начале: 01, 02, 03… 09, однако на практике эти и подобные им значения используются крайне редко.

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

1. Первый пункт
2. Второй пункт
3. Третий пункт

• Первый пункт
• Второй пункт
• Третий пункт

1. Первый пункт
2. Второй пункт
3. Третий пункт

Результат.

Цвет маркеров совпадает с цветом текста в списке, указанного свойством color .

list-style-image

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

Ul { list-style-image: url("marker.png"); }

list-style-position

Определяет положение маркера: либо он вынесен за границу элемента списка (list-style-position: outside ), либо текст его обтекает (list-style-position: inside ).

В примере ниже показана разница между этими значениями. В первом случае маркер внутри списка, во втором случае он вынесен за его пределы.

• Вы просто посмотрите, чем отличаются inside от outside.
• В случае с inside маркер прямо-таки вписывается в список, не выходя за его пределы и не мешая вёрстке. Текст обтекает его, маркер как бы внутри.
• Значение outside выносит маркер за пределы списка.

В результате создаётся такая страница:

list-style

Позволяет сократить код, записав все три перечисленных свойства одной строкой. Записываются правила через пробел:

Ul { list-style: square inside; }

Рассмотрим пример страницы с тремя списками. Первый нумеруется цифрами в формате 01, 02, второй маркируется пользовательским рисунком (файл marker.png в папке со страницей), маркер третьего списка отключен.

HTML-код приведён ниже.

1. Первый пункт
2. Второй пункт
3. Третий пункт

• Первый пункт
• Второй пункт
• Третий пункт

1. Первый пункт
2. Второй пункт
3. Третий пункт

Браузер отобразит следующую страницу.

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

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

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

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

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

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

       Значения list-style-type:

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

         
         
         
         
         
         
         

         
         
         • Пункт 1.
           
         • Пункт 2.
           
         • Пункт 3 (особенный).
           
         
         
         
         
         • Пункт 1.
           
         • Пункт 2.
           
         • Пункт 3.
           
         
         
         

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

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

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

         Значений данного свойства всего два:

         • none - Отменяет графическое изображение маркера.
         • url - Путь к файлу с рисунком маркера.

         Путь к рисунку после url указывается в круглых скобках.

         Такая запись будет говорить о том, что рядом с документом есть папка graphics в которой лежит файлик-рисунок: " " - под названьем marker.gif

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

         
         
         
         
         
         
         

         
         
         • Первый любимый пункт.
           
         • Второй любимый пункт.
           
         • И не менее любимый третий пункт.
           
         
         
         

         Стиль обтекания маркера списком.

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

         Возможных значений свойства list-style-position всего два:

         • outside - Маркер находится в стороне от списка.(по умолчанию)
         • inside - Маркер обтекается текстом.

         Пример для наглядности:

         
         
         
         
         
         
         
         

         
         

         Здесь маркер обтекается текстом:

         
         

         
         
         • 
           
         • 
           

         
         
         
         
         
         

         А здесь нет:

         
         

         
         
         • Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
           
         • Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
           

         
         
         
         
         

         list-style

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

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

         Если в голове остались какие то пробелы можете вернуться и перечитать.

         
         
         
         
         
         
         

         
         

         
         
         • - Этот список использует в качестве маркера рисунок.
           
         • - Текст этого списка обтекает маркер.
           

         
         
         
         
         

         Списки наряду с заголовками, выделенным текстом и картинками, являются элементами, которые приковывают взгляд посетителя при беглом просмотре страницы. Умелое и ненавязчивое размещение таковых элементов залог того, что посетитель окунётся в чтение Вашего документа более глубоко.

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

         Facebook

         Twitter

         Вконтакте

         Google+
         Как работать