Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи

Ретро газета в подарок
Архив

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



CSS фон
Position в CSS
       

Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам