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

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

В этой записи мы с вами рассмотрим стили которые применяются для списков. С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка, добавить изображение для маркера, а также изменить местоположение маркера.

О HTML списках можно прочитать здесь – http://prog-time.ru/uroki-html-css-spiski/

list-style-type – указывает тип маркера

discЗначение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок.
armenianТрадиционная армянская нумерация.
circleВ качестве маркера выступает незакрашенный кружок.
cjk-ideographicИдеографическая нумерация.
decimal1, 2, 3, 4, 5, …
decimal-leading-zero01, 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-alphaa, b, c, d, e, …
lower-greekСтрочные символы греческого алфавита.
lower-latina, b, c, d, e, …
lower-romani, ii, iii, iv, v, …
noneМаркер отсутствует.
squareВ качестве маркера выступает закрашенный или незакрашенный квадрат.
upper-alphaA, B, C, D, E, …
upper-latinA, B, C, D, E, …
upper-romanI, II, III, IV, V, …
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Часто списки используют для создания меню. Но для создания меню отключают маркировку с помощью свойства list-style-type и значения none

ol {
list-style-type: none;//убирает маркеры
}
  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

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

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

Информация была взята с сайта – https://html5book.ru

Хочешь научиться программировать?!

Заходи в нашу группу Вконтакте, там много полезной и интересной информации

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

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