2020 OVERFLOW. DISPLAY. ПСЕВДОЭЛЕМЕНТЫ ИНФОРМАЦИОННО-ТЕХНОЛОГИЧЕСКИЙ МОДУЛЬ БФУ

линии шрифта. При обычных обстоятельствах расстояние между строками зависит от

вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.
Синтаксис
line-height: множитель | значение | проценты | normal
Значения
Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.
normal расстояние между строк вычисляется автоматически.

или ячейки таблицы.
Синтаксис
vertical-align: baseline | bottom | middle | sub

| super | text-bottom | text-top | top | значение | проценты
Значения
baseline выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
bottom выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
middle выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
sub элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
super элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
text-bottom нижняя граница элемента выравнивается по самому нижнему краю текущей строки.

текущей строки.
top выравнивание верхнего края элемента по верху самого высокого

элемента строки.
В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height, при этом 0% аналогично значению baseline.
Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.
baseline выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom выравнивает по нижнему краю ячейки.
middle выравнивает по середине ячейки.
top выравнивает содержимое ячейки по ее верхнему краю.

положение, а также изображение, которое будет использоваться в качестве маркера.

Для подробного ознакомления смотрите информацию о каждом свойстве list-style-type, list-style-position и list-style-image отдельно.
Синтаксис
list-style: list-style-type || list-style-position || list-style-image
Значения
Любые комбинации трех значений определяющих стиль маркеров, они разделяются между собой пробелом. Комбинации значений должны следовать в указанном порядке: вначале идет тип маркера, затем положение и картинка. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.

свойство используется только в случае, когда значение list-style-image установлено как

none. Маркеры различаются для маркированного списка (тег

) и нумерованного (тег
).
Синтаксис
list-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none

маркированному или нумерованному.
Маркированный список
circle маркер в виде кружка.
disc маркер в

виде точки.
square маркер в виде квадрата.

Нумерованный список
armenian традиционная армянская нумерация.
decimal арабские числа (1, 2, 3, 4,...).
decimal-leading-zero арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...).
georgian традиционная грузинская нумерация.
lower-alpha строчные латинские буквы (a, b, c, d,...).
lower-greek строчные греческие буквы (α, β, γ, δ,...).
lower-latin это значение аналогично lower-alpha.
lower-roman римские числа в нижнем регистре (i, ii, iii, iv, v,...).
upper-alpha заглавные латинские буквы (A, B, C, D,...).
upper-latin это значение аналогично upper-alpha.
upper-roman римские числа в верхнем регистре (I, II, III, IV, V,...).
none отменяет маркеры для списка.

два значения: outside — маркер вынесен за границу элемента списка

(рис. 1) и inside — маркер обтекается текстом (рис. 2).
Синтаксис
list-style-position: inside | outside
Значения
inside Маркер является частью текстового блока и отображается в элементе списка.
outside Текст выравнивается по левому краю, а маркеры размещаются за пределами текстового блока.

списка. Это свойство наследуется, поэтому для отдельных элементов списка для

восстановления маркера используется значение none.
Синтаксис
list-style-image: none | url('путь к файлу')
Значения
none отменяет изображение в качестве маркера для родительского элемента.
url относительный или абсолютный путь к графическому файлу. Значение можно указывать в одинарных, двойных кавычках или без них.

отображается в браузере в кавычках.
Синтаксис
Текст

quotes устанавливает тип кавычек, который применяется

в тексте документа.
Синтаксис
quotes: "левая кавычка" "правая кавычка" | none

2020

ДОПОЛНЕНИЕ

которое позволяет стилизовать определённую часть выбранного элемента.
2020
ПСЕВДОЭЛЕМЕНТЫ
Селектор::псевдоэлемент {
свойство: значение;
--------
свойство: значение;
}
Селектор

дополнительные теги::псевдоэлемент {
свойство: значение;
--------
свойство: значение;
}

в тексте отсутствует. Применяется совместно с псевдоэлементами :after и :before,

они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются.
Синтаксис
content: строка | attr(параметр) | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | none
Значения
Строка текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (§ например), будут отображаться как есть, т.е. простым текстом (§, а не §).

скобках. Например, a:after {content:attr(href)} добавит после ссылки её адрес, т.е.

значение атрибута href. Если указанного атрибута нет, вернется пустая строка.
open-quote вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes.
close-quote вставляет закрывающую кавычку.
no-open-quotes отменяет добавление открывающей кавычки.
no-close-quote отменяет добавление закрывающей кавычки.
url абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется.
none не добавляет никакое содержание.
normal задается как none для псевдоэлементов ::before и ::after.

после содержимого элемента, к которому он добавляется. Псевдоэлемент ::after работает

совместно со свойством content.
Для ::after характерны следующие особенности.
При добавлении ::after к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block.
При добавлении ::after к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
Синтаксис
селектор::after { … } или селектор доп теги::after { … }

элемента, к которому он добавляется. Работает совместно со свойством content.
Для

::before характерны следующие особенности. При добавлении ::before к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block. При добавлении ::before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline. ::before наследует стиль от элемента, к которому он добавляется.
Синтаксис
селектор::before { … } или селектор доп теги::before { … }

к которому добавляется. К этому псевдоэлементу могут применяться только стилевые

свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
Синтаксис
селектор::first-letter { ... } или селектор доп теги::first-letter { ... }

::first-line или :first-line задает стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.
Синтаксис
селектор::first-line { ... } или селектор доп теги::first-line { ... }

::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background и background-color.
Синтаксис
селектор::selection { ... } или селектор доп теги::selection { ... }