Списки в 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); } |
|
| div.oo2{ list – style – image : url(img/list_style_type_2.gif); } |
|
List–style–position – определяет место размещения маркеров списка.
inside – маркер располагается внутри текста
outside – маркер располагается слева от текста
| ul.oo3{ list – style – position : inside; } |
|
| ul.oo4{ list – style – position : outside; } |
|
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; } |
|
| ul.oo6{ list – style – type : upper – roman; } |
|
| ul.oo7{ list – style – type : decimal; } |
|
| ul.oo8{ list – style – type : decimal – leading – zero; } |
|
Сегодня мы разобрались с оформлением списков средствами CSS. CSS позволяет не только настроить внешний вид списков, но также применить к ним другие методы форматирования, которые были рассмотрены в предыдущих уроках учебника (например наложение фона).
В следующий раз мы поговорим об одном из наиболее мощных CSS инструментов — позиционировании. CSS позиционирование позволяет достичь впечатляющих результатов в оформлении внешнего вида сайта, например разместить элемент в любом месте web страницы.