Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Фон
Поля и отступы
Рамки (границы)
Разделительная линия
Отображение
Позиционирование
Таблицы
Списки
Эффекты
Переходы
Трансформации
Анимация
STYLE - Сводная таблица стилей CSS
На этой странице в одну таблицу собраны все основные CSS стили.
Поставьте закладку на эту страницу и Вы не будете мучиться в поисках того или иного свойства стилей.
Серым выделены стили, которые есть в стандарте, но пока не поддерживаются основными браузерами.
В описании указано, как обращаться к стилю из объектной модели JavaScript.
Возможно, Вам понадобятся также:
Текст | |||||||||||||||
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 |
Способ начертания шрифта. Возможные значения:
Объектная модель: Object.style.fontStyle = "italic"; document.getElementById("elementID").style.fontStyle = "italic"; Пример |
||||||||||||||
font-variant |
Варианты начертания шрифта. Возможные значения:
|
||||||||||||||
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 пикселя */ |
||||||||||||||
line-height |
Интервал между строками текста. Возможные значения: normal | множитель | значение | проценты (от высоты шрифта) p {line-height: 1.5} |
||||||||||||||
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 |
Устанавливает эффекты оформления текста. Возможные значения:
|
||||||||||||||
text-decoration-color | Цвет линии, установленной свойством text-decoration или text-decoration-line. | ||||||||||||||
text-decoration-line |
Устанавливает положение декоративной линии.
Возможные значения:
|
||||||||||||||
text-decoration-style |
Стиль линии, установленной свойством text-decoration или text-decoration-line. Возможные значения:
|
||||||||||||||
text-indent |
Отступ первой строки. Чаще всего используется для создания абзацев с красной строкой. text-indent: значение | проценты (от ширины блока) p {text-indent: 50px;} |
||||||||||||||
text-overflow |
Устанавливает способ обрезки текста, если он не помещается в заданную область.
Работает, если overflow установлено, как auto, scroll или hidden, а white-space:nowrap. Возможные значения:
|
||||||||||||||
text-transform |
Задает преобразование регистра текста при отображении. Возможные значения:
|
||||||||||||||
vertical-align |
Вертикальное выравнивание элемента (не только текста). Применяется к ячейкам таблицы, элементам table-cell, inline и inline-block. Не применяется к flex-элементам и элементам, у которых задано свойство float. Возможные значения:
div {vertical-align: middle} /* бесполезно, т.к. div - блок */ input {vertical-align: 100px;} span {vertical-align: 50%;} img {vertical-align: -300px;} |
||||||||||||||
white-space |
Устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на Web-странице как один.
Исключением является тег <pre>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Возможные значения:
|
||||||||||||||
word-break |
Устанавливает, переносить ли часть слова на новую строку, если слово целиком не помещается по ширине в заданную область. Возможные значения:
|
||||||||||||||
word-spacing |
Интервал между словами. Например: p {word-spacing: 10px;} Можно использовать отрицательные значения. |
||||||||||||||
overflow-wrap |
Устанавливает, переносить ли часть слова на новую строку, если слово целиком не помещается по ширине в заданную область. Возможные значения:
Пример |
||||||||||||||
Фон | |||||||||||||||
background-attachment |
Устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Возможные значения:
|
||||||||||||||
background-clip |
Устанавливает, где будет отображаться фон. Возможные значения:
|
||||||||||||||
background-color |
Цвет фона элемента. body {background-color:yellow;} th {background-color:#ffff00;} td {background-color:rgba(255, 255, 0, 0.5);} Объектная модель: Object.style.backgroundColor = "#ffff00"; [window.]document.getElementById("elementID").style.backgroundColor = "#ffff00"; Пример |
||||||||||||||
background-image |
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, то
он будет виден, если фоновая картинка меньше, чем сам элемент, или
пока фоновая картинка не загрузится полностью. background-image: url(images/bg.gif); Значением свойства также может быть CSS-градиент. |
||||||||||||||
background-origin |
Устанавливает, где будет начинаться фоновое изображение. Возможные значения:
|
||||||||||||||
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 | Определяет, как будет повторяться фоновое изображение. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
Возможные значения:
|
||||||||||||||
background-size |
Определяет ширину и высоту фонового изображения. Возможные значения:
Пример |
||||||||||||||
background |
Позволяет установить до пяти атрибутов стиля фона одновременно.
Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. background:url(images/bg.png) no-repeat 100% 0 #e56623; Значением свойства также может быть CSS-градиент. |
||||||||||||||
opacity |
Определяет уровень прозрачности элемента. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта. В качестве аргумента выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1 - его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6. |
||||||||||||||
Поля и отступы | |||||||||||||||
margin |
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента
Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл.
Если указать отступ auto, то он будет рассчитан браузером автоматически. Пример У соседних блоков вертикальные отступы не суммируются, а объединяются. Объединение не происходит:
|
||||||||||||||
margin-bottom, margin-left, margin-right, margin-top |
Отступы соответственно снизу, слева, справа, сверху элемента. Объектная модель: [window.]document.getElementById("elementID").style.marginRight |
||||||||||||||
padding |
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
![]()
|
||||||||||||||
padding-bottom, padding-left, padding-right, padding-top |
Поля соответственно снизу, слева, справа, сверху. Объектная модель: [window.]document.getElementById("elementID").style.paddingRight |
||||||||||||||
Рамки (границы) | |||||||||||||||
border-color |
Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину границы, что иногда полезно. |
||||||||||||||
border-bottom-color, border-left-color, border-right-color, border-top-color |
Цвет границы соответственно снизу, слева, справа, сверху элемента. Например: div {border-right-color: red; border-left-color: green;} Объектная модель: [window.]document.getElementById("elementID").style.borderBottomColor |
||||||||||||||
border-style |
Задает стиль границы. Возможные значения: none (по умолчанию), , 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;} Объектная модель: [window.]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;} Объектная модель: [window.]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адиус скругления углов рамки и фона элемента. Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Пример |
||||||||||||||
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 |
Ширина рамки. Возможные значения:
Если border-image-width > border-width, то рамка заползет под содержимое. Пример |
||||||||||||||
border-image-slice |
Размер элементов рисунка для рамки. Возможные значения:
Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
|
||||||||||||||
border-image-repeat |
Тип повтора рисунка между углами рамки. Возможные значения:
|
||||||||||||||
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. При отрицательнном значении отступа внешняя рамка отображается внутри элемента. | ||||||||||||||
background-image |
Это не ошибка! CSS-свойства можно использовать не только по прямому назначению. С помощью градиента можно сделать интересные рамки. Например: Рамка только по углам элемента |
||||||||||||||
Горизонтальная разделительная линия | |||||||||||||||
width |
Длина линии. Может быть задана значением в px, em или процентах. hr {width: 200px;} hr {width: 50%;} |
||||||||||||||
background-color | Цвет линии. hr {background-color: #green;} |
||||||||||||||
background-image | Изображение для линии. В качестве изображения можно использовать градиент. Пример линии-градиента |
||||||||||||||
border: none; | Убирает тень от линии. | ||||||||||||||
height | Толщина линии. hr {height: 1px;} |
||||||||||||||
Отображение | |||||||||||||||
display |
Определяет, как элемент должен быть отображен в документе. Возможные значения:
|
||||||||||||||
overflow |
Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Возможные значения:
Объектная модель: [window.]document.getElementById("elementID").style.overflowX [window.]document.all["elementID"].style.overflowX="scroll"; |
||||||||||||||
float |
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое - одна строка обтекающего текста может быть на той же линии, что и сам элемент. Возможные значения:
[window.]document.getElementById("elementID").style.styleFloat [window.]document.getElementById("elementID").style.cssFloat |
||||||||||||||
clear |
Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.
Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон. Возможные значения:
|
||||||||||||||
clip |
Свойство clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области – прямоугольник. Все остальное остается только в мечтах. Параметр clip работает только для абсолютно позиционированных элементов. clip: rect(Y1, X1, Y2, X2) | auto В качестве значения используется расстояние от края элемента до области вырезки, которое задается в единицах CSS - пикселы (px), проценты (%) и др. Если край области нужно оставить без изменений, следует поставить параметр auto, положение остальных значений показано на рисунке: |
||||||||||||||
|
|||||||||||||||
height |
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>). значение | проценты | auto По умолчанию высота не включает значения границ (border), полей (padding) и отступов (margin). Изменить метод расчета высоты можно с помощью свойства box-sizing. |
||||||||||||||
max-height | Устанавливает максимальную высоту элемента Например: div.block {max-height: 200px;} |
||||||||||||||
min-height | Устанавливает минимальную высоту элемента Например: div.block {min-height: 100px;} |
||||||||||||||
width |
Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <img>). значение | проценты | auto По умолчанию ширина не включает значения границ (border), полей (padding) и отступов (margin). Изменить метод расчета ширины можно с помощью свойства box-sizing. |
||||||||||||||
max-width | Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width. | ||||||||||||||
min-width | Устанавливает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки. | ||||||||||||||
box-sizing |
Устанавливает метод расчета ширины и высоты элемента. Возможные значения:
|
||||||||||||||
visibility |
Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента,
хотя он и становится не виден, место, которое элемент занимает, остается за ним.
Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует
использовать абсолютное позиционирование или воспользоваться свойством display. Возможные значения:
[window.]document.getElementById("elementID").style.visibility = "visible"; [window.]document.all["elementID"].style.visibility = "visible"; |
||||||||||||||
object-fit |
Определяет соотношение сторон таких элементов, как <img> и <video>, если у них задана ширина или высота.
Свойство object-fit может как сохранять исходные пропорции элемента, так и искажать их. Возможные значения:
|
||||||||||||||
column-count |
Определяет количество колонок в многоколоночном тексте. Например: div {column-count: 3;} div {column-count: auto;} /* вычисляется на основе свойств column-width и column-gap */ |
||||||||||||||
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;} |
||||||||||||||
column-gap |
Определяет расстояние между колонками в многоколоночном тексте. Например: div {column-gap: 30px;} div {column-gap: 2rem;} |
||||||||||||||
column-rule |
Определяет разделительную линию между колонками в многоколоночном тексте. Например: div {column-rule: 1px solid #e31e24;} Пример |
||||||||||||||
Позиционирование | |||||||||||||||
bottom |
Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов.
Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).
При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента, а при абсолютном - относительно нижнего края окна документа. |
||||||||||||||
left |
Устанавливает расстояние от левого края родительского элемента (не включая границу, поле и отступ)
до левого края дочернего элемента. Отсчет зависит от значения параметра position. Если position: absolute, и нет родительского элемента, то положение элемента определяется от левого края окна браузера. Если position: absolute, а у родительского элемента position: relative, то положение элемента определяется от левого края родительского элемента. Если position: relative, то left отсчитывается от левого края исходного положения элемента, при этом место, которое элемент должен был занимать, остается пустым. |
||||||||||||||
position |
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на Web-странице. Возможные значения:
Прилипание position:sticky не сработает, если:
В поддержке position: sticky; браузерами еще есть проблемы. |
||||||||||||||
right | Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента. Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края. В случае значения relative, аргумент right отсчитывается от правого края исходного положения элемента. | ||||||||||||||
top |
Устанавливает расстояние от верхнего края родительского элемента (не включая границу, поле и отступ)
до верхнего края дочернего элемента. Отсчет зависит от значения параметра position. Если position: absolute, и нет родительского элемента, то положение элемента определяется от верхнего края окна браузера. Если position: absolute, а у родительского элемента position: relative, то положение элемента определяется от верхнего края родительского элемента. Если position: relative, то left отсчитывается от верхнего края исходного положения элемента, при этом место, которое элемент должен был занимать, остается пустым. |
||||||||||||||
z-index |
Любые позиционированные элементы на Web-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану.
Каждый элемент может находиться как ниже, так и выше других объектов Web-страницы, их размещением по z-оси и управляет атрибут z-index. Обращение из javascript: this.style.zIndex=100 |
||||||||||||||
Таблицы | |||||||||||||||
border-collapse |
Способ отображения границы вокруг ячеек таблицы. Ячейка таблицы может иметь общую рамку с соседними ячейками или свою собственную
(в месте стыка получится линия двойной толщины, если для таблицы установлено свойство border-spacing со значением 0). Возможные значения:
|
||||||||||||||
border-spacing |
Расстояние между границами ячеек в таблице. Можно использовать одно или два значения, разделяя их пробелом.
|
||||||||||||||
table-layout |
Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом. Возможные значения:
|
||||||||||||||
caption-side |
Определяет положение заголовка таблицы, который задается с помощью тега CAPTION, относительно самой таблицы.
Параметр caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю
устанавливается через атрибут text-align. Возможные значения:
|
||||||||||||||
Списки | |||||||||||||||
list-style-image |
Устанавливает адрес изображения, которое служит маркером списка. Этот атрибут наследуется,
поэтому для отдельных элементов списка для восстановления маркера используется значение none. Возможные значения: none | url('путь к файлу') |
||||||||||||||
list-style-position |
Определяет, как будет размещаться маркер относительно текста. Возможные значения:
|
||||||||||||||
list-style-type |
Изменяет вид маркера для каждого элемента списка.
Этот атрибут используется только в случае, когда значение свойства list-style-image установлено как none.
Маркеры различаются для маркированного списка (ul) и нумерованного (ol). Возможные значения:
|
||||||||||||||
list-style | Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. | ||||||||||||||
counter-increment | Увеличение значения счётчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов на странице. Может быть отображен, используя функцию counter() или counters() в свойстве content и псевдоэлементы :after и :before. Это позволяет создавать многоуровневые списки, а также списки, в которых нумерация и вид задаются через стили. Пример | ||||||||||||||
counter-reset | Устанавливает идентификатор, в котором будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика. Такой счётчик можно выводить с помощью функции counter() или counters() в свойстве content и псевдоэлементов :after и :before. Пример | ||||||||||||||
Эффекты | |||||||||||||||
cursor |
Возможные значения (Наведите курсор на соответствующее описание!):
|
||||||||||||||
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-width |
Определяет ширину полосы прокрутки. Возможные значения:
|
||||||||||||||
Переходы
|
|||||||||||||||
Смена свойств происходит при наступлении определенного события. Например, при наведении указателя мышки (псевдокласс :hover) или при клике (переключение классов с помощью JavaScript). | |||||||||||||||
transition-property |
Устанавливает к каким CSS-свойствам будет применен эффект перехода. Возможные значения:
Объектная модель: |
||||||||||||||
transition-duration |
Устанавливает продолжительность перехода в секундах или миллисекундах.
Объектная модель: |
||||||||||||||
transition-timing-function |
Устанавливает временную функцию изменения скорости перехода. Возможные значения:
Объектная модель: |
||||||||||||||
transition-delay |
Устанавливает задержку перехода в секундах или миллисекундах.
Объектная модель: |
||||||||||||||
transition |
Устанавливает сразу несколько параметров перехода.
Объектная модель: |
||||||||||||||
Трансформации
|
|||||||||||||||
transform |
Устанавливает вид трасформации. Возможные значения:
Объектная модель: |
||||||||||||||
transform-origin |
Устанавливает центр трансформации. Имеет 2 параметра:
По умолчанию трансформация происходит относительно центра элемента.
Пример |
||||||||||||||
Анимация
|
|||||||||||||||
@keyframes |
Содержит имя анимации и устанавливает ключевые кадры,
которые создаются с помощью ключевых слов from (0%) и to (100%) или с помощью любого числа процентных пунктов. |
||||||||||||||
animation-name |
Имя анимации. Текстовая строка, которая должна начинаться с латинской буквы или подчёркивания (_),
может содержать также цифры от 0 до 9 и дефис (-).
Объектная модель: |
||||||||||||||
animation-duration |
Устанавливает продолжительность анимации в секундах или миллисекундах.
Объектная модель: |
||||||||||||||
animation-timing-function |
Устанавливает временную функцию изменения скорости перехода.
Объектная модель: |
||||||||||||||
animation-delay |
Устанавливает задержку анимации в секундах или миллисекундах.
Объектная модель: |
||||||||||||||
animation-iteration-count |
Устанавливает число повторов анимации.
Объектная модель: |
||||||||||||||
animation-direction |
Устанавливает направление анимации.
Объектная модель: |
||||||||||||||
animation-play-state |
Устанавливает проигрывать или остановить анимацию.
Объектная модель: |
||||||||||||||
animation-fill-mode |
Устанавливает, какие стили применяются к элементу, когда анимация не проигрывается (до начала, после завершения, при остановке).
Объектная модель: |
||||||||||||||
animation |
Устанавливает сразу несколько параметров анимации.
Объектная модель: |
Смотрите также:
.
Прокомментировать/Отблагодарить