Как увеличить посещаемость любого сайта минимум в два раза? Секретное руководство внутри! Получить руководствоX

Eltis-book > CSS учебник > Списки в CSS

Списки в 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 страницы.

Исключительно
для моих подписчиков доступен мощный мини-курс по проектированию SEO текстов, которые сами выходят в ТОП!

Подписывайся на рассылку и получишь
это руководство полностью БЕСПЛАТНО