ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Справочник

CSS Справочник CSS Поддержка браузерами CSS Селекторы CSS Функции CSS Справочник Aural CSS Безопасные веб-шрифты CSS Альтернативные шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Сущности

CSS Свойства

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function 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 box-shadow box-sizing break-after break-before break-inside caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes resize right scroll-behavior tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space width word-break word-spacing word-wrap writing-mode z-index



CSS. Уроки для для начинающих

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-*
background-attachment Устанавливает, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или фиксировано
background-blend-mode Определяет режим наложения каждого фонового слоя (цвет/изображение)
background-clip Определяет, насколько далеко должен распространяться фон (цвет или изображение) внутри элемента
background-color Задает цвет фона элемента
background-image Задает одно или несколько фоновых изображений для элемента
background-origin Определяет исходную позицию фонового изображения
background-position Определяет положение фонового изображения
background-repeat Устанавливает, будет ли/как будет повторяться фоновое изображение
background-size Определяет размер фоновых изображений
border Сокращенное свойство для border-width, border-style и border-color
border-bottom Сокращенное свойство для border-bottom-width, border-bottom-style и border-bottom-color
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-*
border-image-outset Определяет величину, на которую область изображения границы выходит за пределы границы блока
border-image-repeat Определяет, должно ли изображение границы повторяться, закругляться или растягиваться
border-image-slice Определяет, как разрезать изображение границы
border-image-source Задает путь к изображению, которое будет использоваться в качестве границы
border-image-width Определяет ширину изображения границы
border-left Сокращенное свойство для всех свойств border-left-*
border-left-color Устанавливает цвет левой границы
border-left-style Устанавливает стиль левой границы
border-left-width Устанавливает ширину левой границы
border-radius Сокращенное свойство для четырех свойств border-*-radius
border-right Сокращенное свойство для всех свойств border-right-*
border-right-color Устанавливает цвет правой границы
border-right-style Устанавливает стиль правой границы
border-right-width Устанавливает ширину правой границы
border-spacing Устанавливает расстояние между границами соседних ячеек
border-style Устанавливает стиль четырех границ
border-top Сокращенное свойство для border-top-width, border-top-style и border-top-color
border-top-color Устанавливает цвет верхней границы
border-top-left-radius Определяет радиус границы верхнего левого угла
border-top-right-radius Определяет радиус границы правого верхнего угла
border-top-style Устанавливает стиль верхней границы
border-top-width Устанавливает ширину верхней границы
border-width Устанавливает ширину четырех границ
bottom Устанавливает позицию элемента снизу родительского элемента
box-decoration-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 Сокращенное свойство для column-width и column-count
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 Правило, позволяющее веб-сайтам загружать и использовать шрифты, отличные от "web-безопасных" шрифтов
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 Определяет, должен ли текст отображаться мелким шрифтом
font-variant-alternates Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-feature-values
font-variant-caps Управляет использованием альтернативных глифов для заглавных букв
font-variant-east-asian Управляет использованием альтернативных глифов для восточноазиатских шрифтов (например, японского и китайского)
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 и 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 Устанавливает верхнее поле элемента
mask Скрывает элемент, маскируя или обрезая изображение в определенных местах
mask-type Определяет, используется ли элемент маски в качестве маски яркости или альфа-маски
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 Устанавливает поведение разрыва страницы внутри элемента
perspective Придает трехмерному элементу некоторую перспективу
perspective-origin Определяет, в какой позиции пользователь смотрит на трехмерный элемент
pointer-events Определяет, реагирует ли элемент на события указателя
position Задает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный)

Q

quotes Устанавливает тип кавычек для встроенных цитат

R

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

S

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

T

tab-size Определяет ширину символа табуляции
table-layout Определяет алгоритм, используемый для компоновки ячеек, строк и столбцов таблицы
text-align Определяет горизонтальное выравнивание текст
text-align-last Описывает, как выравнивается последняя строка блока или строка прямо перед принудительным разрывом строки, когда выравнивание текста установлено "justify"
text-combine-upright Задает комбинацию нескольких символов в пространстве одного символа
text-decoration Указывает оформление, добавленное к тексту
text-decoration-color Определяет цвет оформления текста
text-decoration-line Определяет тип линии в оформлении текста
text-decoration-style Определяет стиль линии в оформлении текста
text-indent Задает отступ первой строки в текстовом блоке
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 Устанавливает порядок стека позиционированного элемента