Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

STYLE - Сводная таблица стилей CSS

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

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

В описании указано, как обращаться к стилю из объектной модели JavaScript.


Возможно, Вам понадобятся также:


Текст

box-decoration-break Оформление фрагментов текста при его переносе на другую строку.
Возможные значения:
  • clone - Фрагменты оформляются независимо.
  • slice - На месте переноса эффекты отображения не применяются (по умолчанию).
Работает для background, border, border-image, box-shadow, clip-path, margin и padding.
Поддержка браузерами box-decoration-break.
Обратите внимание, что Chrome, Edge, Opera, Safari поддерживают свойство -webkit-box-decoration-break.
Пример
color Цвет текста.
b {color: red;}
i {color: #ff0000;}
a {color: rgb(255, 0, 0);}
font Определяет сразу несколько параметров шрифта:
[font-style||font-variant||font-weight] font-size [/line-height] font-family
body {font: 14px sans-serif;} /* обязательные параметры */
span {font: italic normal bold 12px/1.2em Tahoma, Arial, sans-serif;} /* все параметры */
font-family Задает шрифт или шрифтовое семейство, которым будет отображаться элемент.
Если перечислены несколько шрифтов, то браузер сначала пытается отобразить текст первым из шрифтов, если же его нет на компьютере конечного пользователя, то - следующим, а если нет ни одного их перечисленных, то любым шрифтом из указанного семейства: "serif" (с засечками) или "sans-serif" (без засечек).
th {font-family: Georgia, Times New Roman, serif;}
td {font-family: Micra, Helvetica, Arial, sans-serif;}
@font-face Внедрение в документ шрифта из внешнего файла.
@font-face {
font-family: 'Montserrat';
src: local('Montserrat Regular'),
url('/fonts/Montserrat-Regular.woff2') format('woff2'),
url('/fonts/Montserrat-Regular.woff') format('woff'),
url('/fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
font-size Размер шрифта.
Значение может указываться как в относительной (rem, em, %), так и в абсолютной величине (px).
h1 {font-size: 2rem;}
h2 {font-size: 1.5em;}
h3 {font-size: 100%;}
h4 {font-size: 16px;}
font-style Способ начертания шрифта.
Возможные значения:
  • normal - нормальный (по умолчанию),
  • italic - курсив,
  • oblique - наклонный.
p {font-style: italic;}
Объектная модель:
Object.style.fontStyle = "italic";
document.getElementById("elementID").style.fontStyle = "italic"; Пример
font-variant Варианты начертания шрифта.
Возможные значения:
  • normal - нормальный (по умолчанию),
  • small-caps - все буквы малые заглавные (капитель).
h1 {font-variant: small-caps;}
font-weight Степень жирности шрифта.
Возможные значения:
bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
i {font-weight: bolder;}
letter-spacing Интервал между буквами текста.
p {letter-spacing: 5px}
p {letter-spacing: -.5px} /* интервал, уменьшенный на 0.5 пикселя */
hyphens Определяет расстановку переносов в словах.
Применяется только к тому элементу, у которого задан lang="ru", например, ко всему <html>.
Возможные значения:
  • none - Слова не переносятся никогда, даже при наличии мягких переносов &shy;.
  • manual - Слова переносятся только там, где добавлен &shy; или <wbr>.
  • auto - Слова переносятся автоматически на основе встроенного словаря переносов.
Поддержка hyphens браузерами
Пример
line-height Интервал между строками текста.
Возможные значения:
normal | множитель | значение | проценты (от высоты шрифта)
p {line-height: 1.5}
overflow-wrap Устанавливает, переносить ли часть слова на новую строку, если слово целиком не помещается по ширине в заданную область.
Возможные значения:
  • normal - Нормальный перенос слов (по умолчанию).
  • break-word - Слова, которые не помещаются целиком в заданную область, разрываются переносом строки.
В отличии от word-break:break-all при overflow-wrap:break-word длинное слово не начнется в точке, в которой оно должно начинаться, а переносится на новую строку.
Пример
quotes Вид кавычек в теге <a href="text.php#q">q</a>.
Например:
q {quotes: "\00AB" "\00BB";} /* Кавычки "ёлочки" */
q {quotes: "\201E" "\201C";} /* Кавычки "лапки" */
q {quotes: "\2039" "\203A";} /* Одинарные угловые кавычки */
text-align Определяет выравнивание элемента.
Возможные значения: center | justify | left | right
p {text-align:justify;}
h5 {text-align: center;}
text-decoration Устанавливает эффекты оформления текста.
Возможные значения:
  • line-through - перечеркнутый текст.
  • overline - надчеркнутый текст.
  • underline - подчеркнутый текст.
  • none - отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
Можно применить одновременно несколько эффектов, перечисляя их через пробел.
text-decoration-color Цвет линии, установленной свойством text-decoration или text-decoration-line.
Пример
text-decoration-line Устанавливает положение декоративной линии.
Возможные значения:
  • line-through - перечеркнутый текст,
  • overline - надчеркнутый текст,
  • underline - подчеркнутый текст,
  • none - отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
Можно применить одновременно несколько эффектов, перечисляя их через пробел.
Пример
text-decoration-style Стиль линии, установленной свойством text-decoration или text-decoration-line. Возможные значения:
  • solid - одинарная линия (по умолчанию),
  • double - двойная линия,
  • dotted - точечная линия,
  • dashed - пунктирная линия,
  • wavy - волнистая линия.
Пример
text-decoration-thickness Толщина линии, установленной свойством text-decoration или text-decoration-line. Задается в пикселях (px).
Поддержка text-decoration-thickness браузерами
Пример
text-decoration-skip-ink Внешний вид подчеркивания, установленной свойством text-decoration или text-decoration-line.
Возможные значения:
  • none - Линия пересекает глифы (выносные элементы символов).
  • auto - Линия прерывается на глифах (по умолчанию).
Не входит в короткую запись text-decoration.
Поддержка text-decoration-skip-ink браузерами
Пример
text-indent Отступ первой строки. Чаще всего используется для создания абзацев с красной строкой.
text-indent: значение | проценты (от ширины блока)
p {text-indent: 50px;}
text-overflow Устанавливает способ обрезки текста, если он не помещается в заданную область. Работает, если overflow установлено, как auto, scroll или hidden, а white-space:nowrap.
Возможные значения:
  • clip - Текст обрезается по размеру заданной области.
  • ellipsis - Текст обрезается по размеру заданной области и в конце строки добавляется многоточие.
Пример
text-transform Задает преобразование регистра текста при отображении.
Возможные значения:
  • capitalize - Каждое слово в предложении будет начинаться с заглавной буквы.
  • lowercase - Все буквы текста будут строчными (нижний регистр).
  • uppercase - Все буквы текста будут прописными (верхний регистр).
  • none - Отменяет все эффекты.
text-underline-offset Позиция линии, установленной свойством text-decoration или text-decoration-line. Задается в пикселях (px).
Не входит в короткую запись text-decoration.
Пример
vertical-align Вертикальное выравнивание элемента (не только текста).
Применяется к ячейкам таблицы, элементам table-cell, inline и inline-block.
Не применяется к flex-элементам и элементам, у которых задано свойство float.
Возможные значения:
  • baseline - Выравнивает базовую линию элемента по базовой линии родительского элемента (по умолчанию).
  • sub - Элемент сдвигается вниз (как нижний индекс, но размер шрифта не меняется).
  • super - Элемент сдвигается вверх (как верхний индекс, но размер шрифта не меняется).
  • text-top - Верхняя граница элемента выравнивается по самой высокой части текста в текущей строке.
  • text-bottom - Нижняя граница элемента выравнивается по самой нижней части текста в текущей строке.
  • top - Верхняя граница элемента и его потомков выравнивается по верхней границе строки.
  • middle - Центр элемента по вертикали выравнивается по нижней границе родительского элемента + половина высоты строчной буквы.
  • bottom - Нижняя граница элемента и его потомков будет выравниваться по нижней границе строки.
  • значение - Элемент сдвигается на указанную величину вверх или вниз относительно базовой линии.
  • проценты - Элемент сдвигается на указанную величину (процент от значения line-height) вверх или вниз относительно базовой линии.
Возможные значения (для ячеек таблиц):
  • top - Ячейка выравнивается по верху строки таблицы.
  • middle - Ячейка выравнивается по середине строки таблицы.
  • bottom - Ячейка выравнивается по низу строки таблицы.
td {vertical-align: top;}
div {vertical-align: middle} /* бесполезно, т.к. div - блок */
input {vertical-align: 100px;}
span {vertical-align: 50%;}
img {vertical-align: -300px;}
white-space Устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на Web-странице как один. Исключением является тег <pre>: помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем.
Возможные значения:
  • normal - Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
  • nowrap - Переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, вместе с тем, добавление тега <br> переносит текст на новую строку.
  • pre - Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. Таким образом, white-space:pre имитирует работу тега <pre>, но в отличие от него не меняет шрифт на моноширинный.
word-break Устанавливает, переносить ли часть слова на новую строку, если слово целиком не помещается по ширине в заданную область.
Возможные значения:
  • normal - Перенос строк устанавливается по умолчанию.
  • break-all - Слова, которые не помещаются целиком в заданную область, разрываются переносом строки. Не работает для китайского, корейского и японского текста.
  • keep-all - Запрещает перенос строк в словах китайского, корейского и японского текста. Для остальных работает как normal.
Пример
word-spacing Интервал между словами.
Например: p {word-spacing: 10px;}
Можно использовать отрицательные значения.

Фон

background-attachment Устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
Возможные значения:
  • fixed - Делает фоновое изображение элемента неподвижным.
  • scroll - Позволяет фону перемещаться вместе с содержимым (по умолчанию).
background-clip Устанавливает, где будет отображаться фон.
Возможные значения:
  • border-box - Фон отображается до внешнего края границы элемента.
  • padding-box - Фон отображается до внутренного края границы элемента.
  • content-box - Фон отображается только внутри контента.
Пример
background-color Цвет фона элемента.
body {background-color:yellow;}
th {background-color:#ffff00;}
td {background-color:rgba(255, 255, 0, 0.5);}
Объектная модель:
Object.style.backgroundColor = "#ffff00";
document.getElementById("elementID").style.backgroundColor = "#ffff00";
Пример
background-image Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, то он будет виден, если фоновая картинка меньше, чем сам элемент, или пока фоновая картинка не загрузится полностью.
background-image: url(images/bg.gif);
Значением свойства также может быть CSS-градиент.
background-origin Устанавливает, где будет начинаться фоновое изображение.
Возможные значения:
  • border-box - Фоновое изображение начинается от внешнего края границы элемента.
  • padding-box - Фоновое изображение начинается от внутреннего края границы элемента.
  • content-box - Фоновое изображение начинается только в зоне контента.
background-position Задает начальное положение фонового изображения. По умолчанию - в левом верхнем углу.
У этого свойства два значения: положение по горизонтали (может быть - left, center, right) и вертикали (может быть - top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее:
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (слева по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (справа по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.
background-repeat Определяет, как будет повторяться фоновое изображение. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Возможные значения:
  • no-repeat - Одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position.
  • repeat - Фоновое изображение повторяется по горизонтали и вертикали.
  • repeat-x - Фоновый рисунок повторяется только по горизонтали.
  • repeat-y - Фоновый рисунок повторяется только по вертикали.
background-size Определяет ширину и высоту фонового изображения.
Возможные значения:
  • значение - Ширина и высота фонового изображения в прямом виде.
  • проценты - Ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента.
  • contain - Изображение масштабируется, сохраняя пропорции, по большей стороне так, чтобы картинка целиком поместилась внутрь блока.
  • cover - Изображение масштабируется, сохраняя пропорции, по меньшей стороне так, чтобы его ширина или высота равнялась ширине или высоте блока.
  • auto - Если задано для ширины и высоты (auto auto), то размеры фонового изображения остаются исходными (по умолчанию); если только для одной стороны (100px auto), то размер вычисляется автоматически исходя из пропорций изображения.

Пример
background Позволяет установить до пяти атрибутов стиля фона одновременно. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.
background:url(images/bg.png) no-repeat 100% 0 #e56623;
Значением свойства также может быть CSS-градиент.
opacity Определяет уровень прозрачности элемента.
При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
В качестве аргумента выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1 - его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, например, opacity: .6.

Поля и отступы

margin Устанавливает величину отступов от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл.
Число значений Результат
1 Поля будут установлены для всех сторон содержимого элемента.
2 Первое значение устанавливает поле от верхнего и нижнего края содержимого, второе - от левого и правого.
3 Первое значение задает поле от верхнего края содержимого, второе - одновременно от левого и правого края, а третье - от нижнего края.
4 Поочередно устанавливаются поля от верхнего, правого, нижнего и левого края содержимого.
Задается в пикселях (px), процентах (%) или других единицах измерения. Допустимо отрицательное значение.
Если указать отступ auto, то он будет рассчитан браузером автоматически.
Пример
У соседних блоков вертикальные отступы не суммируются, а объединяются. Объединение не происходит:
  • если у блоков на стороне объединения задано свойство padding,
  • если у блоков на стороне объединения задано свойство border,
  • если у блоков задано свойство position:absolute,
  • если у блоков задано свойство float,
  • для flex-элементов.
margin-bottom,
margin-left,
margin-right,
margin-top
Отступы снизу, слева, справа, сверху элемента соответственно.
Объектная модель: document.getElementById("elementID").style.marginRight
padding Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое. Поля и отступы Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл.
Число значений Результат
1 Поля будут установлены для всех сторон содержимого элемента.
2 Первое значение устанавливает поле от верхнего и нижнего края содержимого, второе - от левого и правого.
3 Первое значение задает поле от верхнего края содержимого, второе - одновременно от левого и правого края, а третье - от нижнего края.
4 Поочередно устанавливаются поля от верхнего, правого, нижнего и левого края содержимого.
padding-bottom,
padding-left,
padding-right,
padding-top
Поля снизу, слева, справа, сверху элемента соответственно.
Объектная модель: document.getElementById("elementID").style.paddingRight
scroll-margin-top Верхний отступ, который будет использовать браузер при переходе к якорному элементу.
Задается в тех же единицах измерения, что и margin.
Если на экране есть зафиксированный блок навигации, то при переходе на конкретный раздел страницы его заголовок может быть закрыт этим блоком. Задав в качестве значения scroll-margin-top сумму высоты блока навигации и отступа до заголовка раздела, мы решим эту проблему.

Рамки (границы)

background-image Это не ошибка!
CSS-свойства можно использовать не только по прямому назначению.
С помощью градиента можно сделать интересные рамки.
Например: Рамка только по углам элемента
border-color Цвет границы.
Может принимать значение transparent для задания невидимой, но имеющей ширину границы, что иногда полезно.
border-bottom-color,
border-left-color,
border-right-color,
border-top-color
Цвет границы снизу, слева, справа, сверху элемента соответственно.
Например: div {border-right-color: red; border-left-color: green;}
Объектная модель: document.getElementById("elementID").style.borderBottomColor
border-style Задает стиль границы.
Возможные значения: none (по умолчанию),
hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
Например: div {border-style: dashed;}
border-bottom-style,
border-left-style,
border-right-style,
border-top-style
Стиль границы снизу, слева, справа, сверху элемента соответственно.
Например: div {border-right-style: dashed; border-left-style: solid;}
Объектная модель: document.getElementById("elementID").style.borderBottomStyle
border-width Ширина границы.
Может быть задана значением в пикселях (%) или с помощью зарезервированных слов:
thin | medium | thick
Например: div {border-width: 2px;}
border-bottom-width,
border-left-width,
border-right-width,
border-top-width
Ширина границы снизу, слева, справа, сверху элемента соответственно.
Например: div {border-right-width: 1px; border-left-width: 2px;}
Объектная модель: document.getElementById("elementID").style.borderBottomWidth
border Ширина, стиль и цвет границы вокруг элемента.
border: [border-width || border-style || border-color]
Например: div {border: 4px double #990;}
border-bottom,
border-left,
border-right,
border-top
Ширина, стиль и цвет границы соответственно снизу, слева, справа, сверху элемента.
Например: div {border-right: 2px solid red;}
border-radius Pадиус скругления углов рамки и фона элемента.
Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Число значений Результат
1 Радиус устанавливается для всех четырех углов.
2 Первое значение устанавливает радиус верхнего левого и нижнего правого угла, второе - верхнего правого и нижнего левого угла.
3 Первое значение устанавливает радиус верхнего левого угла, второе - одновременно верхнего правого и нижнего левого, а третье - нижнего правого угла.
4 Поочередно устанавливаются радиусы верхнего левого, верхнего правого, нижнего правого и нижнего левого угла.
Также допустимы два значения через слэш (/), при этом первое задает радиус по горизонтали, а второе - по вертикали (эллиптические углы).
Пример
border-image Рамка-изображение.
Определяет сразу несколько параметров рамки: рисунок для рамки (или градиент), размер элементов рисунка для рамки, тип повтора рисунка рамки, ширину рамки, смещение рамки.
[border-image-source || border-image-width || border-image-slice || border-image-repeat || border-image-outset]
Поддержка border-image браузерами
Пример
border-image-source URL рисунка для рамки или градиент.
Пример рамки-изображения
В качестве изображения можно использовать градиент.
Пример рамки-градиента
border-image-width Ширина рамки.
Возможные значения:
  • толщина - Ширина рамки в px или em (аналог свойства border-width).
  • число - Число, на которое умножается значение свойства border-width.
  • % - Ширина рамки относительно размеров элемента. Горизонтальные размеры относительно ширины, вертикальные – относительно высоты.
  • auto - Ширина рамки равна значению border-image-slice.
Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Число значений Результат
1 Рамка одинаковой толщины на всех сторонах.
2 Первое значение устанавливает толщину верхней и нижней стороны рамки, второе - левой и правой.
3 Первое значение устанавливает толщину верхней стороны рамки, второе - левой и правой, а третье - нижней.
4 Первое значение устанавливает толщину верхней стороны рамки, второе - правой, третье - нижней, а четвертое - левой.
Пример
Если border-image-width > border-width, то рамка заползет под содержимое.
Пример
border-image-slice Размер элементов рисунка для рамки.
Возможные значения:
  • число - Значения, которые указывают в пикселях размеры частей рисунка для рамки, задавая тем самым области деления. Единицы (px) не пишутся, т.е. 30, а не 30px.
  • % - Размеры частей рисунка в пикселях относительно размеров рисунка. Горизонтальные относительно ширины, вертикальные – относительно высоты.
  • fill - Обозначает, что рисунок не обрезается внутренним краем рамки, а заполняет также область внутри рамки (задается вместе с числом или процентами).
Пример значения в пикселях и в процентах
Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Число значений Результат
1 Область одинаковой толщины со всех сторон рисунка.
2 Первое значение устанавливает толщину верхней и нижней области рисунка, второе - левой и правой.
3 Первое значение устанавливает толщину верхней области рисунка, второе - левой и правой, а третье - нижней.
4 Первое значение устанавливает толщину верхней области рисунка, второе - правой, третье - нижней, а четвертое - левой.
Пример нескольких значений
border-image-repeat Тип повтора рисунка между углами рамки.
Возможные значения:
  • stretch – Рисунок растягивается (по умолчанию).
  • repeat – Рисунок повторяется.
  • round – Рисунок повторяется и масштабируется, чтобы рамки состояла из целого числа рисунков.
  • space – Аналогично repeat.
Можно задать одно значение для всех частей рамки, а можно два, тогда первое будет отвечать за повторение изображения в верхней и нижней части, второе – в левой и правой. Пример
border-image-outset Отступ рамки-изображения.
Возможные значения:
  • величина - отступ рамки за пределы границ элемента в px или em,
  • число - число, на которое умножается значение свойства border-width, для задания отступа.
Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Число значений Результат
1 Отступ одинакового размера от всех сторон элемента.
2 Первое значение устанавливает отступ от верхней и нижней стороны элемента, второе - от левой и правой.
3 Первое значение устанавливает отступ от верхней стороны элемента, второе - от левой и правой, а третье - от нижней.
4 Первое значение устанавливает отступ от верхней стороны элемента, второе - от правой, третье - от нижней, а четвертое - от левой.
Рамка при определенных значениях border-image-outset может перекрывать соседние элементы.
Пример
outline-color Цвет внешней рамки элемента. Применяется сразу ко всем четырём сторонам.
Например: div {outline-color: #990;}
outline-style Стиль внешней рамки элемента. Применяется сразу ко всем четырём сторонам.
Например: div {outline-style: double;}
outline-width Ширина внешней рамки элемента. Применяется сразу ко всем четырём сторонам.
Например: div {outline-width: 4px;}
outline Ширина, стиль и цвет внешней рамки элемента.
outline: [outline-width || outline-style || outline-color]
Применяется сразу ко всем четырём сторонам.
Например: div {outline: 4px double #990;}
Поддержка outline браузерами
Пример
outline-offset Отступ внешней рамки outline от границы элемента border, заданный в px или em.
При отрицательнном значении отступа внешняя рамка отображается внутри элемента.
Пример

Горизонтальная разделительная линия

width Длина линии. Может быть задана значением в px, em или процентах.
hr {width: 200px;}
hr {width: 50%;}
background-color Цвет линии.
hr {background-color: #green;}
background-image Изображение для линии.
В качестве изображения можно использовать градиент.
Пример линии-градиента
border: none; Убирает тень от линии.
height Толщина линии.
hr {height: 1px;}

Отображение

box-sizing Устанавливает метод расчета ширины и высоты элемента.
Возможные значения:
  • content-box – Свойства width и height задают ширину и высоту содержимого элемента, не включая в себя значения границ border, полей padding и отступов margin.
  • border-box – Свойства width и height задают ширину и высоту элемента вместе со значениями границ border и полей padding, не включая значения отступов margin.
  • padding-box – Свойства width и height задают ширину и высоту элемента вместе со значениями полей padding, не включая значения границ border и отступов margin.
Пример
clear Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.
Возможные значения:
  • both – Отменяет обтекание элемента одновременно с правого и левого края. Этот аргумент рекомендуется установить, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
  • left – Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
  • right – Отменяет обтекание с правой стороны элемента.
  • none – Отменяет действие данного свойства и обтекание элемента происходит, как задано с помощью параметра float или других настроек.
clip

Свойство clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области – прямоугольник. Все остальное остается только в мечтах. Параметр clip работает только для абсолютно позиционированных элементов.

clip: rect(Y1, X1, Y2, X2) | auto

В качестве значения используется расстояние от края элемента до области вырезки, которое задается в px, em, процентах и других единицах измерения. Если край области нужно оставить без изменений, следует поставить параметр auto, положение остальных значений показано на рисунке:

Значения параметра clip

<style>
    #layer {
        position: absolute; /* Абсолютное позиционирование */
        clip: rect(40px, auto, auto, 40px); /* Прячем часть текста */
        width: 200px; /* Ширина блока */
        color: white; /* Цвет текста */
        background: #7f4c3e; /* Цвет фона */
        border: 1px solid black; /* Параметры рамки */
        padding: 10px; /* Поля вокруг текста */
    }
</style>
<div id="layer">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
        aliguam erat volutpat. Ut wisis enim ad minim veniam,
        quis nostrud exerci tution ullamcorper suscipit lobortis
        nisl ut aliquip ex ea commodo consequat.</p>
</div>
column-count Определяет количество колонок в многоколоночном тексте.
Например:
div {column-count: 3;}
div {column-count: auto;} /* вычисляется на основе свойств column-width и column-gap */
column-gap Определяет расстояние между колонками в многоколоночном тексте.
Например:
div {column-gap: 30px;}
div {column-gap: 2rem;}
column-rule Определяет разделительную линию между колонками в многоколоночном тексте.
Например: div {column-rule: 1px solid #e31e24;}
Пример
column-width Определяет минимальную ширину колонки многоколоночного текста. Реальная ширина колонки может быть больше введённого значения. При сокращении ширины текст выстраивается в одну колонку.
outline: [outline-width || outline-style || outline-color]
Например:
div {column-width: 350px;}
div {column-width: auto;} /* вычисляется на основе свойств column-count и column-gap */
columns Определяет количество и ширину колонок многоколоночного текста.
columns: [column-count || column-width]
Например:
div {columns: 3 350px;}
div {columns: 2 auto;}
display Определяет, как элемент должен быть отображен в документе.
Возможные значения:
  • block - Блочный элемент. Соответствует блочным элементам HTML, т. е. отображается как отдельный абзац. При его отображении генерируется главный прямоугольник блока, в котором располагаются объемлющие прямоугольники потомков данного элемента.
  • flex - Блочный flex-контейнер для дочерних flex-элементов в методе позиционирования Flexbox.
  • grid - Сетка CSS Grid.
  • inline - Строчный элемент. Соответствует текстовым элементам HTML, т. е. отображается как текстовые строки внутри текущего абзаца, точнее внутри главного прямоугольника соответствующего блока.
  • inline-block - Это значение генерирует блочный элемент, который обтекается другими элементами Web-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на <img>. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент - как строчный.
  • inline-flex - Строчный flex-контейнер для дочерних flex-элементов в методе позиционирования Flexbox.
  • inline-table - Определяет, что элемент является таблицей, как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
  • list-item - Элемент списка. Отображается как блочный элемент с добавлением к нему маркера элемента списка.
  • none - Элемент и все его потомки игнорируются при отображении.
  • run-in - Устанавливает элемент как блочный или встроенный в зависимости от контекста.
  • table - Определяет, что элемент является блочной таблицей подобно <table>.
  • table-caption - Задает заголовок таблицы подобно <caption>.
  • table-cell - Указывает, что элемент представляет собой ячейку таблицы подобно <td>.
  • table-column - Назначает элемент колонкой таблицы подобно <col>.
  • table-column-group - Определяет, что элемент является группой одной или более колонок таблицы подобно <colgroup>.
  • table-header-group - Группа надзаголовков таблицы подобно <thead>.
  • table-footer-group - Группа подзаголовков таблицы подобно <tfoot>.
  • table-row - Элемент отображается как строка таблицы подобно <tr>.
  • table-row-group - Создает структурный блок, состоящий из нескольких строк таблицы подобно <tbody>.
float Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое - одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Возможные значения:
  • left - Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
  • right - Выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне.
  • none - Обтекание элемента не задается.
Объектная модель:
document.getElementById("elementID").style.styleFloat
document.getElementById("elementID").style.cssFloat
height Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>).
значение | проценты | auto
По умолчанию высота не включает значения границ border, полей padding и отступов margin.
Изменить метод расчета высоты можно с помощью свойства box-sizing.
max-height Устанавливает максимальную высоту элемента
Например: div.block {max-height: 200px;}
max-width Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений свойств width, max-width и min-width.
min-height Устанавливает минимальную высоту элемента
Например: div.block {min-height: 100px;}
min-width Устанавливает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки.
object-fit Определяет соотношение сторон таких элементов, как <img> и <video>, если у них задана ширина или высота. Свойство object-fit может как сохранять исходные пропорции элемента, так и искажать их.
Возможные значения:
  • fill - Размер элемента соответствует заданному, пропорции исходного изображения игнорируются,
  • contain - Элемент масштабируется, сохраняя пропорции так, чтобы целиком поместиться в заданную область,
  • cover - Элемент масштабируется, сохраняя пропорции так, чтобы полностью заполнить заданную область,
  • none - Размер элемента остаётся исходным, заданный размер игнорируется,
  • scale-down - Размер элемента соответствуют меньшему из размеров при указании значения none или contain.
Пример
object-position Задает смещение изображения при использовании свойства object-fit. По умолчанию - в центре.
У этого свойства два значения: положение по горизонтали (может быть - left, center, right) и вертикали (может быть - top, center, bottom).
Кроме использования ключевых слов смещение можно задавать в процентах, пикселах или других единицах.
Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается смещение по горизонтали, а затем – по вертикали.
Пример
overflow,
overflow-x, overflow-y
Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Возможные значения:
  • visible – Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
  • hidden – Отображается только область внутри элемента, остальное будет обрезано.
  • scroll – Всегда добавляются полосы прокрутки.
  • auto – Полосы прокрутки добавляются только при необходимости.
Поддержка браузерами overflow
Свойства overflow-x и overflow-y отображают полосу прокрутки по горизонтали или вертикали соответственно. Аргументы те же, что и для overflow.
Поддержка браузерами overflow-x
Поддержка браузерами overflow-y
visibility Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.
Возможные значения:
  • hidden - Элемент становится невидимым или, точнее, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы,
  • visible - Отображает элемент как видимый,
  • collapse - Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено стилевое свойство display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой.
Объектная модель:
document.getElementById("elementID").style.visibility = "visible";
document.all["elementID"].style.visibility = "visible";
width Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <img>).
значение | проценты | auto
По умолчанию ширина не включает значения границ border, полей padding и отступов margin.
Изменить метод расчета ширины можно с помощью свойства box-sizing.

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

bottom Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от свойства position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента, а при абсолютном - относительно нижнего края окна документа.

left Устанавливает расстояние от левого края родительского элемента (не включая границу, поле и отступ) до левого края дочернего элемента.
Отсчет зависит от значения параметра position.
Если position: absolute, и нет родительского элемента, то положение элемента определяется от левого края окна браузера.
Если position: absolute, а у родительского элемента position: relative, то положение элемента определяется от левого края родительского элемента.
Если position: relative, то left отсчитывается от левого края исходного положения элемента, при этом место, которое элемент должен был занимать, остается пустым.
position Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на Web-странице.
Возможные значения:
  • absolute - Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на Web-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается свойствами left, top, right и bottom относительно края окна браузера.
  • fixed - По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании Web-страницы.
  • relative - Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
  • static - Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
  • sticky - Элемент фиксируется в рамках родителя, когда расстояние до границы родителя достигает значения, указанного в свойствах left, top, right или bottom. Прилипающее позиционирование является гибридом относительного и фиксированного позиционирования.
    Пример

Прилипание position:sticky не сработает, если:

  • высота элемента с position: sticky равна высоте родителя,
  • уже достигнуто конечное положение элемента,
  • у родительского элемента свойство overflow отлично от visible,
  • не задано ни одно из свойств left, top, right или bottom.
Поддержка position:sticky браузерами
right Устанавливает расстояние от правого края родительского элемента (не включая отступ, поле и ширину рамки), до правого края дочернего элемента. Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края. В случае значения relative, значение свойства right отсчитывается от правого края исходного положения элемента.
top Устанавливает расстояние от верхнего края родительского элемента (не включая границу, поле и отступ) до верхнего края дочернего элемента.
Отсчет зависит от значения параметра position.
Если position: absolute, и нет родительского элемента, то положение элемента определяется от верхнего края окна браузера.
Если position: absolute, а у родительского элемента position: relative, то положение элемента определяется от верхнего края родительского элемента.
Если position: relative, то значение свойства left отсчитывается от верхнего края исходного положения элемента, при этом место, которое элемент должен был занимать, остается пустым.
z-index Любые позиционированные элементы на web-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов страницы, их размещением по z-оси и управляет свойством z-index.
Объектная модель:
document.getElementById("elementID").style.zIndex

Таблицы

border-collapse Способ отображения границы вокруг ячеек таблицы. Ячейка таблицы может иметь общую рамку с соседними ячейками или свою собственную (в месте стыка получится линия двойной толщины, если для таблицы установлено свойство border-spacing со значением 0).
Возможные значения:
  • separate - Каждая ячейка имеет свою рамку (по умолчанию),
  • collapse - Общая граница для ячеек таблицы.
Пример
border-spacing Расстояние между границами ячеек в таблице.
Можно использовать одно или два значения, разделяя их пробелом.
Число значений Результат
1 Расстояние по вертикали и горизонтали между границами ячеек.
2 Первое значение определяет горизонтальное расстояние, второе значение - вертикальное.
Не работает, если для таблицы установлено свойство border-collapse со значением collapse.
caption-side Определяет положение заголовка таблицы, который задается с помощью тега <caption>, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство text-align.
Возможные значения:
  • top - Располагает заголовок по верхнему краю таблицы.
  • bottom - Заголовок располагается под таблицей.
Поддержка caption-side браузерами
table-layout Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
Возможные значения:
  • auto - Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
  • fixed - Значение повышает производительность построения таблиц. Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого параметра содержимое, которое не помещается в ячейку указанной ширины, будет обрезано либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет.

Списки

list-style-image Устанавливает url изображения, которое служит маркером списка. Это свойство наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none.
Возможные значения: none | url('путь к файлу')
list-style-position Определяет, как будет размещаться маркер относительно текста.
Возможные значения:
  • outside - Маркер вынесен за границу элемента списка.
  • inside - Маркер обтекается текстом.
list-style-type Изменяет вид маркера для каждого элемента списка. Этот атрибут используется только в случае, когда значение свойства list-style-image установлено как none. Маркеры различаются для маркированного списка <ul> и нумерованного <ol>.
Возможные значения:
  • disc
  • circle
  • square
  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • none
list-style Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера.
counter-increment Увеличение значения счётчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов на странице. Может быть отображен, используя функцию counter() или counters() в свойстве content и псевдоэлементы :after и :before. Это позволяет создавать многоуровневые списки, а также списки, в которых нумерация и вид задаются через стили.
Пример
counter-reset Устанавливает идентификатор, в котором будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика. Такой счётчик можно выводить с помощью функции counter() или counters() в свойстве content и псевдоэлементов :after и :before. Пример

Эффекты

cursor Возможные значения (Наведите курсор на соответствующее описание!):
  • all-scroll - Курсор со стрелками во все четыре стороны и точкой в центре, показывающий на возможность скроллинга страницы в любом направлении
    I {cursor: all-scroll;}
  • auto - По умолчанию. Браузер определяет самостоятельно, какой курсор требуется в данном контексте.
  • col-resize - Курсор со стрелками влево-вправо и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по горизонтали.
  • crosshair - Курсор-крест.
  • default - Стандартный курсор, используемый системой.
  • help - Стрелка с вопросительным знаком.
  • move - Курсор со 4 стрелками, показывающий возможность перемещения.
  • no-drop - Перечеркнутый круг. Нельзя сбросить объект в текущую позицию курсора.
  • not-allowed - Перечеркнутый круг. Данная операция не поддерживается.
  • pointer - Рука с вытянутым указательным пальцем, как на гиперссылке.
  • progress - Курсор, показывающий на продолжение операции.
  • row-resize - Курсор со стрелками вверх-вниз и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по вертикали.
  • text - Текстовый курсор-каретка.
  • url(...) - Ваш собственный курсор. Например, cursor:url(holo-cursor.png), default;
  • vertical-text - Горизонтальная текстовая каретка для вертикального текста.
  • wait - Курсор, показывающий, что система занята и требуется подождать.
  • n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, e-resize, w-resize - Курсоры-стрелки определенного направления.
box-shadow Добавляет тень к блоку.
Может иметь до 6 параметров: ключевое слово inset, смещение вправо, смещение вниз, размытие, растяжение, цвет. Из них обязательными являются только смещения. По умолчанию цвет тени черный. Если указано ключевое слово inset, то тень направлена внутрь блока.
Допускается использовать несколько теней, указывая их черех запятую.
Например: box-shadow: 2px 2px 3px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
Надо не забывать, что добавление тени увеличит ширину блока.
Пример
text-shadow Добавляет тень к тексту.
Имеет 4 параметра: смещение вправо, смещение вниз, размытие, цвет.
Допускается использовать несколько теней, указывая их черех запятую.
Например: text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
Пример
scrollbar-color Задается парой цветов:
первый – цвет ползунка полосы прокрутки, второй - цвет дорожки полосы прокрутки.
Поддержка scrollbar-color браузерами
Пример
scrollbar-width Определяет ширину полосы прокрутки.
Возможные значения:
  • auto - Ширина полосы прокрутки по умолчанию.
  • thin - Тонкий вариант ширины полосы прокрутки в браузерах, которые предоставляют эту возможность, или более тонкая полоса прокрутки, чем ширина полосы прокрутки браузера по умолчанию.
  • none - Полоса прокрутки не показывается, однако элемент все равно прокручивается.
Поддержка scrollbar-width браузерами
Пример

Переходы
(изменение значений CSS-свойств элемента в течение заданного времени)

Смена свойств происходит при наступлении определенного события. Например, при наведении указателя мышки (псевдокласс :hover) или при клике (переключение классов с помощью JavaScript).
transition-property Устанавливает к каким CSS-свойствам будет применен эффект перехода.
Возможные значения:
  • all – Все свойства элемента (по умолчанию).
  • свойства – Одно или несколько свойств элемента, указанных через запятую.
    div.block {backgrond-color:#0ff;transition-property:backgrond-color;}
    div.block:hover {backgrond-color:#ff0;}
Объектная модель:
document.getElementById("elementID").style.transitionProperty
Поддержка transition-property браузерами
transition-duration Устанавливает продолжительность перехода в секундах или миллисекундах.
div.block {transition-duration:0.3s;}
или
div.block {transition-duration:300ms;}
Объектная модель:
document.getElementById("elementID").style.transitionDuration
Поддержка transition-duration браузерами
transition-timing-function Устанавливает временную функцию изменения скорости перехода.
Возможные значения:
  • ease – Переход начинается медленно, резко ускоряется, а затем постепенно замедляется к концу (по умолчанию).
  • ease-in – Переход начинается медленно, ускоряется к концу.
  • ease-out – Переход начинается быстро, замедляется к концу.
  • ease-in-out – Переход начинается медленно, постепенно ускоряется, а затем постепенно замедляется к концу.
  • linear – Переход начинается и заканчивается с одинаковой скоростью.
  • cubic-bezier – Скорость перехода задается в виде кривой Безье.
Объектная модель:
document.getElementById("elementID").style.transitionTimingFunction
Поддержка transition-timing-function браузерами
Пример
transition-delay Устанавливает задержку перехода в секундах или миллисекундах.
div.block {transition-delay:0.3s;}
или
div.block {transition-delay:300ms;}
Значание по умолчаню – 0s (без задержки).
Объектная модель:
document.getElementById("elementID").style.transitionDelay
Поддержка transition-delay браузерами
transition Устанавливает сразу несколько параметров перехода.
[transition-property]||transition-duration||[transition-timing-function]||[transition-delay]
div.block {transition: backgrond-color 0.3s linear;} Объектная модель:
document.getElementById("elementID").style.transition
Поддержка transition браузерами
Пример

Трансформации
(изменение размера, поворот, сдвиг и искажение элемента)

transform Устанавливает вид трасформации.
Возможные значения:
  • matrix(a, c, b, d, tx, ty) – Одновременное применение нескольких трансформаций.
    Значение Действие
    a Изменение размера по горизонтали,
    a > 1 – увеличение, 0 < a < 1 – уменьшение.
    c Искажение стороны элемента по оси Y,
    c > 0 – вверх, c < 0 – вниз.
    b Искажение стороны элемента по оси X,
    b > 0 – влево, b < 0 – вправо.
    d Изменение размера по вертикали,
    d > 1 – увеличение, 0 < d < 1 – уменьшение.
    tx Сдвиг элемент по оси X,
    tx > 0 – влево, tx < 0 – вправо.
    ty Сдвиг элемент по оси Y,
    ty > 0 – вверх, ty < 0 – вниз.

    Пример

  • rotate(угол) – Поворот элемента на заданное количество градусов (deg), угол < 0 – против часовой стрелки, угол > 0 – по часовой стрелке.
    Пример

  • scale(x,y) – Изменение размера элемента,
    x – изменение ширины элемента, y – изменение высоты элемента,
    x,y > 1 – увеличение, 0 < x,y < 1 – уменьшение.
    x,y < 0 – зеркальное отображение элемента.
  • scaleX(x) – Изменение ширины элемента, x > 1 – увеличение, 0 < x < 1 – уменьшение, x < 0 – зеркальное отображение элемента.
  • scaleY(y) – Изменение высоты элемента, y > 1 – увеличение, 0 < y < 1 – уменьшение, y < 0 – зеркальное отображение элемента.
    Пример

  • skew(x-угол,y-угол) – Искажение по горизонтали на x-угол, искажение по вертикали на y-угол, x-угол > 0 – искажение влево, x-угол < 0 – искажение вправо, y-угол > 0 – искажение вверх, y-угол < 0 – искажение вниз.
  • skewX(x-угол) – Искажение по горизонтали на заданный угол, x-угол > 0 – искажение влево, x-угол < 0 – искажение вправо.
  • skewY(y-угол) – Искажение по вертикали на заданный угол, y-угол > 0 – искажение вверх, y-угол < 0 – искажение вниз.
    Пример

  • translate(tx,ty) – Сдвиг по горизонтали на tx, сдвиг по вертикали на ty, tx > 0 – сдвиг вправо, tx < 0 – сдвиг влево, ty > 0 – сдвиг вниз, ty < 0 – сдвиг вверх.
  • translateX(tx) – Сдвиг по горизонтали на tx, tx > 0 – сдвиг вправо, tx < 0 – сдвиг влево.
  • translateY(ty) – Сдвиг по вертикали на ty, ty > 0 – сдвиг вниз, ty < 0 – сдвиг вверх.
    Пример

Объектная модель:
document.getElementById("elementID").style.transform

Поддержка transform браузерами

transform-origin Устанавливает центр трансформации.
Имеет 2 параметра:
Параметр Значение
x-координата Возможные значения:
число с единицами длины | проценты | left | center | right
y-координата Возможные значения:
число с единицами длины | проценты | top | center | bottom
По умолчанию трансформация происходит относительно центра элемента. Объектная модель:
document.getElementById("elementID").style.transformOrigin
Поддержка transform-origin браузерами
Пример

Анимация
(автоматически повторяющиеся ключевые кадры с плавным переходом)

@keyframes Содержит имя анимации и устанавливает ключевые кадры, которые создаются с помощью ключевых слов from (0%) и to (100%) или с помощью любого числа процентных пунктов.
@keyframes cloud {
from { right: -100%; top: -50%; }
to { right: 100%; top: 0; } }
Поддержка @keyframes браузерами
animation-name Имя анимации. Текстовая строка, которая должна начинаться с латинской буквы или подчёркивания (_), может содержать также цифры от 0 до 9 и дефис (-).
{animation-name:cloud}
Объектная модель:
document.getElementById("elementID").style.animationName
Поддержка animation-name браузерами
animation-duration Устанавливает продолжительность анимации в секундах или миллисекундах.
{animation-duration:0.3s;}
или
{animation-duration:300ms;} Объектная модель:
document.getElementById("elementID").style.animationDuration
Поддержка animation-duration браузерами
animation-timing-function Устанавливает временную функцию изменения скорости перехода. Возможные значения:
  • ease – Анимация начинается медленно, резко ускоряется, а затем постепенно замедляется к концу (по умолчанию).
  • ease-in – Анимация начинается медленно, ускоряется к концу.
  • ease-out – Анимация начинается быстро, замедляется к концу.
  • ease-in-out – Анимация начинается медленно, потом ускоряется и замедляется к концу.
  • linear – Анимация начинается и заканчивается с одинаковой скоростью.
  • cubic-bezier – Скорость анимации задается в виде кривой Безье.
  • steps(k,start|end) – Пошаговая анимация. Первый параметр – количество шагов. Второй параметр – момент начала анимации:
    Параметр Действие
    start анимация начинается в начале каждого шага
    end анимация начинается в конце каждого шага с задержкой
Объектная модель:
document.getElementById("elementID").style.animationTimingFunction
Поддержка animation-timing-function браузерами
animation-delay Устанавливает задержку анимации в секундах или миллисекундах.
{animation-delay:0.3s;}
или
{animation-delay:300ms;}
Значание по умолчаню – 0s (без задержки).
Объектная модель:
document.getElementById("elementID").style.animationDelay
Поддержка animation-delay браузерами
animation-iteration-count Устанавливает число повторов анимации. Возможные значения:
  • n – Положительное число повторов анимации. Если n = 0.5, то анимация пройдет половину своего цикла.
  • infinite – Бесконечное число повторов анимации.
Объектная модель:
document.getElementById("elementID").style.animationIterationCount
Поддержка animation-iteration-count браузерами
animation-direction Устанавливает направление анимации. Возможные значения:
  • normal – Анимация идет с начала до конца, затем возвращается к исходному состоянию (по умолчанию).
  • alternate – Анимация идет с начала до конца, затем в обратном направлении.
  • reverse – Анимация идет с конца до начала, затем возвращается к исходному состоянию.
  • alternate-reverse – Анимация идёт с конца до начала, затем в обратном направлении.
Объектная модель:
document.getElementById("elementID").style.animationDirection
Поддержка animation-direction браузерами
animation-play-state Устанавливает проигрывать или остановить анимацию. Возможные значения:
  • runing – Проигрывать анимацию (по умолчанию).
  • paused – Остановить анимацию.
Объектная модель:
document.getElementById("elementID").style.animationPlayState
Поддержка animation-play-state браузерами
animation-fill-mode Устанавливает, какие стили применяются к элементу, когда анимация не проигрывается (до начала, после завершения, при остановке).
Возможные значения:
  • forwards – По окончанию анимации к элементу применяется стиль последнего ключевого кадра.
  • backwards – На протяжении времени, заданного animation-delay, к элементу применяется стиль первого ключевого кадра.
  • both – К элементу применяется и правило forwards, и правило backwards.
Объектная модель:
document.getElementById("elementID").style.animationFillMode
Поддержка animation-fill-mode браузерами
animation Устанавливает сразу несколько параметров анимации.
animation-name || animation-duration || [animation-timing-function] || [animation-delay]|| [animation-iteration-count] || [animation-direction] || [animation-fill-mode] || [animation-play-state]
{animation: cloud 15s linear infinite;}
Объектная модель:
document.getElementById("elementID").style.animation
Поддержка animation браузерами
Пример

Смотрите также:


.