Работа со списками в css

Убираем маркеры по умолчанию

Иногда нужно просто убрать их. Например, при оформлении меню или чего-то другого. За отображение маркеров отвечает свойство list-style-type или сокращенное list-style . Значением по умолчанию выступает circle , то есть черный закрашенный кружочек. Чтобы убрать его, всего лишь нужно написать так:

Ul{
List-style-type: none;
}

Ul{
List-style: none;
}

Заметьте, что свойство записывается всему списку в общем, а не отдельным его пунктам

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

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

Позиция маркера

Маркер может занимать в списке две позиции. Он может находиться за пределами элемента списка и занимать
своё место на странице. А может находиться внутри элемента списка и быть частью текста. Это выгладит так:

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

Позицию маркера устанавливает свойство list-style-position
. Оно принимает
значения:

list-style-position: outside
— за пределами элемента (по умолчанию)

list-style-position: inside
— внутри элемента

Добавим в маркерованный список ещё один пункт с длинным текстом и добавим селектору #nl1
свойство list-style-position
:

Стиль:

Полезные материалы по спискам HTML

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

4.1
Как сделать список HTML в строку

4.2
Как сделать список HTML без значка

4.3
Как сделать список в HTML по центру

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

4.4
Как сделать список в HTML с картинками

Достаточно лишь одного свойства CSS list-style-image
. Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:

4.5
Маркированный список HTML свой маркер

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

4.6
Как сделать список в HTML в несколько столбцов

Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count
(свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:

Позиция маркера

Маркер может занимать в списке две позиции. Он может находиться за пределами элемента списка и занимать
своё место на странице. А может находиться внутри элемента списка и быть частью текста. Это выгладит так:

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

Позицию маркера устанавливает свойство list-style-position. Оно принимает
значения:

list-style-position: outside — за пределами элемента (по умолчанию)

list-style-position: inside — внутри элемента

Добавим в маркерованный список ещё один пункт с длинным текстом и добавим селектору #nl1
свойство list-style-position:

Стиль:

list-style-position: inside;

HTML код:

<li>Пункт списка, который содержит длинный текст, состоящий более, чем из одной
строки. Марекр может находиться за пределами элемента списка или входить в него 
и быть частью текста</li>

Как сделать многоуровневый (вложенный) список в HTML

Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по ), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.

На примере моделей автомобилей мы построим многоуровневый список в HTML:

Обратите внимание, как выглядит многоуровневый список в браузере:

Мы делали многоуровневый список с помощью маркированного (тег

Оформление списков с помощью CSS-стилей

1. Тип маркера списка list-style-type

Свойство изменяет типа маркера или удаляет маркер
для маркированного и нумерованного списков. Наследуется.

Синтаксис

Ul {list-style-type: none;}
ul {list-style-type: square;}
ol {list-style-type: none;}
ol {list-style-type: lower-alpha;}
Рис. 1. Пример оформления маркированного и нумерованного списков

2. Изображения для элементов списка list-style-image

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

Синтаксис

Ul {list-style-image: url(«images/romb.png»);}
ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента

3. Местоположение маркера списка list-style-position

Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.

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

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

list-style-type

list-style-type:

disc
| circle
| square
| decimal
| lower-roman
| upper-roman
| lower-alpha
| upper-alpha
| none
;

Значение
:

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

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

Результат
:

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

Общие правила оформления списков:

1Пункты должны быть однотипными, то есть начинаться единообразно одной частью речи (глагол, существительное и др.).

2Первые слова пунктов не должны повторяться. Заменяйте их синонимы, перефразируйте.

3Ввводная фраза, предваряющая список, должна описывать его содержание.

4Пункты списка должны быть примерной одинаковыми по длине. «Прыгающие» строки выглядят неряшливо.

5В списке должно быть больше двух пунктов, иначе он будет смотреть куце. Если же нужно сделать только 2 пункта, то они должны быть объёмными.

6Если пункты состоят из нескольких предложений, первое можно выделить жирным шрифтом.

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

Итак, список — это хороший прием структурирования текста. Пользуйтесь нумерованными и маркированными перечнями в своих материалах на сайте — это визуально обогатит текст и привлечет читателей.

Список с рисованными маркерами

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

Пример 3. Использование изображения в качестве маркера

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Списки</title>
<style>
ul {
list-style-image: url(/example/image/bullet.png);
}
</style>
</head>
<body>
<ul>
<li>Сепульки</li>
<li>Сепулькарии</li>
<li>Сепуление</li>
</ul>
</body>
</html>

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

Рис. 4. Рисунок в качестве маркера

Применение list-style-image обладает некоторыми недостатками:

• рисунок нельзя сдвинуть вверх или вниз;
• в разных браузерах положение рисунка относительно текста может отличаться.

Этих недочётов можно избежать с помощью свойства background, оно устанавливает фоновое изображение. Для каждого элемента списка <li> мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).

Пример 4. Использование background

Вид маркера

Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type
или универсальное list-style
(пример 1). Применяются следующие значения:

• disc
  — маркеры в виде закрашенного кружка;
• circle
  — маркеры в виде незакрашенного кружка;
• square
  — квадратные маркеры.

Пример 1. Изменение вида маркера

Списки

• Сепульки
• Сепулькарии
• Сепуление

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

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

добавляем свой собственный символ с помощью псевдоэлемента ::before
. В примере 2 в качестве такого маркера выступает треугольник.

Пример 2. Использование::before

Списки

• Сепульки
• Сепулькарии
• Сепуление

Результат данного примера показан на рис. 2. Поскольку использование свойства list-style
со значением none
не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent
с отрицательным значением. Его задача — переместить текст левее на один символ.

Рис. 2. Произвольные маркеры в списке

Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).

Рис. 3. Выбор символа в LibreOffice

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

Пример 3. Использование изображения в качестве маркера

Списки

• Сепульки
• Сепулькарии
• Сепуление

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

Рис. 4. Рисунок в качестве маркера

Применение list-style-image
обладает некоторыми недостатками:

• рисунок нельзя сдвинуть вверх или вниз;
• в разных браузерах положение рисунка относительно текста может отличаться.

Этих недочётов можно избежать с помощью свойства background
, оно устанавливает фоновое изображение. Для каждого элемента списка

Как создать маркированный список?

Инструменты списков обычно находятся на общей панели инструментов в программе.

Начало работы с маркерами:

1. Убедитесь, что курсор находится в начале строки.

   Ставим курсор в начале строки

2. Нажмите кнопку «Маркеры».

   Нажимаем на кнопку «Маркеры»

3. Чтобы продолжить перечисление, введите нужные данные в первом пункте и нажмите «Enter». Программа по умолчанию проставит следующий элемент списка.

   Вводим текст, нажимаем «Enter»

   Программа по умолчанию проставит следующий элемент списка

Внешний вид маркеров можно менять в зависимости от стиля текста:

1. Нажмите стрелку рядом с кнопкой «Маркеры».

   Нажимаем стрелку рядом с кнопкой «Маркеры»

2. Выберите нужный символ из библиотеки.

   В разделе «Библиотека маркеров» выбираем нужный вид маркера, щелкаем по нему

3. Если среди символов нет нужного, создайте свой стиль маркеров. Для этого ниже библиотеки нажмите кнопку «Определить новый маркер».

   Если маркеры из библиотеки не понравились, нажимаем на кнопку «Определить новый маркер»

4. Нажмите кнопку «Символ» или «Рисунок» и выберите элемент из выпавшего списка.

   Нажимаем кнопки «Символ» или «Рисунок», выбираем нужный маркер, нажимаем «ОК»

Для отмены функции список с последующим сохранением текста выделите всю информацию списка и зажмите кнопку «Маркеры» сортировка удалится, а информация останется.

Выделяем всю информацию списка и зажимаем кнопку «Маркеры»

После нажатия кнопки «Маркеры» останется только текст

Чтобы удалить список вместе с содержимым, выделите текст в списке и зажмите кнопку «Delete», после чего нажмите кнопку «Маркеры».

Выделяем текст, нажимаем кнопку «Delete»

Создание списка в программе на Mac требует другого алгоритма действий:

1. Поставьте курсор в начале строчки.

   Устанавливаем курсор вначале строчки

2. В разделе «Главная» нажмите на стрелку рядом с маркерами.

   В разделе «Главная» нажимаем на стрелку рядом с маркерами

3. Найдите нужный стиль и начните работу.

   Выбираем нужный маркер, щелкаем на него

   Вводим текст, после каждой строчки нажимаем «Enter»

Форматирование перечня также предполагает возможность изменения расстояния между элементами списка.

1. Выделите все пункты списка.

   Выделяем все пункты списка

2. На панели инструментов выберите «Абзац».

   На панели инструментов в разделе «Абзац» щелкаем на стрелочку с дополнительным меню

3. Во вкладке «Отступы и интервалы» всплывшего окна выберите значение интервалов из стандартных или введите необходимые параметры.

   Во вкладке «Отступы и интервалы» выставляем свои параметры или оставляем по умолчанию, нажимаем «ОК»

Снимаем флажок с пункта «Не добавлять интервал между абзацами одного стиля», нажимаем «ОК»

Списки с нумерацией

Каждый элемент списка выделяется цифрой, нумерация автоматически корректируется. Чтобы создавать и редактировать списки, существует кнопка «Нумерация» в группе «Абзац». Также можно воспользоваться функцией «Нумерация» контекстного меню выбранного абзаца.

Параметры списка:

