Как разместить элементы списка горизонтально? Примеры стильного оформление ul li списков CSS Как вывести на странице несколько списков с разным оформлением.
Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках
- , то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.
- Посадить дерево
- Построить дом
- Вырастить сына
- 1 Посадить дерево
- 2 Построить дом
- 3 Вырастить сына
- Посадить дерево
- Построить дом
- Вырастить сына
- li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
- counter-reset:myCounter;
– обнуляет css-счетчик myCounter внутри каждого
- .
- counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента::before .
- content:counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента::before .
- пункт 1
- пункт 2
- пункт 3
- пункт 1
- пункт 1
- пункт 1
- пункт 1
- пункт 2
- пункт 3
- Заголовок 1
- Заголовок 2
- Заголовок 3
- Элемент #1
- Элемент #2
- Элемент #3
- ...
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
-
- Элемент #2-1
- Элемент #2-2
- Элемент #2-3
- Элемент #3
- ...
- Элемент #1
- Элемент #2
- Элемент #1
- Элемент #2
- Элемент #1
- Элемент #2
- Элемент #1
- Элемент #2
- ...
- disc - маркер в виде кружка (пример был выше)
- circle - маркер в виде прозрачного кружка (пример был выше)
- square - маркер в виде квадратика (пример был выше)
- decimal - маркер в виде нумереннового списка арабскими цифрами: 1, 2, 3, ...
- decimal-leading-zero - маркер в виде нумереннового списка арабскими цифрами с нулем в начале: 01, 02, 03, ...
- lower-roman - маркер в виде нумереннового списка римским алфавитом маленькими буквами: i, ii, iii, iv, v
- upper-roman - маркер в виде нумереннового списка римским алфавитом большими буквами: I, II, III, IV, V
- lower-latin - маркер в виде списка латинским алфавитом маленькими буквами: a, b, c, d, ...
- upper-latin - маркер в виде списка латинским алфавитом большими буквами: A, B, C, D, ...
- lower-greek - маркер в виде списка греческим алфавитом маленькими буквами
- upper-greek - маркер в виде списка греческим алфавитом большими буквами
-
. При задании атрибута тегу
-
все элементы списка будут отображаться так, как на это указывает атрибут. Но мы можем задать тому или иному элементу своё отображение. Пример на рисунке:
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- , который, помимо текста, может включать в себя другие HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.
Примечание: Если к
-
применяется CSS свойство, то элементы
-
наследуют эти свойства.
Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image , позволяющее заменять маркеры на изображения. Для создания нумерованных списков используйте тег
- .
- ... ...
Синтаксис
Закрывающий тег
Обязателен.
Атрибуты
compactУстарел в HTML5 Сокращает отступы и расстояния между строками. type HTML5 Устанавливает вид маркера списка.Для этого элемента доступны глобальные атрибуты и события .
Стилизация по умолчанию
Большинство браузеров отобразит элемент
-
со следующими значениями CSS по умолчанию:
- Кофе
- Чай
- Какао
- Первая строка
- Вторая
- Последний элемент
- — закрашенный кружок (по умолчанию);
- — не закрашенный кружок;
- – квадрат
- Маркер в виде закрашенного диска
- Маркер в виде не закрашенного диска
- Квадрат
- Первая строка
- Второй пункт
- Третья строка
- — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»);
- — заглавные буквы в качестве нумерации;
- — строчные буквы;
- — заглавные римские цифры;
- — строчные римские цифры;
- с нумерацией большими римскими цифрами
- Нумерация маленькими латинскими буквами
- Нумерация малыми римскими цифрами
- Первый элемент, номер которого задан в теге OL атрибутом start="23"
- Следующий пункт, с номером на единицу большим
- Еще на единицу больше
- Первый пункт с номером один
- Этот элемент получит номер, указанный в атрибуте value="32"
- Пункт с большим номером
- Первый пункт
- Второй
- Последний
- Первый термин
- Описание
- Второй термин
- Его описание
- Первый пункт основного нумерованного
- Второй пункт
- Первый элемент вложенного маркированного
- Второй
- Третий и последний пункт маркированного
- Третий элемент нумерованного
Ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; }
Различия между HTML 4.01 и HTML5
Атрибуты compact и type не поддерживаются в HTML5.
Пример использования:
Неупорядоченный HTML список:
Пример HTML:
Попробуй самСпецификации
Спецификация Статус WHATWG HTML Living Standard (WHATWG) Живой стандарт HTML 4.01 (W3C) Рекомендация HTML5 (W3C) Рекомендация HTML 5.1 (W3C) Рекомендация Поддержка браузерами
Попробуйте сами - Примеры
Как сделать, чтобы список начинался с номера, отличного от 1.
Здравствуйте, уважаемые читатели блога сайт. Сегодня в рамках этой рубрики я хочу поговорить о разнообразных Html списках, которые можно создать на основе специально предназначенных для этого тегов UL, OL, LI и DL. С помощью пары UL и LI создаются маркированные списки, с помощью OL и LI - нумерованные, а с помощью элементов DL, DT и DD создаются так называемые листинги определений. Так же мы рассмотрим вкратце принципы создания вложенных конструкций.
Хочу напомнить вам, что мы уже успели , успели поговорить про основы современной , а так же верстки табличной (). Кроме этого мы затронули основы , ну и узнали через .
Маркированные списки на основе тэгов UL и LI
Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI.
Между открывающим и закрывающим тегом располагаются отдельные пункты списка, которые в свою очередь заключаются в открывающий и закрывающий элемент LI. Сверху и снизу Html списков браузер добавляет отступы в одну строку, подобные отступам, создаваемым тэгом абзаца.
Давайте посмотрим, например, маркированный вариант, который может выглядеть так:
Внутри открывающего и закрывающего тегов UL могут стоять только элементы LI, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки).
Т.е. UL служит только для организации маркированного (не упорядоченного) листинга, а все, что вы будете видеть на web странице внутри него, реализуется с помощью содержимого элементов LI.
Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок):
В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера.
Пример маркированного списка с различными типами маркера для каждого пункта:
Нумерованные списки в Html на основе тэга OL
Для создания нумерованного листинга используются теги OL, внутри которых опять же будут расположены элементы LI. OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и внутри OL нельзя будет размещать ничего кроме элементов LI.
Получается, что OL и UL — это служебные тэги, которые нужны только для того, чтобы указать браузеру, какой именно вид списка мы формируем (маркированный или же нумерованный). В случае нумерованного — слева от каждого пункта мы будем видеть не маркер, а цифру и стоящую за ней точку:
Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения:
Пример нумерованного списка с различными типами нумерации для каждого пункта:
При создании нумерованных списков имеется так же возможность начать нумерацию не с единицы, а с заданного в атрибуте START числа. Например:
Для OL так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем LI этого пункта атрибут VALUE с требуемым числом. Например:
Оформление внешнего вида списков в CSS (таблицах стилей)
Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а , для которых прописываются соответствующие свойства.
Здесь я просто приведу пример различных маркеров для ненумерованных списков, внешний вид которых задается через отдельный файл с таблицами каскадных стилей.
Но а о мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров для UL на этом блоге. В качестве маркеров используются картинки: для обычных пунктов не нумерованного списка — , для вложенных пунктов ненумерованного — .
Специальные и вложенные списки в Html коде
Третий и последний вид называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. DL сообщает браузеру, что далее последует список определений.
Обычно такой вид используется (ну, или предполагалось, что он будет использоваться) для написания словарных статей, состоящих из терминов (заключенных в теги DT) и их описаний (заключенных в теги DD).
Если вы посмотрите на приведенный выше пример, то заметите, что элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина).
Вообще, DL, DT и DD являются блочными тегами, причем, внутри элемента DT можно вставлять только контент со строчными тегами (получается, что внутри DT нельзя будет использовать блочные элементы заголовков и абзацев). А внутри тегов DD можно вставлять любые элементы и строчные и блочные.
Вложенный список в Html создается по аналогии с простым, но внутри основного списка часть пунктов заключается еще раз в открывающий и закрывающий тег UL или OL.
Обратите внимание, что закрывающий LI того пункта, в котором будет создан вложенный пункт, ставится лишь после всего кода вложенного списка (это очень важно для его правильного отображения на web странице). Вложенный список может выглядеть примерно, так:
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
Iframe и Frame - что это такое и как лучше использовать фреймы в Html
Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
Похожие статьи -
наследуют эти свойства.
Код при этом выглядит так:
Изменение маркеров тега
- с помощью CSS
Элементы маркированного списка, создаваемые тегом
-
, могут маркироваться произвольными изображениями. Для изменения типа маркера используется CSS. Например
А так это выглядит на странице:
C помощью CSS мы можем задать и другие типы отображения маркеров. Но нужно помнить, что при задании какого-либо стиля тегу
- , он распространяется на все элементы списка.
Элемент
-
(от англ. "unordered list" ‒ «неупорядоченный список») создаёт маркированный (неупорядоченный) список. Как правило, элемент
-
применяется для создания таких списков, где изменение порядка следования пунктов этого списка существенно не меняет смысл списка.
Тег
-
относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.
Пункты для нумерованных списков определяются с помощью тега
Вот самый простой пример нестилизованного списка:
html
Давайте рассморим несколько способов решения вышеописанной задачи.
Традиционно топорный способ.
Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none; .
css
li{ list-style: none; } .num{ color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }html
Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п.
Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент::before и css-свойства content , counter-increment , counter-reset .
Красивый и правильный способ.
Вначале мы приведем код и демку, а потом разберемся, что к чему.
css
ol{ counter-reset: myCounter; } li{ list-style: none; } li:before { counter-increment: myCounter; content:counter(myCounter); color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }html
Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.
Давайте разберем по пунктам:
подробнее о css-счетчиках можно посмотреть в
Списки бывают нумерованными и ненумерованными.
Нумерованные списки выводятся кодом:
- Список с цифрами
Не нумерованные списки выводятся кодом:
- Список с галочками или другими символами
Каждый пункт любого списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol. Стили этих тегов прописываются в таблице стилей.
Для каждого тега присваиваются определенные стили оформления. В них указываются отступы от текста.
Для нумерованного списка прописываются стили нумерации для каждого пункта.
Стандартные арабские цифры описываются значением decimal.
list-style-type: decimal; /*арабские цифры*/
Для маркерованного списка указывается стиль символов — квадратики или кружочки.
list-style-type: circle; /*кружки*/
list-style-type: square; /*квадраты*/
Каждому пункту меню можно назначить изображение.
list-style-image: url(‘путь к изображению’);
Обычно в шаблонах нумерованный список оформляется простыми цифрами, а не нумерованный – черными квадратиками и кружочками. Это скучно и невыразительно. Давайте это исправим.
Где стили списков прописаны в шаблоне Twenty Eleven?
Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */
Стандартный код выглядит вот так:
Как оформить нумерованный список?
Нумерованный список с использованием фона
Посмотрите вот на такое симпатичное оформление нумерованного списка.
Нравится? Давайте повторим.
Найдите стили для тега ol. Пропишите к нему новые свойства.
Ol { padding: 0px 0 0 20px; margin: 0.5em 0 1.571em 1.9em; color: #2E2E2E; list-style-type: none; font: 15px/17px Verdana, Arial, Helvetica, sans-serif; z-index: 2; counter-reset: point; } ol li { margin-bottom: 4px; line-height: 1.6; color: #2E2E2E; position: relative; } ol li:before { margin-bottom: 4px; counter-increment: point 1; line-height: 1.6; height: 24px; margin-left: -36px; left: 0px; width: 24px; margin-top: 1px; background: #BDC3C7; content: counter(point); text-align: center; position: absolute; font-weight: bold; }
Для того чтобы вы поняли, где что вам нужно изменить под свой дизайн, давайте разберем этот код по полочкам.
list-style-type: none; — отключает вывод стандартных цифр
counter-reset: point; — задает переменную для счетчика нумерации
position: relative; — размещает нумерацию возле самих пунктов
before — псевдоэлемент для тега ol li. Имеет следующие стили:
content: counter(point); — выводит значение переменной
counter-increment: point 1; — увеличивает счетчик на 1
position: absolute;
background: #BDC3C7; — фон для цифр (фон можно задать цветом или красивой иконкой
margin – внешние отступы
padding – внутренние отступы
color – цвет текста элемента
background – фон
text-align – выравнивание текста
font-weight – толщина (насыщенность) шрифта
В своих стилях вы можете задать любые цвета, выравнивания, размеры шрифта и отступы.
Нумерованный список с уникальным изображением для каждого пункта
На одном женском сайте есть очень привлекательные нумерованные списочки.
Как это реализовано? Давайте рассмотрим следующий код:
/*первый номер*/ ol li:first-child { list-style-image: url(путь к изображению с цифрой 1); } /*второй номер*/ ol li:nth-child(2n) { list-style-image: url(путь к изображению с цифрой 2); } /*третий номер*/ ol li:nth-child(3n) { list-style-image: url(путь к изображению с цифрой 3); } /*четвертый номер*/ ol li:nth-child(4n) { list-style-image: url(путь к изображению с цифрой 4); } /*Далее прописываем точно также только для следующих номеров пунктов*/
В коде такого нумерованного списка нужно перечислить все номера пунктов и для каждого из них назначить уникальную иконку.
Если в списках в статьях вы используете до 20 нумерованных пунктов, то нужно прописать псевдокласс nth-child(An) 20 раз. Так чтобы последним в стилях шел псевдокласс nth-child(20n).
Найдите в файле стилей строчки, которые описывают оформление нумерованного списка (теги ol li).
Допишите в него псевдокласс first-child. Скопируете и вставьте его один раз, затем измените данное свойство на nth-child(An) и скопируете столько, сколько номеров должны иметь свою иконку. Проставьте номера пунктов.
Для каждого номера пропишите свойство list-style-image с собственной уникальной иконкой.
Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов.
Как оформить маркированный (ненумерованный) список?
Маркированный список ul li с чередующимися иконками
Мне очень понравился вот такой маркированный список
Ul { padding: 11px 0 5px 0; } ul li { padding-left: 32px; margin-bottom: 10px; font: normal 15px Verdana, sans-serif; color: #2E2E2E; line-height: 1.6; border-bottom: 1px dashed #ccc; padding-bottom: 10px; } ul li:before { content: ""; position: absolute; width: 27px; height: 24px; margin-left: -35px; margin-top: -2px; background: url("images/sprite.jpg") 0px 2px no-repeat; list-style-type: circle; } ul li:nth-child(2n):before { content: ""; position: absolute; width: 27px; height: 43px; margin-left: -35px; margin-top: -2px; background: url("images/sprite.jpg") 0px -17px no-repeat; list-style-type: circle; }
Можно вместо стандартного стиля list-style-type назначить свойство «путь к иконке» — list-style-image:url. Но тогда нужно прописать внешний левый отступ от краешков сайта — без него иконки не будут отображаться, уйдут за зону области контента.
Для эксперимента можно назначить отступы:
Ul li{ list-style-image: url(images/radio.png); margin-left: 30px; }
Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before.
В коде прописан один псевдокласс nth-child(2n). Его значение — 2. Получается, что каждому четному пункту соответствует другая иконка. Если вместо 2n написать 2n+1, то другая иконка будет приходиться на нечетные пункты.
Для каждого пункта списка можно задать нижнее подчеркивание. В приведенном примере пункты подчеркиваются пунктиром.
Также каждому пункту можно назначить рамочки, фон, иконки. Только не перемудрите. Наша задача — не сразить всех наповал навороченным дизайном, а улучшить качество восприятия контента.
Как вывести на странице несколько списков с разным оформлением?
Иногда нужно разместить несколько списков с разными стилями.
Если назначить общие стили, то одно и то же оформление будет присвоено всем спискам. Разные списки можно вывести, если назначить тегу ol или ul отдельный id и прописать его в html режиме редактирования статьи. Ну а в файле стилей для этого id нужно прописать отдельные стили.
Вот, например, один симпатичный вариант оформления содержания:
В HTML вы пропишите список так:
- Содержание
В CSS вы пропишите стили так:
Ol#sod{ padding: 0px 20px 10px 51px; margin: 0.5em 0 0em 1em; color: #2E2E2E; list-style-type: none; background: #f1f4f5; border-left: #BDC3C7 4px solid; display: inline-block; } ol#sod li{} ol#sod li:before{ font-weight:normal !important }
Новый стиль отличается от основного оформлением тега ol: фоном, стилем отображения, линией слева от содержимого.
Используя в тексте несколько разных по оформлению списков, вы сделаете подачу информации еще интереснее. При перечислении каких-либо предметов можно задать одни иконки, а при перечислении действий — другие. Здесь уже дизайн ограничивается только вашей фантазией.
Эти методы применимы и в дизайне пунктов меню, рубрик и любых других элементов сайта.
Как создать ссылки-якоря в списке содержания?
Как же их прописать в HTML коде? Один кусочек кода обрамляет анкор ссылки, а другой кусочек кода ставится рядом с тем местом, куда нас нужно перебросить при нажатии на ссылку.
- Содержание
А в тексте статьи нужно написать так:
Заголовок 1… Заголовок 2… Заголовок 3…
Может быть более опытные вебмастера меня в чем-то поправят. Я просто советую то, что попробовала на практике сама.
Если у вас остались какие-то вопросы, буду рада увидеть их в комментариях.
Агеева Вероника.
Возможно вас еще заинтересует:
В языке разметки гипертекста HTML имеется тег
-
, используемый для создания маркированных списков. Он поддерживается всеми современными браузерами и позволяет выводить элементы в порядке, не нуждающемся в нумерации. Например, очень часть с помощью него выводятся пункты меню и все что касается списков на странице: блюд, продуктов, оборудования, инструментов и многое другое, что нужно перечислить без указания на приоритетность того или иного пункта.
Синтаксис тега
Этот код преобразуется в маркированный список на сайте:
Тег
-
требует обязательного использования закрывающего тега
Для формирования элементов списка используется парный тег . Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.
Что может являться содержимым маркированного списка?Это могут быть различные тексты, включая одиночные слова, фразы и абзацы, изображения, вложенные списки, куски php-кода и многое другое, нуждающееся в простой маркировке.
Каждый элемент маркированного списка отступает по умолчанию на 40 пикселей вправо. Используя стили CSS, мы можем изменить отображение данного списка по своему усмотрению. Тег
-
является блочным, поэтому он занимает всю доступную для него область, ограниченную краем экрана, рамкой таблицы или другими элементами страницы.
Допускается вложения "список в списке"
Например
Атрибуты и свойства тега
Широко распространённым атрибутом тега
-
является атрибут type
, указывающий на то, как будет выглядеть маркер списка. Может принимать следующие значения
1. type="disc" - маркер в виде закрашенного кружка (это значение стоит по умолчанию). Пример с диском был чуть выше.
2. type="circle" - маркер в виде прозрачного кружка
Например:
3. type="square" - маркер в виде квадратика
Например:
А вот как это выглядит на странице:
В CSS тип маркера задается с помощью атрибута list-style-type :
Рассмотрим какие значения может принимать list-style-type :
Примечание 2
Атрибут можно назначить как самому тегу
-
, так и тегам
