Самоучитель CSS Справочник CSS Единицы измерения Селекторы Цвета CSS
Свойства CSS
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-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-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-shadow box-sizing caption-side clear clip color column-count column-gap column-rule column-rule-color column-rule-style column-rule-width columns column-span column-width content counter-increment counter-reset cursor direction display empty-cells float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight height @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 min-height min-width opacity 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 position quotes resize right table-layout text-align text-decoration text-indent text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

CSS справочник

Данный справочник предоставляет подробное описание всех CSS свойств с максимально упрощенными примерами, для более легкого понимания работы свойства.

Некоторые свойства CSS из третьей версии были внедрены совсем недавно и пока не поддерживаются ни одним из браузеров и не имеют точного описания работы, как только они будут введены в эксплуатацию, к ним будет добавлено подробное описание с примером.

Свойства CSS по группам:

Анимация

Свойство Описание CSS
@keyframes Позволяет создавать анимацию. 3
animation Позволяет установить несколько или все значения свойств animation в одном объявлении. 3
animation-delay Определяет, когда запустится анимация. 3
animation-direction Указывает будет ли анимация проигрываться в реверсе на альтернативных циклах. 3
animation-duration Определяет сколько понадобится времени, чтобы закончить 1 цикл анимации. 3
animation-fill-mode Задаёт стиль для элемента, когда анимация не проигрывается (до её запуска, во время остановки или после её окончания).
По умолчанию CSS анимация не влияет на элемент до тех пор, пока анимация не запуститься, во время паузы и после её завершения. Это и позволяет переопределить свойство animation-fill-mode.
3
animation-iteration-count Определяет сколько раз анимация должна будет проигрываться. 3
animation-name Определяет имя для @keyframes. 3
animation-play-state Указывает будет анимация проигрываться или будет в режиме паузы. 3
animation-timing-function Определяет кривую скорости для анимации. 3
backface-visibility Определяет, должна ли быть видна задняя сторона элемента или нет. 3

Внешний и внутренний отступы

Свойство Описание CSS
margin Задает внешние отступы для элемента. 1
margin-bottom Задает нижний внешний отступ для элемента. 1
margin-left Задает левый внешний отступ для элемента. 1
margin-right Задает правый внешний отступ для элемента. 1
margin-top Задает верхний внешний отступ для элемента. 1
padding Устанавливает внутренние отступы в элементе. 1
padding-bottom Задает нижний отступ(внутреннее поле) для элемента. 1
padding-left Задает левый отступ(внутреннее поле) для элемента. 1
padding-right Задает правый отступ(внутреннее поле) для элемента. 1
padding-top Задает верхний отступ(внутреннее поле) для элемента. 1

Позиционирование

Свойство Описание CSS
bottom Указывает направление смещения позиционированного элемента от нижнего края. 2
clear Указывает с какой стороны элемента не допускаются плавающие элементы. 1
clip Определяет видимую часть абсолютно позиционированных элементов. 2
display Указывает, как будет отображаться элемент в браузере. 1
float Определяет будет ли элемент плавающим. 1
left Указывает направление смещения позиционированного элемента от левого края. 2
position Определяет метод позиционирования элементов. 2
right Указывает направление смещения позиционированного элемента от правого края. 2
top Указывает направление смещения позиционированного элемента от верхнего края. 2
visibility Определяет, является ли элемент видимым. 2
z-index Указывает порядок расположения элементов по оси Z. 2

Размер

Свойство Описание CSS
height Устанавливает фиксированную высоту. 1
max-height Указывает максимальную фиксированную высоту. 2
max-width Указывает максимальную фиксированную ширину. 2
min-height Указывает минимальную фиксированную высоту. 2
min-width Указывает минимальную фиксированную ширину. 2
overflow Определяет, что предпринять, если содержимое элемента превосходит размер области элемента. 2
overflow-x Указывает, обрезать или нет левый/правый край содержимого - если оно переполняет доступную область элемента для его содержания. 3
overflow-y Указывает, обрезать или нет верхний/нижний край содержимого - если оно переполняет доступную область элемента для его содержания. 3
resize Указывает, может ли размер элемента изменяться пользователем. 3
width Устанавливает фиксированную ширину. 1

Рамка и контур

Свойство Описание CSS
border Позволяет использовать основные свойства границ в одном объявлении. 1
border-bottom Позволяет использовать значения основных свойств для нижней границы рамки в одном объявлении. 1
border-bottom-color Задает цвет для нижней границы рамки. 1
border-bottom-left-radius Позволяет сделать округлую границу нижнего левого угла. 3
border-bottom-right-radius Позволяет сделать округлую границу нижнего правого угла. 3
border-bottom-style Определяет стиль для нижней границы рамки. 1
border-bottom-width Определяет ширину для нижней границы рамки. 1
border-color Задает цвет для границ рамки элемента. 1
border-image Позволяет использовать изображение в качестве рамки. 3
border-left Позволяет использовать значения основных свойств для левой границы рамки в одном объявлении. 1
border-left-color Задает цвет для левой границы рамки. 1
border-left-style Определяет стиль для левой границы рамки. 1
border-left-width Определяет ширину для левой границы рамки. 1
border-radius Позволяет изменить форму углов. 3
border-right Меняет внешний вид правой границы рамки. 1
border-right-color Задает цвет для правой границы рамки. 1
border-right-style Определяет стиль для правой границы рамки. 1
border-right-width Задает ширину для правой границы рамки. 1
border-style Задает стиль для границ рамки элемента. 1
border-top Меняет внешний вид верхней границы рамки. 1
border-top-color Задает цвет для верхней границы рамки. 1
border-top-left-radius Позволяет сделать округлую границу верхнего левого угла. 3
border-top-right-radius Позволяет сделать округлую границу верхнего правого угла. 3
border-top-style Определяет стиль для верхней границы рамки. 1
border-top-width Определяет ширину для верхней границы рамки. 1
border-width Задает ширину для границ рамки элемента. 1
outline Создает внешнюю границу вокруг элемента. 2
outline-color Определяет цвет внешней границы. 2
outline-offset Сдвигает внешнюю границу на заданное расстояние от края элемента. 3
outline-style Указывает стиль для внешней границы. 2
outline-width Указывает ширину для внешней границы. 2

