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

CSS Справочник

CSS Справочник CSS Поддержка браузерами CSS Селекторы CSS Функции CSS Справочник Aural 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 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-kerning font-size font-size-adjust font-stretch font-style font-variant 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



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

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-safe"
font-family Определяет семейство шрифтов для текста
font-feature-settings Позволяет контролировать расширенные типографские функции в шрифтах OpenType
@font-feature-values Позволяет авторам использовать общее имя в font-option-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, and the 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 в одном объявлении
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 Устанавливает поведение разрыва страницы внутри элемента
perspective Придает трехмерному элементу некоторую перспективу
perspective-origin Определяет, в какой позиции пользователь смотрит на трехмерный элемент
pointer-events Определяет, реагирует ли элемент на события указателя
position Определяет тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный)

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
text-decoration-line Определяет тип линии в text-decoration
text-decoration-style Определяет стиль линии в text-decoration
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 Устанавливает порядок стека (наложения) позиционируемого элемента