HTML+CSS Стили для ссылок

Уроки HTML+CSS: Стили для списков

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

disc Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок.
armenian Традиционная армянская нумерация.
circle В качестве маркера выступает незакрашенный кружок.
cjk-ideographic Идеографическая нумерация.
decimal 1, 2, 3, 4, 5, …
decimal-leading-zero 01, 02, 03, 04, 05, …
georgian Традиционная грузинская нумерация.
hebrew Традиционная еврейская нумерация.
hiragana Японская нумерация: a, i, u, e, o, …
hiragana-iroha Японская нумерация: i, ro, ha, ni, ho, …
katakana Японская нумерация: A, I, U, E, O, …
katakana-iroha Японская нумерация: I, RO, HA, NI, HO, …
lower-alpha a, b, c, d, e, …
lower-greek Строчные символы греческого алфавита.
lower-latin a, b, c, d, e, …
lower-roman i, ii, iii, iv, v, …
none Маркер отсутствует.
square В качестве маркера выступает закрашенный или незакрашенный квадрат.
upper-alpha A, B, C, D, E, …
upper-latin A, B, C, D, E, …
upper-roman I, II, III, IV, V, …
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
ul{list-style-type: none;}
  • Первый элемент
  • Второй элемент
ul{list-style-type: square;}
  • Первый элемент
  • Второй элемент
ul{list-style-type: lower-latin;}
  • Первый элемент
  • Второй элемент
ul{list-style-type: lower-roman;}
  • Первый элемент
  • Второй элемент
ul{list-style-type: upper-alpha;}
  • Первый элемент
  • Второй элемент
ul{list-style-type: upper-roman;}
  • Первый элемент
  • Второй элемент

list-style-image – изображения для элементов списка

url(url) Путь к изображению.
none значение по умолчанию, означает отсутствие изображения. Также убирает изображение для элемента из группы элементов с установленным изображением-маркером.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

list-style-position – местоположение маркера списка

outside Значение по умолчанию. Маркер располагается вне блока с текстом.
inside Маркер списка изображается в одном блоке с текстом. Последующие строки текста будут располагаться под значком маркера, т.е. маркер будет обтекаться текстом.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

 

Оставить комментарий

avatar
  Подписаться  
Уведомление о