• Формат номера определяет, какой символ будет находиться возле каждого элемента.
• Стиль нумерации можно выбирать в зависимости от особенностей конкретного документа: арабские или римские цифры, прописные или и т. д.
• Поле «Начальное значение» позволяет выбрать цифру, с которой будет начинаться список.
• В том случае, когда необходимо создать аналогичный список, но пронумеровать его заново, удобно воспользоваться функцией «Начать новый список». Нужно выделить элементы и задать все параметры.

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

• В начале абзаца, перед вводом текста, нужно поставить «1.», затем «Пробел» или Tab. Абзац оформится как первый пункт списка.
• Поставив перед абзацем «1)», а затем нажав «Пробел» или Tab, пользователь создаст список другого типа.
• По аналогии оформляются списки с буквами. В строках нужно ввести с точкой или скобкой. После каждого абзаца необходимо нажимать «Пробел» или Tab.

Как поставить свою картинку маркера

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

Ul{
List-style: url(marker.png);
}

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

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

list-style-type

list-style-type:

disc
| circle
| square
| decimal
| lower-roman
| upper-roman
| lower-alpha
| upper-alpha
| none
;

Значение
:

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

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

Результат
:

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

Положение текста и маркера

Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).

inside	outside

Рис. 5. Размещение маркеров относительно текста

Чтобы управлять положением маркеров, применяется свойство list-style-position
. Оно имеет два значения: outside
— маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside
— маркеры являются частью текстового блока и отображаются в элементе списка (пример 5).

Пример 5. Изменение положения маркеров

Списки

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

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

Допустим у нас имеется нумерованный список OL (.our-list) такого вида:

1. Пункт 1
2. Пункт 2
3. Пункт 3

А нам необходимо, чтобы номера строк были без точек. Тогда нам необходимо прописать в css-коде следующие правила:

Our-list {
counter-reset: item; //item — переменная, которая будет содержать значение счетчика
list-style-type: none; // убираем нумерование списка
width: 150px; //необходимо задать ширину, чтобы отталкиваться от этого значения
}
.our-list li:before {
content: counter(item) «»; //заново вставляем счетчик пунктов уже другим способом и без точки
counter-increment: item; //увеличиваем значение счетчика
color: #ff0000; //можем задать другой цвет цифрам
}

В результате мы можем наблюдать следующее:

1. Пункт 1
2. Пункт 2
3. Пункт 3

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

1. Пункт 1
   Строка 2
   Строка 3
2. Пункт 2
   Строка 2
   Строка 3
3. Пункт 3
   Строка 2
   Строка 3

Я думаю, это не совсем то, что требуется. Получается, что в данном случае номер принадлежит первой строке пункта списка. Чтобы решить этот вопрос окончательно, стоит добавить еще 3 строки в css-код

Our-list {
counter-reset: item;
list-style-type: none;
width: 150px;
}
.our-list li:before {
content: counter(item) «»;
counter-increment: item;
color: #ff0000;
float:right; //делаем обтекание справа
position:relative; //и перемещаем цифры влево, чтобы они встали перед списком
left:-165px;
}

Доброго времени суток!

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

Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:

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

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

Оформление списков с помощью CSS-стилей

1. Тип маркера списка list-style-type

Свойство изменяет типа маркера или удаляет маркер
для маркированного и нумерованного списков. Наследуется.

Синтаксис

Ul {list-style-type: none;}
ul {list-style-type: square;}
ol {list-style-type: none;}
ol {list-style-type: lower-alpha;}
Рис. 1. Пример оформления маркированного и нумерованного списков

2. Изображения для элементов списка list-style-image

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

Синтаксис

Ul {list-style-image: url(«images/romb.png»);}
ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента

3. Местоположение маркера списка list-style-position

Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.

Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать
маркер списка CSS. Для этого есть свойство
list-style-type
. У него достаточно много значений. Часть значений применяется для
маркированного, другая часть для нумерованного списка.

Для маркированного списка:

list-style-type: disc
— в виде диска (по умолчанию)

list-style-type: circle
— в виде круга

list-style-type: square
— в виде квадрата

Для нумерованного списка

list-style-type: decimal
— арабские цифры (по умолчанию)

list-style-type: decimal-leading-zero
— арабские цифры c 0 впереди для чисел 1-9

list-style-type: upper-roman
— заглавные римские цифры

list-style-type: lower-roman
— строчные римские цифры

list-style-type: upper-latin
— заглавные латинские буквы

list-style-type: upper-alpha
— то же, что и upper-latin

list-style-type: lower-latin
— строчные латинские буквы

list-style-type: lower-alpha
— то же, что и lower-latin

list-style-type: lower-greek
— строчные греческие буквы

list-style-type: armenian
— армянские числа

list-style-type: georgean
— грузинские числа

list-style-type: none
— позволяет убрать маркеры списка. Для обоих списков

list-style-type: inherit
— значение принимается от родительского элемента.
Для обоих списков

Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:

Стиль: