CSS-LISTS
list-style
list-style — универсальное свойство, которое определяет тип маркеров списка, их положение или использование изображений вместо маркеров.
Значения имеют следующий порядок:
первым указывается тип маркера (list-style-type),
затем позиция (list-style-position),
в конце указывается адрес изображения, которое будет отображаться в качестве маркера (list-style-image):
Значения разделяются запятыми. Ни один из них не является обязательным, любой можно опустить.
Краткая информация:
Նախասահմանված արժեքը | Здесь ничего нет |
Ժառանգվում են | Нет |
Կիրառվում են | <dd>, <dt>, <li>, <ol> <ul>, а также все элементы, которые включают в себя: display:list-item |
Ենթարկվում է անիմացիայի | Нет |
ul {
list-style: circle inside;
}
hayti
В будущем мы будем изучать следующие языки:
- Бутстрап/Sass
- Javascript:
- jQuery:
- Реагировать:
list-style-type
list-style-type – սահմանում է тип маркеров списка. Используется только тогда, когда list-style-imageравно none из
Маркеры бывают разные մարկերային ցուցակով(<ul>) и: համարակալված ցուցակով(<ol>).
Краткие подробности:
Նախասահմանված արժեքը | disc-
decimal-
|
Ժառանգվում են | Да |
Կիրառվում են | <li>, <ol> <ul>, а также все элементы, которые включают в себя: display:list-item |
Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
Մարկերային ցուցակ`
circle — круглые маркеры
disc — маркеры в виде точек
square — маркеры в форме квадрата
Համարակալված ցուցակ՝
armenian - Армянская буквенная нумерация (A, B, C, D...)
decimal - Арабские цифры (1, 2, 3, 4...)
decimal-leading-zero - Арабские цифры с ведущим нулем для чисел меньше десяти (01, 02, 03, 04...)
georgian - Нумерация грузинских букв
lower-alpha или lower-latin - Латинская строчная нумерация (a, b, c, d....)
lower-greek - нумерация строчными греческими буквами (α, β, γ, δ,...)
lower-roman – нумерация римскими цифрами: латинские строчные буквы (i, ii, iii, iv, v…..)
upper-alpha или upper-latin - нумерация латинскими заглавными буквами (A, B, C, D....)
upper-roman - нумерация римскими цифрами: латинская заглавная буква (I, II, III, IV, V....)
none – отменяет маркеры для списка.
ul {
list-style-type: armenian;
}
list-style-position
list-style-position – определяет положение маркеров вместе с текстом или отдельно от текста.
Краткая информация:
Նախասահմանված արժեքը | outside |
Ժառանգվում են | Да |
Կիրառվում են | <dd>, <dt>, <li>, <ol> <ul>, а также все элементы, которые включают в себя: display:list-item |
Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
inside - маркеры являются частью текста.
outside - маркеры размещаются отдельно от текста.
list-style-image
list-style-image – устанавливает вместо маркеров любую картинку.
Краткая информация:
Նախասահմանված արժեքը | none |
Ժառանգվում են | Да |
Կիրառվում են | <dd>, <dt>, <li>, <ol> <ul>, а также все элементы, которые включают в себя: display:list-item |
Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
none - list-style-image Свойство наследуется всеми дочерними элементами. Если вам нужно установить маркер, не являющийся изображением, любому из дочерних элементов, то данному элементу list-style-imageдолжно быть равно noneиз
url() - определяет относительный или абсолютный адрес данного изображения. адрес может быть указан в одинарных или двойных кавычках ( ' или « ) или без них.
ul {
list-style-image: url(icon20.png);
}
.li01 {
list-style-image: none;
}
hayti
В будущем мы будем изучать следующие языки:
- Бутстрап/Sass
- Javascript:
- jQuery:
- Реагировать: