Интересный блог Виталия Пискарева

Учебник CSS

Свойства CSS

A

align-content Указывает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство
align-items Задает выравнивание элементов в гибком контейнере
align-self Задает выравнивание для выбранных элементов в гибком контейнере
all Сбрасывает все свойства (кроме unicode-bidi и direction)
animation Сокращенное свойство для всех animation-* свойства
animation-delay Задает задержку запуска анимации
animation-direction Определяет, должна ли анимация воспроизводиться вперед, назад или в альтернативных циклах
animation-duration Указывает, сколько времени должна занять анимация для завершения одного цикла
animation-fill-mode Задает стиль для элемента, когда анимация не воспроизводится (до начала, после окончания или и то, и другое)
animation-iteration-count Указывает, сколько раз должна воспроизводиться анимация
animation-name Задает имя анимации @keyframes
animation-play-state Указывает, выполняется анимация или приостановлена
animation-timing-function Задает кривую скорости анимации

 

B

backface-visibility Определяет, должна ли задняя грань элемента быть видимой при обращении к пользователю
background Сокращенное свойство для всех свойств фона
background-attachment Устанавливает, будет ли фоновое изображение прокручивается с остальной частью страницы или фиксированный
background-blend-mode Задает режим наложения каждого слоя фона (цвет/изображение)
background-clip Определяет, как далеко должен простираться фон (цвет или изображение) внутри элемента
background-color Задает цвет фона элемента
background-image Задает одно или несколько фоновых изображений для элемента
background-origin Указывает исходное положение фонового изображения
background-position Определяет положение фонового изображения
background-repeat Устанавливает, будет ли повторяться фоновое изображение
background-size Определяет размер фоновых изображений
border Сокращенное свойство для ширины границы, стиля границы и цвета границы
border-bottom Сокращенное свойство для ширины нижней границы, стиля нижней границы и цвета нижней границы
border-bottom-color Задает цвет нижней границы
border-bottom-left-radius Определяет радиус границы нижнего левого угла
border-bottom-right-radius Определяет радиус границы нижнего правого угла
border-bottom-style Задает стиль нижней границы
border-bottom-width Задает ширину нижней границы
border-collapse Задает, должны ли границы таблицы сворачиваться в одну границу или разделяться
border-color Задает цвет четырех границ
border-image Сокращенное свойство для всех свойств
border-image-outset Задает величину, на которую область изображения границы выходит за пределы рамки
border-image-repeat Указывает, следует ли повторять, округлять или растягивать изображение границы
border-image-slice Указывает, как разрезать изображение границы
border-image-source Указывает путь к изображению, которое будет использоваться в качестве границы
border-image-width Задает ширину изображения границы
border-left Задает границу слева всем элементам
border-left-color Задает цвет левой границы
border-left-style Задает стиль левой границы
border-left-width Задает ширину левой границы
border-radius Задает радиус для четырех границ
border-right Задает границу справа всем элементам
border-right-color Задает цвет правой границы
border-right-style Задает стиль правой границы
border-right-width Задает ширину правой границы
border-spacing Задает расстояние между границами соседних ячеек
border-style Задает стиль четырех границ
border-top Сокращенное свойство для ширины верхней границы, стиля верхней границы и цвета верхней границы
border-top-color Задает цвет верхней границы
border-top-left-radius Определяет радиус границы верхнего левого угла
border-top-right-radius Определяет радиус границы верхнего правого угла
border-top-style Задает стиль верхней границы
border-top-width Задает ширину верхней границы
border-width Задает ширину четырех границ
bottom Устанавливает положение элементов в нижней части родительского элемента
box-decoration-break Задает поведение фона и границы элемента в page-break, или, для in-line элемента, line-break
box-shadow Присоединяет одну или несколько теней к элементу
box-sizing Определяет, как вычисляются ширина и высота элемента: должны ли они включать отступы и границы, или нет
break-after Указывает поведение разрыва страницы, столбца или региона после созданного поля
break-before Указывает поведение разрыва страницы, столбца или региона перед сгенерированным полем
break-inside Указывает поведение разрыва страницы, столбца или региона внутри созданного поля

 

C

caption-side Указывает расположение заголовка таблицы
caret-color Задает цвет курсора (курсора) во входных данных, текстовых областях или любом редактируемом элементе
@charset Указывает кодировку символов, используемую в таблице стилей
clear Указывает, на каких сторонах элемента плавающие элементы не допускаются к плаванию
clip Клипы абсолютно расположенный элемент
color Задает цвет текста
column-count Указывает количество столбцов, на которые должен быть разделен элемент
column-fill Указывает, как заполнять столбцы, сбалансированные или нетТ
column-gap Определяет зазор между столбцами
column-rule Сокращенное свойство для всех свойств column-rule
column-rule-color Задает цвет правила между столбцами
column-rule-style Задает стиль правила между столбцами
column-rule-width Задает ширину правила между столбцами
column-span Указывает, сколько столбцов должен охватывать элемент
column-width Задает ширину столбца
columns Сокращенное свойство для ширины столбца и количества столбцов
content Используется с псевдо-элементами: before и: after для вставки сгенерированного содержимого
counter-increment Увеличивает или уменьшает значение одного или нескольких CSS-счетчиков
counter-reset Создает или сбрасывает один или несколько счетчиков CSS
cursor Указывает курсор мыши будет отображаться при наведении на элемент

 

D

direction Задает направление текста направление записи
display Указывает, как должен отображаться определенный HTML-элемент

 

E

empty-cells Указывает, следует ли отображать границы и фон пустых ячеек в таблице

 

F

filter Определяет эффекты (например, размытие или смещение цвета) на элементе перед отображением элемента
flex Сокращенное свойство для flex-grow, flex-shrink, flex-basis свойств
flex-basis Указывает начальную длину гибкого элемента
flex-direction Указывает направление гибких элементов
flex-flow Сокращенное свойство для свойств flex-direction и flex-wrap
flex-grow Указывает, насколько элемент будет расти относительно остальных
flex-shrink Указывает, как элемент будет сжиматься относительно остальных
flex-wrap Указывает, следует ли переносить гибкие элементы
float Указывает, должно ли поле перемещаться
font Сокращенное свойство для стиля шрифта font-style, font-variant, font-weight, font-size/line-height, font-family
@font-face Правило, позволяющее веб-сайтам загружать и использовать шрифты, отличные от» веб-безопасных » шрифтов
font-family Задает шрифт для текста
font-feature-settings Позволяет управлять расширенными типографскими функциями шрифтов OpenType
@font-feature-values Позволяет авторам использовать общее имя в font-variant-alternate для функции, активированной по-разному в OpenType
font-kerning Управляет использованием информации Кернинга (как расположены буквы)
font-language-override Управляет использованием языковых символов в гарнитуре шрифта
font-size Определяет размер шрифта текста
font-size-adjust Сохраняет удобочитаемость текста при резервном выборе шрифта
font-stretch Выбор нормальной, сжатой или развернутой грани из семейства шрифтов
font-style Задает стиль шрифта для текста
font-synthesis Элементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы браузером
font-variant Указывает, должен ли текст отображаться small-caps мелким шрифтом
font-variant-alternates Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-feature-values
font-variant-caps Управляет использованием альтернативных символов заглавных букв
font-variant-east-asian Управляет использованием альтернативных символов для восточноазиатских сценариев (e.G японский и китайский языки)
font-variant-ligatures Управляет тем, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым они применяются
font-variant-numeric Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров
font-variant-position Управляет использованием альтернативных символов меньшего размера, расположенных в виде верхнего или нижнего индекса относительно базовой линии шрифта
font-weight Задает вес шрифта

 

G

grid Сокращенное свойство для grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow
grid-area Задает имя элемента сетки, и это свойство сокращенное свойство для grid-row-start, grid-column-start, grid-row-end, grid-column-end
grid-auto-columns Задает размер столбца по умолчанию
grid-auto-flow Указывает способ вставки автоматически размещаемых элементов в сетку
grid-auto-rows Задает размер строки по умолчанию
grid-column Сокращенное свойство для grid-column-start, grid-column-end
grid-column-end Указывает, где заканчивается элемент сетки
grid-column-gap Определяет размер зазора между столбцами
grid-column-start Указывает, с чего начать элемент сетки
grid-gap Сокращенное свойство для grid-row-gap и grid-column-gap
grid-row Сокращенное свойство для grid-row-start и the grid-row-end
grid-row-end Указывает, где заканчивается элемент сетки
grid-row-gap Определяет размер зазора между строками
grid-row-start Указывает, с чего начать элемент сетки
grid-template Сокращенное свойство для grid-template-rows, grid-template-columns и grid-areas
grid-template-areas Указывает способ отображения столбцов и строк с помощью именованных элементов сетки
grid-template-columns Указывает размер столбцов и количество столбцов в макете сетки
grid-template-rows Задает размер строк в макете сетки

 

H

hanging-punctuation Указывает, может ли знак пунктуации располагаться за пределами поля строки
height Задает высоту элемента
hyphens Задает способ разделения слов для улучшения расположения абзацев

 

I

image-rendering Подсказывает браузеру, какие аспекты изображения наиболее важны для сохранения при масштабировании
@import Позволяет импортировать таблицу стилей в другую таблицу стилей
isolation Определяет, должен ли элемент создавать новое содержимое стека

 

J

justify-content Указывает выравнивание между элементами в гибком контейнере, если элементы не используют все доступное пространство

 

K

@keyframes Указывает код анимации

 

L

left Указывает левое положение позиционированного элемента
letter-spacing Увеличивает или уменьшает расстояние между символами в тексте
line-break Определяет, как / если ломать линии
line-height Установка высоты линии
list-style Задает все свойства списка в одном объявлении
list-style-image Задает изображение в качестве маркера элемента списка
list-style-position Задает позицию элемента списка маркеров (пункты)
list-style-type Указывает тип маркера элемента списка

 

M

