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

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

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

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Наследует значение свойства от родительского элемента.
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Наследует значение свойства от родительского элемента.

 

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

Последние записи

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

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