Как сделать список в css

Добавил пользователь Alex
Обновлено: 10.09.2024

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

list-style-type

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

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

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

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

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

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

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

list-style-image

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

list-style-position

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

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

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

list-style

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

Свойство list-style-type указывает тип маркера элемента списка.

В следующем примере показаны некоторые из доступных маркеров элементов списка:

Пример

ul.b list-style-type: square;
>

ol.c list-style-type: upper-roman;
>

ol.d list-style-type: lower-alpha;
>

Примечание: некоторые из значений для неупорядоченных списков, а некоторые для упорядоченных списков.

Изображение как маркер элемента списка

Свойство list-style-image указывает изображение в качестве маркера элемента списка:

Пример

Расположение маркеров элементов списка

Свойство list-style-position указывает положение маркеров элементов списка (маркеров).

"список-стиль-позиция: снаружи;" означает, что пуля точек будет за пределами элемента списка. Начало каждой строки элемента списка будет выровнено по вертикали. Это значение по умолчанию:

Coffee - A brewed drink prepared from roasted coffee beans.
Tea
Coca-cola

"список-стиль-позиция: внутри;" означает, что пуля точек будет внутри элемента списка. Поскольку он является частью элемента списка, он будет частью текста и нажимаем текст в начале:

Coffee - A brewed drink prepared from roasted coffee beans.
Tea
Coca-cola

Пример

ul.a <
list-style-position: outside;
>

ul.b list-style-position: inside;
>

Удаление параметров по умолчанию

Пример

Список-Сокращенное свойство

Свойство list-style является сокращенным свойством. Он используется для задания всех свойств списка в одном объявлении:

Пример

При использовании сокращенного свойства порядок значений свойств:

list-style-type (если указан стиль List-Image, значение этого свойства будет отображаться, если изображение по какой-либо причине не может быть отображено)
list-style-position (указывает, должны ли маркеры элементов списка появляться внутри или вне потока содержимого)
list-style-image (указывает изображение в качестве маркера элемента списка)

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

Стиль список с цветами

Мы можем также стиль списков с цветами, чтобы сделать их выглядеть немного более интересным.

Пример

Другие примеры

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

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

Все различные маркеры списка элементов для списков
В этом примере демонстрируются все различные маркеры элементов списка в CSS.

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

Самый удобный способ поменять список: изменить маркер. Маркером называется какая-либо метка (в маркированном списке) или символ (в нумерованном списке), который находится рядом с каждым элементом списка. Чтобы изменить маркер, необходимо применить свойство list-style-type для списка, заданного тегами li , ol или ul или, если к элементу применено свойство display: list-item . Свойство list-style-type имеет следующие значения:

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

disc – маркер по умолчанию. Выглядит как заполненный круг;
square – маркер в виде квадрата;
circle – обычный круг;

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

armenian – армянская нумерация;
cjk-ideographic – простые идеографические числа;
decimal – десятичное число;
decimal-leading-zero – десятичное число с ведущим нулем;
georgian – грузинская нумерация;
hebrew – еврейская нумерация;
hiragana – нумерация Хирагана;
hiragana-iroha – традиционная нумерация Хирагана;
katakana – нумерация Катакана;
katakana-iroha – традиционная нумерация Катакана-ироха;
lower-alpha – латинский алфавит в нижнем регистре (a, b, c, d …);
lower-greek – греческий алфавит в нижнем регистре (a, v, g, d …);
lower-latin – аналог lower-alpha ;
lower-roman – римские числа в нижнем регистре (i, ii, iii, iv, …);
upper-alpha – латинский алфавит в верхнем регистре (A, B, C, D …);
upper-greek – греческий алфавит в верхнем регистре;
upper-latin – аналог upper-alpha ;
upper-roman – римские числа в верхнем регистре (I, II, III, IV, …);
none – без маркера.

Рассмотрим пример, в котором заменим стандартные маркеры квадратными метками. Далее HTML код.

Язык CSS предоставляет большой набор стилей для HTML тегов. За урок мы научимся работать со списками и из обычного списка сделаем полноценное меню для сайта.

Видеоурок

На самом деле, списки это очень важная тема в HTML и CSS. Благодаря спискам мы можем делать не только перечень чего-либо, но также создавать меню сайта.

Как сделать меню сайта на CSS?

Ниже представлено меню, которое мы можем создать лишь при помощи CSS и HTML.

Для создания подобного меню вам не потребуются какие-либо особые знания. Для начала давайте рассмотрим сам HTML:

Здесь все просто. Есть один список и в нем вложен еще один список, который будет раскрываться при наведении мыши на нужную ячейку меню. Теперь давайте рассмотрим весь CSS код:

Использование слоев

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

У нас есть два блока, которые расположены следующим образом:

Мы видим, что второй блок просто перекрыл первый блок. На данный момент у нас в коде еще не прописаны слои и выглядит наш CSS код следующим образом:

Теперь добавим новое свойство к первому блоку: z-index: 1 . Поскольку наш второй блок вообще не имеет никакого слоя, то он автоматически равен нулевому слою. Первый блок имеет слой на 1 выше, а значит отображаться он будет поверх второго блока. Важно также отметить, что оба блока должны иметь свойство position: relative . Вот что у нас получилось:

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

Читайте также: