Стили списка

CSS предоставляет возможность изменения внешнего вида списков с помощью следующих свойств:

Свойство CSS

Описание

list-style-type

Указывает вид маркера для элементов списка. Оно позволяет изменить или убрать маркеры HTML списка с помощью значений:

аrmenian

Армянские цифры.

circle

Круг.

cjk-ideographic

Идеографические номера.

decimal

Десятичные цифры.

decimal-leading-zero

Десятичные цифры, начинающиеся с нуля (01, 02, 03...).

disc

Диск.

georgian

Грузинские цифры.

hebrew

Нумерация Иврита.

hiragana

Нумерация Хирагана.

hiragana-iroha

Нумерация Хирагана-ироха.

katakana

Нумерация Катакана.

katakana-iroha

Нумерация Катакана-ироха.

lower-alpha

Строчные буквы латинского алфавита (a, b, c, d, e...).

lower-greek

Строчные греческие буквы.

lower-latin

Строчные латинские буквы(a, b, c, d, e...).

lower-roman

Маленькие римские цифры (i, ii, iii, iv, v...).

none

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

square

Квадрат.

upper-alpha

Прописные буквы латинского алфавита (A, B, C, D, E...).

upper-latin

Прописные латинские буквы (A, B, C, D, E...).

upper-roman

Прописные римские цифры(I, II, III, IV, V...).

Пример:

list-style-type: lower-greek;

list-style-image

Заменяет стандартный маркер элемента списка на изображение с помощью значений:

url()

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

none

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

Пример:

list-style-image: url('sqpurple.gif');

padding-left

Устанавливает расстояние (его также называют "внутренний отступ") между левым внутренним краем рамки элемента и его содержимым. Внутренний отступ влияет на общий размер элемента. Значения:

Размер px

Определяет размер отступа в единицах измерения, используемых в CSS.

Размер %

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

Пример:

padding-left: 100px;

padding-left: 20%;

list-style-position

 Определяет расположение маркера относительно элемента списка с помощью значений:

inside

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

outside

Указывает, что маркер расположен за границей элемента списка.

inherit

Указывает, что значение наследуется от родительского элемента.

Пример:

list-style-position: inside;

Пример:

<html>

<head>

<meta charset="UTF-8">

<title> ОСНОВНЫЕ ТЕГИ HTML </title>

</head>

<body style="color: rgb(204, 51, 255);">

<ul style="list-style-type: lower-greek; padding-left:20px;">

<li>Информационные технологии</li>

<li>Программирование

<ul style="list-style-type: hebrew; padding-left:20%;">

<li>Системное программирование</li>

<li>Web-программирование

<ul style="list-style-type: hiragana; list-style-position: inside;">

<li>Клиентский язык программирования</li>

<li> Серверный язык программирования </li>

</ul>

</li>

<li>Офисное</li>

</ul>

</li>

<li>Технологии баз данных</li>

</ul>

</body>

</html

Рис. 4