Разработка магазинов с гарантией попадания в ТОП поисковых систем

Узнать подробнее
Eltisbook > 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 – задает разнообразные маркеры для списков, которые вы можете видеть ниже:

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