margin Устанавливает все свойства полей в одном объявлении
margin-bottom Устанавливает нижнее поле элемента
margin-left Устанавливает левое поле элемента
margin-right Задает правое поле элемента
margin-top Устанавливает верхнюю границу элемента
max-height Задает максимальную высоту элемента
max-width Задает максимальную ширину элемента
@media Устанавливает правила стиля для различных типов носителей / устройств / размеров
min-height Задает минимальную высоту элемента
min-width Задает минимальную ширину элемента
mix-blend-mode Указывает, как содержимое элемента должно сочетаться с его прямым родительским фоном

 

O

object-fit Указывает, как содержимое заменяемого элемента должно быть установлено в поле, заданном используемыми высотой и шириной
object-position Указывает выравнивание замененного элемента внутри его коробки
opacity Задает уровень непрозрачности для элемента
order Устанавливает порядок гибкого элемента относительно остальных
orphans Задает минимальное количество строк, которые должны оставаться внизу страницы при разрыве страницы внутри элемента
outline Сокращенное свойство для outline-width, outline-style, outline-color
outline-color Задает цвет контура
outline-offset Смещает контур и выводит его за границу
outline-style Задает стиль контура
outline-width Задает ширину контура
overflow Указывает, что происходит, если содержимое переполняет поле элемента
overflow-wrap Указывает, может ли браузер прерывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы поместиться в содержащее ее поле)
overflow-x Указывает, следует ли обрезать левый/правый края содержимого, если оно переполняет область содержимого элемента
overflow-y Указывает, следует ли обрезать верхний / нижний края содержимого, если оно переполняет область содержимого элемента

 

P

padding Сокращенное свойство для всех свойств padding
padding-bottom Установка нижнего отступа элемента
padding-left Задает левое заполнение элемента
padding-right Задает правое заполнение элемента
padding-top Установка верхнего отступа элемента
page-break-after Задает поведение разрыва страницы после элемента
page-break-before Задает поведение разрыва страницы перед элементом
page-break-inside Задает поведение page-breake внутри элемента
perspective Дает 3D-позиционированному элементу некоторую перспективу
perspective-origin Определяет, в какой позиции пользователь смотрит на 3D-позиционированный элемент
pointer-events Определяет, реагирует ли элемент на события указателя
position Определяет тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный) (static, relative, absolute и fixed)

 

Q

quotes Задает тип кавычек для внедренных предложений

 

R

resize Определяет, если (и как) элемент изменяется пользователем
right Определяет правое положение расположенного элемента

 

S

scroll-behavior Указывает, следует ли плавно анимировать положение прокрутки в прокручиваемом окне вместо прямого перехода

 

T

tab-size Задает ширину символа табуляции
table-layout Определяет алгоритм, используемый для размещения ячеек, строк и столбцов таблицы
text-align Задает выравнивание текста по горизонтали
text-align-last Описывает выравнивание последней строки блока или строки непосредственно перед принудительным разрывом строки при text-align и «justify»
text-combine-upright Указывает сочетание нескольких символов в один символ
text-decoration Определяет украшение добавленное к тексту
text-decoration-color Задает цвет оформления текста
text-decoration-line Определяет тип строки в текстовом оформлении
text-decoration-style Задает стиль строки в текстовом оформлении
text-indent Задает отступ первой строки в текстовом блоке text-block
text-justify Указывает метод выравнивания, используемый при выравнивании текста «justify»
text-orientation Определяет ориентацию текста в строке
text-overflow Указывает, что должно произойти, когда текст переполняет содержащий элемент
text-shadow Добавляет тень к тексту
text-transform Управляет заглавными буквами текста
text-underline-position Определяет положение подчеркивания, которое задается с помощью text-decoration
top Определяет верхнее положение расположенного элемента
transform Применяется 2D-или 3D-преобразования к элементу
transform-origin Позволяет изменять положение преобразованных элементов
transform-style Задает способ отображения вложенных элементов в 3D-пространстве
transition Сокращенное свойство для всех transition
transition-delay Указывает, когда начнется эффект перехода
transition-duration Указывает, сколько секунд или миллисекунд требуется эффекту перехода для завершения
transition-property Задает имя свойства CSS эффект перехода
transition-timing-function Определяет кривую скорости эффекта перехода

 

U

unicode-bidi Используется вместе со свойством direction для задания или возврата необходимости переопределения текста для поддержки нескольких языков в одном документе
user-select Указывает, можно ли выбрать текст элемента

 

V

vertical-align Задает выравнивание элемента по вертикали
visibility Указывает, является ли элемент видимым

 

W

white-space Указывает, как обрабатывается пробел внутри элемента
widows Задает минимальное количество строк, которое должно оставаться в верхней части страницы при разрыве страницы внутри элемента
width Задает ширину элемента
word-break Указывает способ разрыва слов при достижении конца строки
word-spacing Увеличивает или уменьшает расстояние между словами в тексте
word-wrap Позволяет длинные, нерушимые слова, чтобы быть сломаны и обернуть к следующей строке
writing-mode Задает горизонтальное или вертикальное расположение строк текста

 

Z

z-index Задает порядок позиционированного элемента