Списки

Свойство Описание CSS
list-style Управляет маркером в списках. 1
list-style-image Заменяет маркеры списков на изображения. 1
list-style-position Определяет расположение маркера относительно пункта списка. 1
list-style-type Указывает вид маркера в списке. 1

Таблицы

Свойство Описание CSS
border-collapse Определяет будут ли границы рамки объединены в одну. 2
border-spacing Определяет расстояние между границами смежных ячеек и общей рамкой таблицы. 2
caption-side Указывает расположение заголовка таблицы. 2
empty-cells Регулирует видимость пустых ячеек в таблице. 2
table-layout Задает алгоритм использования макета таблицы. 2

Текст

Свойство Описание CSS
color Изменяет цвет текста. 1
direction Определяет направление написания текста. 2
letter-spacing Контролирует расстояние между символами в тексте. 1
line-height Определяет межстрочный интервал(интерлиньяж). 1
quotes Определяет тип кавычек для встроенных цитат. 2
text-align Указывает способ выравнивания содержимого по горизонтали. 1
text-decoration Добавляет некоторые элементы декорирования к тексту. 1
text-indent Определяет отступ первой строки в тексте элемента. 1
text-overflow Указывает, что должно произойти, когда текст переполняет содержащий элемент. 3
text-transform Контролирует использование строчных и прописных букв в тексте. 1
vertical-align Определяет вертикальное выравнивание в элементе. 1
white-space Определяет способ обработки пробелов внутри элемента. 1
word-break Определяет правила переноса для не-CJK сценариев. 3
word-spacing Определяет ширину пробелов между словами. 1
word-wrap Позволяет прерывать длинные слова для переноса на другую строку. 3

Тени и прозрачность

Свойство Описание CSS
box-shadow Добавляет эффект отбрасывания тени к элементу. 3
opacity Устанавливает уровень прозрачности элемента. 3
text-shadow Создает тень для текста. 3

Трансформация

Свойство Описание CSS
perspective Определяет, на сколько пикселей удален 3D элемент от точки обзора. 3
perspective-origin Определяет, где располагается 3D элемент на осях x и y. 3
transform Применяет 2D или 3D преобразование к элементу. 3
transform-origin Позволяет изменить позицию преобразованных элементов. 3
transform-style Определяет, как вложенные элементы будут отображаться в трехмерном пространстве. 3
transition Управляет эффектом трансформации. 3
transition-delay Указывает, когда должен начаться эффект трансформации. 3
transition-duration Указывает продолжительность трансформации. 3
transition-property Указывает название CSS свойства, для которого будет применен эффект трансформации. 3
transition-timing-function Задает кривую скорости для эффекта трансформации. 3

Фон

Свойство Описание CSS
background Устанавливает несколько или все значения свойств фона в одном объявлении. 1
background-attachment Указывает будет ли фоновое изображение фиксированным. 1
background-clip Определяет область в элементе, для которой задается фон. 3
background-color Устанавливает цвет фона для элемента. 1
background-image Устанавливает фоновое изображение в элементе. 1
background-origin Указывает область позиционирования для фонового изображения. 3
background-position Устанавливает начальное место для фонового изображения. 1
background-repeat Задает, как фоновое изображение будет повторяться на экране. 1
background-size Указывает размер для фонового изображения. 3

Шрифт

Свойство Описание CSS
font Изменяет стандартный вид текста. 1
@font-face Позволяет использование любого шрифта на странице. 3
font-family Указывает шрифт или семейство шрифтов для текста. 1
font-size Указывает размер для шрифта. 1
font-size-adjust Контролирует размер неосновных шрифтов. 3
font-stretch Регулирует ширину текста. 3
font-style Позволяет изменять стиль текста. 1
font-variant Конвертирует строчные буквы в прописные уменьшенного размера. 1
font-weight Задает ширину символов текста. 1

Другое

Свойство Описание CSS
box-sizing Позволяет заставить определенные элементы заполнять область определенным способом. 3
column-count Разделяет элемент на колонки. 3
column-gap Задает расстояние между колонками элемента. 3
column-rule Свойство column-rule позволяет указать значения свойств column-rule-* (ширину, стиль и цвет) в одном объявлении. 3
column-rule-color Определяет цвет границы между колонками. 3
column-rule-style Определяет стиль границы между колонками. 3
column-rule-width Указывает ширину границы между колонками. 3
columns Позволяет использовать значения свойств column-width и column-count в одном объявлении. 3
column-span Указывает элементу количество колонок для обхвата. 3
column-width Определяет ширину колонок. 3
content Определяет содержимое для псевдо-элементов ::before и ::after. 2
counter-increment Увеличивает значение счетчика. 2
counter-reset Устанавливает начальное значение счетчика. 2
cursor Изменяет вид курсора мыши. 2
page-break-after Определяет наличие или отсутствие разрыва страницы после заданного элемента. 2
page-break-before Определяет наличие или отсутствие разрыва страницы перед заданным элементом. 2
page-break-inside Определяет наличие или отсутствие разрыва страницы внутри элемента. 2
   
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

реклама на сайте | mail для связи: admin@puzzleweb.ru