Списки CSS

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

Типы HTML списка

В HTML есть три типа списков:

• unordered list — список элементов, каждый из которых помечен маркером.

• ordered list — список элементов, каждый из которых помечен числом.

• определенный список - списком элементов, в котором содержится описание каждого элемента.

Для получения дополнительной информации о списках, пожалуйста, ознакомьтесь сHTML списокруководство.

CSS стилизация списка

CSS предоставляет несколько свойств для стилизации наиболее常用的 unordered list и ordered list. Эти CSS списки свойств обычно позволяют вам:

• Контроль формы или внешнего вида маркера.

• Определение изображения маркера вместо точки или числа.

• Установка расстояния между маркером и текстом списка.

• определяет, будет ли маркер или точка出现在 внутри или снаружи рамки, содержащей unordered list или ordered list.

тип стиля списка

по умолчанию,ordered listэлементы помечены арабскими числами (1, 2, 3 и т.д.), а вВ unordered listэлементы списка помечены круговыми маркерами. Но вы можете использовать атрибут list-style-type, чтобы изменить этот тип маркера по умолчанию на любой другой, например, круговой, квадратный, римский, латинский и т.д.

ul {
　　　　list-style-type: square;
}
ol {
　　　　list-style-type: upper-roman;
}

Изменение位置的 списка маркеров

По умолчанию, маркеры списка расположены снаружи рамки элемента списка. Но вы можете использовать атрибут list-style-position, чтобы определить, будет ли маркер или точка出现在 внутри или снаружи рамки элемента списка.

Этот атрибут принимает значения inside или outside, и по умолчанию это outside. Если использовать значение inside, то эти строки будут окружены маркером снизу, а не отступлены.

ul.in li {
　　　　list-style-position: inside;
}
ul.out li {
　　　　list-style-position: outside;
}

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

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

В следующем примере правила стиля присваивают всем элементам unordered list прозрачное изображение PNG "arrow.png" в качестве маркера списка.

ul li {
　　　　list-style-image: url("arrow.png");
}

Пример, приведенный выше, не всегда produces the same output in all browsers. Internet Explorer и Opera display image markers slightly higher than Firefox, Chrome и Safari.

Кросс-браузерное решение для маркеров изображений

При использовании свойства list-style-image для изображения маркера, маркер не может быть точно выровнен с текстом в браузере. Решением является возможность через background-image Правильное выравнивание изображения маркера CSS свойства. Сначала установите список без маркеров. Затем определите для элемента list нерепетируемое фоновое изображение.

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

ul {
　　　　list-style-type: none;
}
ul li {
　　　　background-image: url("arrow.png");
　　　　background-position: 0px 5px;　　　　/* X-pos Y-pos (от верхнего левого угла) */
　　　　background-repeat: no-repeat;
　　　　padding-left: 20px;
}

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

Свойство list-style является сокращенным свойством, которое определяет все три свойства list-style-type, list-style-image и list-style-position в одном месте.

Эта стильная правило устанавливает список маркеров для выровненных элементов списка в верхнем латинском шрифте, которые появляются перед элементами списка:

ol {
　　　　list-style: upper-latin inside;
}