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

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

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

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

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

HTML

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

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

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

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

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

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

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

Виды списков

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

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

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

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

CSS стили списка маркера.

list-style-type

Значение :

disk – маркированный список в виде закрашенного кружка

circle – маркированный список в виде не закрашенного кружка

square – маркированный список в виде закрашенного квадратика

decimal – нумерованный список арабскими числами (1,2,3 и т.д.)

upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)

lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)

none – без маркера.

Пример :

Свойства списков в css

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

Результат :

Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите

list-style-type: none;

Пример :

Свойства списков в css

Верь в лучшее, ожидай худшее.
Никогда не говори никогда.

Результат :

Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image .

list-style-image

list-style-image: url(картинка.png);

Пример :

Свойства списков в css

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

Результат :

Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.

Пример :

Свойства списков в css

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

Результат :

Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
Это выглядит вот так:

текст

Пример :

Свойства списков в css

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

Результат :

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

Пример :

Свойства списков в css

Верь в лучшее, ожидай худшее.Пункт 1
Жизнь - это болезнь со смертельным исходом.Пункт 2
Никогда не говори никогда.Пункт 3
Это все что я знал. Пункт 4

Результат :

Вот и подошла к завершению тема .

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

Теперь пример использования этого свойства:

Свойство list-style-type.

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

Обратите внимание, мы превратили нумерованный список

Рисунок 1. Свойство list-style-type.

Обязательно обратите внимание на значение none , это значение убирает маркеры вообще. Это свойство часто используется для форматирования списков при помощи CSS.

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

Свойство list-style-image устанавливает символом маркера графический файл.

Свойство list-style-image..gif"); } </style> </head> <body> <ul> <li>Первый пункт.</li> <li>Второй пункт.</li> <li>Третий пункт.</li> </ul> </body> </html> </p><p>Вот результат работы этого кода:</p> <img src='https://i2.wp.com/komotoz.ru/uroki/css/example/images/lists_2.png' height="190" width="374" loading=lazy> Рисунок 2. Свойство list-style-image. <p>Мы видим, что теперь маркеры списка отмечены <a href="/perechislit-graficheskie-formaty-formaty-failov-graficheskie-faily-bez.html">графическим файлом</a> .</p> <h2>Свойство list-style-position</h2> <p>Перед тем, как приступить к изучению этого свойства, более детально изучим модель форматирования элемента <ul> .</p><p> <!DOCTYPE html> <html> <head> <title>Форматируем список.