Списки в CSS

«Списки в CSS» – пятый урок учебника CSS. Здесь мы обсудим создание и использование списков средствами CSS.

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

Параметры списков в CSS.

List–style–image – позволяет установить изображение в качестве маркера для списков в CSS.

none – используется маркер по умолчанию

url – в качестве маркера используется изображение, url адрес которого необходимо ввести в это поле, как в примере ниже:

div.oo1{ list – style – image : url(img/list_style_type_1.gif); }	Элемент 1 Элемент 2 Элемент 3
div.oo2{ list – style – image : url(img/list_style_type_2.gif); }	Элемент 1 Элемент 2 Элемент 3

List–style–position – определяет место размещения маркеров списка.

inside – маркер располагается внутри текста

outside – маркер располагается слева от текста

ul.oo3{ list – style – position : inside; }	Элемент 1 Элемент 2 Элемент 3
ul.oo4{ list – style – position : outside; }	Элемент 1 Элемент 2 Элемент 3

List–style–type – задает разнообразные маркеры для списков, которые вы можете видеть ниже:

none – маркер не используется
disc – в качестве маркера используется закрашенный круг
circle – в качестве маркера используется закрашенный круг
square – закрашенный квадрат
decimal – простые числа
decimal – leading – zero – 01, 02, 03 b .....
lower – roman – i, ii, iii, iv, v .....
upper – roman – (I, II, III, IV, V .....
lower – alpha – a, b, c, d, e .....
upper – alpha – A, B, C, D, E .....
lower – greek – альфа, бета, гамма .....
lower – latin – a, b, c, d, e .....
upper – latin – A, B, C, D, E .....
hebrew – еврейские числа
armenian – армянские числа
georgian – an, ban, gan .....
cjk – ideographic — идеографические числа
hiragana – Маркер — a, i, u, e, o, ka, ki, .....
katakana – A, I, U, E, O, KA, KI ......
hiragana – iroha – i, ro, ha, ni, ho, he, to .....
katakana – iroha – I, RO, HA, NI, HO, HE, TO .....

ul.oo5{ list – style – type : square; }	Элемент 1 Элемент 2 Элемент 3
ul.oo6{ list – style – type : upper – roman; }	Элемент 1 Элемент 2 Элемент 3
ul.oo7{ list – style – type : decimal; }	Элемент 1 Элемент 2 Элемент 3
ul.oo8{ list – style – type : decimal – leading – zero; }	Элемент 1 Элемент 2 Элемент 3

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

В следующий раз мы поговорим об одном из наиболее мощных CSS инструментов - позиционировании. CSS позиционирование позволяет достичь впечатляющих результатов в оформлении внешнего вида сайта, например разместить элемент в любом месте web страницы.

Наверх

Источник: Создание сайтов