По алфавиту:
A B C D E F H L M O P Q R T U V W Z
По разделам:
Цвет|фон Границы Размеры Margins Paddings Позиционирование Шрифт Текст Список Таблица Форматирование Анимация Контент Печать @-правила Псевдоклассы Псевдоэлементы Селекторы
Свойство | Характеристики | Описание |
---|---|---|
animation |
Значение:
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
animation-fill-mode animation-play-state [, ...] | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animation="value"
|
Позволяет задать сразу несколько параметров анимации, которые перечисляются через пробел. Если какое-то из значений не будет указано, браузер применит вместо него значение по умолчанию. W3C |
animation- delay |
Значение:
<время> [,<время>, ...] | inherit
По умолчанию: 0s
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationDelay="value"
|
Устанавливает время задержки перед запуском анимации. Значения указываются в секундах (s) или миллисекундах (ms). W3C |
animation- direction |
Значение: normal | alternate | reverse | alternate-reverse | inherit
По умолчанию: normal
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationDirection="value"
|
Задает направление анимации. W3C |
animation- duration |
Значение:
<время> [,<время>, ...] | inherit
По умолчанию: 0s
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationDuration="value"
|
Устанавливает продолжительность одного цикла анимации. Значения указываются в секундах (s) или миллисекундах (ms). W3C |
animation-fill- mode |
Значение: none | forwards | backwards | both | inherit
По умолчанию: none
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationFillMode="value"
|
Определяет, какие стили применять к элементу до и после анимации. W3C |
animation- iteration-count |
Значение: <число> | infinite | inherit
По умолчанию: 1
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
![]() JavaScript: o.style.animationIterationCount="value"
|
Устанавливает количество повторений анимации. W3C |
animation- name |
Значение:
none | <имя анимации> [, <имя анимации>, ...] | inherit
По умолчанию: none
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationName="value"
|
Указывает список имен анимаций, которые должны быть применены к выбранному элементу. Используется совместно с правилом @keyframes. W3C |
animation- play-state |
Значение: running | paused | inherit
По умолчанию: running
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationPlayState="value"
|
Ставит или снимает анимацию с паузы. W3C |
animation- timing-function |
Значение: ease | ease-in | ease-out | ease-in-out | linear |
step-start | step-end | steps | cubic-bezier | inherit
По умолчанию: ease
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationTimingFunction="value"
|
Задает плавность анимации (скорость переходов от одного состояния к другому). W3C |
background |
Значение: значения свойств через пробел | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
![]() JavaScript: o.style.background="value"
|
Используется для одновременного определения сразу нескольких характеристик фона, которые указываются через пробел в любом порядке. Если какое-то из значений не будет указано, браузер применит вместо него значение по умолчанию. W3C |
background- attachment |
Значение: fixed | scroll | local [, fixed | scroll |
local] | inherit
По умолчанию: scroll
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.backgroundAttachment="value"
|
Используется для управления поведением фонового изображения при прокрутке элемента. Разрешается указывать через запятую несколько значений в случае использования более одного фонового изображения. W3C |
background- clip |
Значение: padding-box | border-box | content-box [, padding-box |
border-box | content-box ] | inherit
По умолчанию: border-box
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.backgroundClip="value"
|
Указывает браузеру какую область элемента следует использовать для фона (остальное обрезается). Разрешается указывать через запятую несколько значений в случае использования более одного фонового изображения. W3C |
background- color |
Значение: цвет | transparent | inherit
По умолчанию: transparent
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.backgroundColor="value"
|
Определяет цвет фона элемента и принимает те же значения цвета, что и свойство color. W3C |
background- image |
Значение: url("path_1") [, url("path_2"),...]
| none | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.backgroundImage="value"
|
Устанавливает изображение в качестве фона элемента. Если в значении указывается путь к нескольким файлам изображений, то они перечисляются через запятую в формате url("path_1"), url("path_2"), ..., где сам путь можно писать как в кавычках, так и без них. При этом изображения указанные впереди, будут располагаться выше остальных в порядке своего перечисления в значении свойства. W3C |
background- origin |
Значение: padding-box | border-box | content-box [, padding-box |
border-box | content-box ] | inherit
По умолчанию: padding-box
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
![]() JavaScript: o.style.backgroundOrigin="value"
|
Указывает браузеру относительно чего нужно позиционировать фоновое изображение внутри элемента. Свойство не применяется, если значение свойства background-attachment задано как fixed. Кроме того, если задано свойство background-size, то приоритет будет отдан браузером значению этого свойства. Разрешается указывать через запятую несколько значений в случае использования более одного фонового изображения. W3C |
background- position |
Значение: [left | center | right | <проценты> |
<размер>] || [top | center | bottom | <проценты> |
<размер>] | inherit
По умолчанию: 0% 0%
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.backgroundPosition="value"
|
Определяет начальное положение фонового изображения. Свойство может принимать как одну пару значений (или одиночное значение), так и несколько пар значений (или одиночных значений), разделяемых запятой для каждого изображения, указанного в значении свойства background-image. W3C |
background- repeat |
Значение: repeat-x | repeat-y | [repeat | no-repeat | space |
round] {1,2} | inherit
По умолчанию: repeat
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.backgroundRepeat="value"
|
Данное свойство позволяет заполнять фон изображением, тиражируя его по-своему усмотрению. Допустимо указывать через запятую сразу два значения: первое ключевое слово задаёт повторение по горизонтали, второе – по вертикали. При этом ключевыми словами не должны быть repeat-x или repeat-y. W3C |
background- size |
Значение: [ <размер> | <проценты> | auto
] {1,2} | cover | contain | inherit
По умолчанию: auto
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.backgroundSize="value"
|
Используется для масштабирования фонового изображения. Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. При этом пропорции картинки сохраняются. Если через пробел заданы два значения, то они задают ширину и высоту фоновой картинки. W3C |
border |
Значение: border-width border-style border-color | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
![]() JavaScript: o.style.border="value"
|
Задает все характеристики границы элемента одновременно. W3C |
border-bottom |
Значение: border-bottom-width border-bottom-style border-bottom-color | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
JavaScript: o.style.borderBottom="value"
|
Задает все характеристики нижней границы элемента одновременно. W3C |
border-bottom- color |
Значение: <цвет> | transparent | inherit
По умолчанию: значение св-ва color
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderBottomColor="value"
|
Используется для установки цвета нижней границы элемента. Свойство должно использоваться в паре с border-style или border-bottom-style, иначе оно не даст никакого эффекта. W3C |
border-bottom- left-radius |
Значение: <радиус> | проценты
/ [<радиус> | проценты] | inherit
По умолчанию: 0
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderBottomLeftRadius="value"
|
Используется для скругления нижнего левого угла элемента. Принимает в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу. Свойство срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента. W3C |
border-bottom- right-radius |
Значение: <радиус> | проценты
/ [<радиус> | проценты] | inherit
По умолчанию: 0
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.borderBottomRightRadius="value"
|
Используется для скругления нижнего правого угла элемента. Принимает в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу. Свойство срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента. W3C |
border-bottom- style |
Значение: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.borderBottomStyle="value"
|
Используется для установки стиля нижней границы элемента. W3C |
border-bottom- width |
Значение: <размер> | thin | medium | thick | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderBottomWidth.="value"
|
Используется для установки ширины нижней границы элемента. W3C |
border-collapse |
Значение: collapse | separate | inherit
По умолчанию: separate
Применяется: к таблице и ко всем элементам, у которых display: table | inline-table
Анимируется: нет
Наследуется: да
JavaScript: o.style.borderCollapse="value"
|
Определяет, как отображать границы вокруг ячеек таблицы. W3C |
border-color |
Значение: [<цвет> | transparent]
{1,4} | inherit
По умолчанию: значение св-ва color
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.borderColor="value"
|
Используется для установки цвета границ. Может принимать через пробел два, три или даже четыре значения, которые позволяют задать собственный цвет для каждой из границ элемента. Свойство должно использоваться в паре с border-style, иначе оно не даст никакого эффекта. W3C |
border-left |
Значение: border-left-width border-left-style border-left-color | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
JavaScript: o.style.borderLeft="value"
|
Задает все характеристики левой границы элемента одновременно. W3C |
border-left- color |
Значение: <цвет> | transparent | inherit
По умолчанию: значение св-ва color
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderLeftColor="value"
|
Используется для установки цвета левой границы элемента. Свойство должно использоваться в паре с border-style или border-left-style, иначе оно не даст никакого эффекта. W3C |
border-left- style |
Значение: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.borderLeftStyle="value"
|
Используется для установки стиля левой границы элемента. W3C |
border-left- width |
Значение: <размер> | thin | medium | thick | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderLeftWidth.="value"
|
Используется для установки ширины левой границы элемента. W3C |
border-radius |
Значение: [<радиус> | проценты] {1,4}
[ / [<радиус>
| проценты] {1,4}] | inherit
По умолчанию: см. для каждого угла
Применяется: ко всем элементам кроме таблиц с
border-collapse: collapse
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.borderRadius="value"
|
Используется для скругления углов элемента. Может принимать через пробел два, три или даже четыре значения. Принимает в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу. Свойство срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента. W3C |
border-right |
Значение: border-right-width border-right-style border-right-color | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
JavaScript: o.style.borderRight="value"
|
Задает все характеристики правой границы элемента одновременно. W3C |
border-right- color |
Значение: <цвет> | transparent | inherit
По умолчанию: значение св-ва color
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderRightColor="value"
|
Используется для установки цвета правой границы элемента. Свойство должно использоваться в паре с border-style или border-right-style, иначе оно не даст никакого эффекта. W3C |
border-right- style |
Значение: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.borderRightStyle="value"
|
Используется для установки стиля правой границы элемента. W3C |
border-right- width |
Значение: <размер> | thin | medium | thick | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderRightWidth.="value"
|
Используется для установки ширины правой границы элемента. W3C |
border-spacing |
Значение: <размер> [<размер>] | inherit
По умолчанию: 2px
Применяется: к таблице и ко всем элементам, у которых display: table | inline-table
Анимируется: да
Наследуется: да
![]() JavaScript: o.style.borderSpacing="value"
|
Устанавливает расстояние между границами смежных ячеек в случае, когда border-collapse: separate. Если указано два значения, первое устанавливает расстояние по вертикали, второе по горизонтали. W3C |
border-style |
Значение: [none | hidden | dotted | dashed | solid | double | groove |
ridge | inset | outset] {1,4} | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.borderStyle="value"
|
Используется для установки стиля границ элемента. Может принимать через пробел два, три или даже четыре значения для установки разного стиля границ для каждой из сторон элемента. W3C |
border-top |
Значение: border-top-width border-top-style border-top-color | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
JavaScript: o.style.borderTop="value"
|
Задает все характеристики верхней границы элемента одновременно. W3C |
border-top- color |
Значение: <цвет> | transparent | inherit
По умолчанию: значение св-ва color
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderTopColor="value"
|
Используется для установки цвета верхней границы элемента. Свойство должно использоваться в паре с border-style или border-top-style, иначе оно не даст никакого эффекта. W3C |
border-top- left-radius |
Значение: <радиус> | проценты
/ [<радиус> | проценты] | inherit
По умолчанию: 0
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.borderTopLeftRadius="value"
|
Используется для скругления верхнего левого угла элемента. Принимает в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу. Свойство срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента. W3C |
border-top- right-radius |
Значение: <радиус> | проценты
/ [<радиус> | проценты] | inherit
По умолчанию: 0
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderTopRightRadius="value"
|
Используется для скругления верхнего правого угла элемента. Принимает в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу. Свойство срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента. W3C |
border-top- style |
Значение: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.borderTopStyle="value"
|
Используется для установки стиля верхней границы элемента. W3C |
border-top- width |
Значение: <размер> | thin | medium | thick | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderTopWidth.="value"
|
Используется для установки ширины верхней границы элемента. W3C |
border-width |
Значение: [<размер> | thin | medium |
thick] {1,4} | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.borderWidth.="value"
|
Используется для установки ширины границ элемента. Может принимать через пробел два, три или даже четыре значения для установки разной ширины границы для каждой из сторон элемента. W3C |
bottom |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: auto
Применяется: к позиционированным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.bottom="value"
|
Задает смещение позиционированного элемента относительно нижнего края элемента. Проценты рассчитываются относительно высоты родительского элемента. W3C |
box-shadow |
Значение: none | <тень> [,<тень>] | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.boxShadow="value"
|
Создает одну или несколько теней элемента, значения которых перечисляются через запятую. Если для элемента задано свойство border-radius, то тень также получится с закруглёнными углами. Кроме того, добавление тени увеличивает ширину элемента. W3C |
box-sizing |
Значение: content-box | border-box | padding-box | inherit
По умолчанию: content-box
Применяется: ко всем элементам, к которым применимы свойства width и height
Анимируется: нет
Наследуется: нет
JavaScript: o.style.boxSizing="value"
|
Используется для изменения алгоритма расчёта ширины и высоты элемента. W3C |
caption-side |
Значение: top | bottom | inherit
По умолчанию: top
Применяется: к заголовку таблицы и ко всем элементам, у которых display: table-caption
Анимируется: нет
Наследуется: да
JavaScript: o.style.captionSide="value"
|
Определяет положение заголовка до или после таблицы. W3C |
clear |
Значение: none | left | right | both | inherit
По умолчанию: none
Применяется: к блочным элементам
Анимируется: нет
Наследуется: нет
![]() JavaScript: o.style.clear="value"
|
Определяет порядок обтекания данным блочным элементом плавающих элементов, которые идут в коде выше (до него). W3C |
color |
Значение: <цвет> | transparent | inherit
По умолчанию: зависит от браузера
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.color="value"
|
Используется для установки цвета текста. Применение данного свойства влияет не только на сам текст, но и на цвет границ элемента в случае, если он не будет установлен явно. Поэтому, если нужно задать цвет границ отличный от цвета текста, необходимо задать его явно при помощи свойства border-color. W3C |
content |
Значение:
<строка> | attr(<атрибут>) | open-quote | close-quote
| no-open-quote | no-close-quote | url | counter | normal | none | inherit
По умолчанию: normal
Применяется: к псевдо-элементам ::before and ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.content="value"
|
Предназначено для вставки в текст веб-страницы генерируемого содержимого. Используется совместно с псевдоэлементами ::after и ::before, которые указывают куда вставлять генерируемое содержимое. W3C |
counter-increment |
Значение: none | <переменная> | <число> | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.counterIncrement="value"
|
Увеличивает одно или несколько значений указанного в качестве значения счетчика, который в свою очередь задается свойством counter-reset. W3C |
counter-reset |
Значение: none | <переменная> | <число> | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
![]() JavaScript: o.style.counterReset="value"
|
Устанавливает счетчик, а также начальное значение счетчика. Для вывода текущего значения счетчика используется свойство content со значением counter(id_счетчика). W3C |
direction |
Значение: ltr | rtl | inherit
По умолчанию: ltr
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.direction="value"
|
Устанавливает направление текста в пределах элемента. W3C |
display |
Значение: block | inline | inline-block | inline-table | list-item | none |
run-in | table | table-caption | table-cell | table-column-group | table-column |
table-footer-group | table-header-group | table-row | table-row-group | inherit
По умолчанию: зависит от элемента
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.display="value"
|
Указывает тип элемента, определяя тем самым, как элемент будет показан в документе. W3C |
empty-cells |
Значение: show | hide | inherit
По умолчанию: show
Применяется: к ячейкам таблицы и ко всем элементам, у которых display: table-cell
Анимируется: нет
Наследуется: да
JavaScript: o.style.emptyCells="value"
|
Устанавливает способ отображения пустых ячеек таблицы. Не работает, если border-collapse: collapse. W3C |
float |
Значение: none | left | right | inherit
По умолчанию: none
Применяется: ко всем элементам, кроме абсолютно и фиксированно позиционированных
Анимируется: нет
Наследуется: нет
JavaScript: o.style.cssFloat="value"
|
Задает выравнивание элемента и его обтекание другими элементами. W3C |
font |
Значение:
[font-style font-variant font-weight font-stretch]
font-size[/line-height] font-family | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: да
![]() JavaScript: o.style.font="value"
|
Дает возможность задать через пробел несколько характеристик шрифта одновременно. Имеет значение порядок указания значений свойств:
первыми, если они конечно будут указываться, должны записываться значения свойств font-style,
font-variant или font-weight в любом порядке, затем необходимо указывать
значение свойства font-size, а также при необходимости через слэш '/'
значение свойства line-height, в конце указывается значение свойства
|
font-family |
Значение:
<шрифт> | <семейство> [, <шрифт> |
<семейство> [, ...]] | inherit
По умолчанию: зависит от браузера
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.fontFamily="value"
|
Указывает браузеру на шрифт, который нужно использовать внутри элемента. Если в названии шрифта содержатся пробелы, то его нужно указывать в кавычках. W3C |
font-size |
Значение:
<размер> | <проценты> | medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.fontSize="value"
|
Устанавливает размер шрифта, который будет использоваться внутри элемента. Проценты рассчитываются относительно размера шрифта родительского элемента. W3C |
font-style |
Значение:
normal | italic | oblique | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.fontStyle="value"
|
Устанавливает начертание шрифта, которое будет использоваться внутри элемента. W3C |
font-variant |
Значение:
normal | small-caps | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
![]() JavaScript: o.style.fontVariant="value"
|
Используется для конвертации строчных букв в прописные уменьшенного размера. W3C |
font-weight |
Значение:
bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.fontWeight="value"
|
Устанавливает насыщенность шрифта, которая будет использоваться внутри элемента. W3C |
height |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: auto
Применяется: ко всем элементам кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов
Анимируется: да
Наследуется: нет
JavaScript: o.style.height="value"
|
Задает высоту элемента. По умолчанию высота элемента рассчитывается без учета отступов и границ. W3C |
left |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: auto
Применяется: к позиционированным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.left="value"
|
Задает смещение позиционированного элемента относительно левого края элемента. Проценты рассчитываются относительно ширины родительского элемента. W3C |
letter-spacing |
Значение: <размер> | normal | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.letterSpacing="value"
|
Устанавливает интервал между символами. Допускается использование отрицательных значений. W3C |
line-height |
Значение: <множитель> | <размер> | <проценты> | normal | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
![]() JavaScript: o.style.lineHeight="value"
|
Устанавливает межстрочный интервал, т.е. расстояние между строками. Проценты рассчитываются относительно высоты шрифта. W3C |
list-style |
Значение: list-style-type list-style-position list-style-image | inherit
По умолчанию: см. каждое свойство
Применяется: К элементам 'li', 'ol' и 'ul', а также ко всем элементам, у которых display: list-item
Анимируется: нет
Наследуется: да
JavaScript: o.style.listStyle='value'
|
Позволяет задать через пробел значения свойств списка одновременно, перечисляя их в указанном порядке. В случае отсутствия какого-либо значения, браузер использует значение данного свойства по умолчанию. W3C |
list-style-image |
Значение: none | url("path") | inherit
По умолчанию: none
Применяется: К элементам 'li', 'ol' и 'ul', а также ко всем элементам, у которых display: list-item
Анимируется: нет
Наследуется: да
JavaScript: o.style.listStyleImage='value'
|
Позволяет использовать вместо стандартных маркеров изображения. W3C |
list-style-position |
Значение: inside | outside | inherit
По умолчанию: disc для 'ul'; decimal для 'ol'
Применяется: К элементам 'li', 'ol' и 'ul', а также ко всем элементам, у которых display: list-item
Анимируется: нет
Наследуется: да
JavaScript: o.style.listStylePosition="value"
|
Устанавливает вид маркера для каждого элемента списка. При этом цвет маркера будет таким же как и цвет установленный для текста в элементе. W3C |
list-style-type |
Значение:
circle | disc | square | armenian | decimal | decimal-leading-zero |
georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit
По умолчанию: disc для 'ul'; decimal для 'ol'
Применяется: К элементам 'li', 'ol' и 'ul', а также ко всем элементам, у которых display: list-item
Анимируется: нет
Наследуется: да
![]() JavaScript: o.style.listStyleType="value"
|
Устанавливает вид маркера для каждого элемента списка. При этом цвет маркера будет таким же как и цвет установленный для текста в элементе. W3C |
margin |
Значение: [<размер> | <проценты> |
auto] {1,4} | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column; кроме того, значения относящиеся к margin-top и margin-bottom
не применяются к строчным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.margin="value"
|
Используется для установки внешних отступов элемента. Может принимать через пробел два, три или даже четыре значения, которые позволяют задать внешние отступы для каждой из сторон элемента. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
margin-bottom |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column; кроме того, свойство не имеет эффекта в случае применения
к строчным элементам кроме того, свойство не имеет эффекта в случае применения
к строчным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.marginBottom="value"
|
Используется для установки внешнего отступа нижнего края элемента. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
margin-left |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
JavaScript: o.style.marginLeft="value"
|
Используется для установки внешнего отступа левого края элемента. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
margin-right |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.marginRight="value"
|
Используется для установки внешнего отступа правого края элемента. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
margin-top |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column; кроме того, свойство не имеет эффекта в случае применения
к строчным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.marginTop="value"
|
Используется для установки внешнего отступа верхнего края элемента. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
max-height |
Значение: <размер> | <проценты> | inherit
По умолчанию: 0
Применяется: ко всем элементам кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов
Анимируется: да
Наследуется: нет
JavaScript: o.style.maxHeight="value"
|
Устанавливает максимально допустимое значение высоты элемента. Если высота элемента будет больше, чем значение свойства, то браузер отдаст приоритет значению свойства. W3C |
max-width |
Значение: <размер> | <проценты> | inherit
По умолчанию: 0
Применяется: ко всем элементам кроме незаменяемых строчных элементов, строк таблицы и групп строк
Анимируется: да
Наследуется: нет
JavaScript: o.style.maxWidth="value"
|
Устанавливает максимально допустимое значение ширины элемента. Если ширина элемента будет больше, чем значение свойства, то браузер отдаст приоритет значению свойства. W3C |
min-height |
Значение: <размер> | <проценты> | inherit
По умолчанию: 0
Применяется: ко всем элементам кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.minHeight="value"
|
Устанавливает минимально допустимое значение высоты элемента. Если высота элемента будет меньше, чем значение свойства, то браузер отдаст приоритет значению свойства. W3C |
min-width |
Значение: <размер> | <проценты> | inherit
По умолчанию: 0
Применяется: ко всем элементам кроме незаменяемых строчных элементов, строк таблицы и групп строк
Анимируется: да
Наследуется: нет
JavaScript: o.style.minWidth="value"
|
Устанавливает минимально допустимое значение ширины элемента. Если ширина элемента будет меньше, чем значение свойства, то браузер отдаст приоритет значению свойства. W3C |
opacity |
Значение: <число> | inherit
По умолчанию: 1
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.opacity="value"
|
Определяет уровень прозрачности элемента. В качестве значения принимает числа от 0.0, когда элемент становится полностью прозрачным, до 1, когда элемент становится полностью непрозрачным. W3C |
orphans |
Значение: <число> | inherit
По умолчанию: 2
Применяется: к блочным элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.orphans="value"
|
Задает минимальное количество строк блочного элемента, которые должны остаться при печати документа на предыдущей странице в случае переноса части содержимого блочного элемента на следующую страницу из-за нехватки места на текущем листе бумаги. Свойство имеет эффект, если текст расположен на двух и более страницах. W3C |
outline |
Значение: outline-color outline-style outline-width | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
![]() JavaScript: o.style.outline="value"
|
Одновременно устанавливает цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента. Задавать параметры линии на отдельных сторонах элемента не разрешается. Кроме того, в отличие от границ свойство outline не влияет на положение элемента и его ширину. W3C |
outline-color |
Значение: <цвет> | invert | inherit
По умолчанию: invert
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.outlineColor="value"
|
Устанавливает цвет внешней границы элемента. W3C |
outline-offset |
Значение: <размер> | inherit
По умолчанию: 0
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.outlineOffset="value"
|
Задает расстояние между внешней и внутренней границами элемента. W3C |
outline-style |
Значение: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.outlineStyle="value"
|
Устанавливает стиль внешней границы элемента. При этом не влияет на положение элемента и его ширину. W3C |
outline-width |
Значение: thin | medium | thick | <размер> | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.outlineWidth="value"
|
Устанавливает толщину внешней границы элемента. При этом не влияет на положение элемента и его ширину. Свойство должно использоваться в паре с outline-style, у которого значение не установлено в none, иначе оно не даст никакого эффекта. W3C |
overflow |
Значение: visible | hidden | scroll | auto | inherit
По умолчанию: visible
Применяется: к блочным элементам, а также ко всем элементам, у которых display: inline-block
Анимируется: нет
Наследуется: нет
JavaScript: o.style.overflow="value"
|
Указывает браузеру, как следует отображать содержимое блочного элемента в случае его переполнения. W3C |
overflow-x |
Значение: visible | hidden | scroll | auto | inherit
По умолчанию: visible
Применяется: к блочным элементам, а также ко всем элементам, у которых display: inline-block
Анимируется: нет
Наследуется: нет
JavaScript: o.style.overflowX="value"
|
Указывает браузеру, как следует отображать содержимое блочного элемента в случае его переполнения в горизонтальном направлении. W3C |
overflow-y |
Значение: visible | hidden | scroll | auto | inherit
По умолчанию: visible
Применяется: к блочным элементам, а также ко всем элементам, у которых display: inline-block
Анимируется: нет
Наследуется: нет
JavaScript: o.style.overflowY="value"
|
Указывает браузеру, как следует отображать содержимое блочного элемента в случае его переполнения в вертикальном направлении. W3C |
padding |
Значение:
[<размер> | <проценты> |
auto] {1,4} | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group |
table-header-group | table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.padding="value"
|
Используется для установки внутренних отступов (полей) элемента. Может принимать через пробел два, три или даже четыре значения, которые позволяют задать поля для каждой из сторон элемента. Использование отрицательных значений при установке полей не допускается. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
padding- bottom |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group |
table-header-group | table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
JavaScript: o.style.paddingBottom="value"
|
Используется для установки внутреннего отступа (поля) нижнего края элемента. Использование отрицательных значений при установке полей не допускается. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
padding-left |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group |
table-header-group | table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
JavaScript: o.style.paddingLeft="value"
|
Используется для установки внутреннего отступа (поля) левого края элемента. Использование отрицательных значений при установке полей не допускается. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
padding-right |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group |
table-header-group | table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
JavaScript: o.style.paddingRight="value"
|
Используется для установки внутреннего отступа (поля) правого края элемента. Использование отрицательных значений при установке полей не допускается. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
padding-top |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group |
table-header-group | table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.paddingTop="value"
|
Используется для установки внутреннего отступа (поля) верхнего края элемента. Использование отрицательных значений при установке полей не допускается. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
page-break-after |
Значение: auto | always | avoid | left | right | inherit
По умолчанию: auto
Применяется: к блочным элементам, которые находятся в обычном потоке элементов
Анимируется: нет
Наследуется: нет
JavaScript: o.style.pageBreakAfter="value"
|
Добавляет разрыв страницы при печати документа после указанного элемента. W3C |
page-break-before |
Значение: auto | always | avoid | left | right | inherit
По умолчанию: auto
Применяется: к блочным элементам, которые находятся в обычном потоке элементов
Анимируется: нет
Наследуется: нет
JavaScript: o.style.pageBreakBefore="value"
|
Добавляет разрыв страницы при печати документа перед указанным элементом. W3C |
page-break-inside |
Значение: auto | avoid | inherit
По умолчанию: auto
Применяется: к блочным элементам, которые находятся в обычном потоке элементов
Анимируется: нет
Наследуется: нет
JavaScript: o.style.pageBreakInside="value"
|
Разрешает или запрещает разрыв страницы внутри указанного элемента при печати. W3C |
position |
Значение: absolute | fixed | relative | static | inherit
По умолчанию: static
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
![]() JavaScript: o.style.position="value"
|
Определяет порядок расположения элементов относительно окна браузера, других элементов на веб-странице или относительно текущего местоположения элемента. W3C |
quotes |
Значение: none | <Строка> <Строка> | inherit
По умолчанию: зависит от браузера
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.quotes="value"
|
Используется для определения вида кавычек при их автоматическом добавлении, например, в случае использования элемента 'q'. В качестве значений свойство принимает символ открывающей кавычки и символ закрывающей кавычки. При этом сами символы также должны быть взяты в кавычки W3C |
right |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: auto
Применяется: к позиционированным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.right="value"
|
Задает смещение позиционированного элемента относительно правого края элемента. Проценты рассчитываются относительно ширины родительского элемента. W3C |
table-layout |
Значение: auto | fixed | inherit
По умолчанию: auto
Применяется: к таблице и ко всем элементам, у которых display: table | inline-table
Анимируется: нет
Наследуется: нет
JavaScript: o.style.tableLayout="value"
|
Управляет процессом формирования браузером макета таблицы, точнее ширины ячеек. W3C |
text-align |
Значение: center | justify | left | right | start | end | inherit
По умолчанию:
start, т.е. left если направление текста слева направо, и right если направление текста справа налево
Применяется: к блочным элементам
Анимируется: нет
Наследуется: да
![]() JavaScript: o.style.textAlign="value"
|
Определяет горизонтальное выравнивание текста в пределах элемента. W3C |
text-decoration |
Значение:
none | [line-through overline
underline] | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.textDecoration="value"
|
Используется для оформления текста, например, подчеркиванием. Разрешается применять более одного стиля, перечисляя значения через пробел. W3C |
text-indent |
Значение: <размер> | <проценты> | inherit
По умолчанию: 0
Применяется: к блочным элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.textIndent="value"
|
Устанавливает красную строку, т.е. отступ первой строки в абзаце. Проценты рассчитываются относительно ширины родительского элемента. W3C |
text-transform |
Значение: none | capitalize | lowercase | uppercase | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.textTransform="value"
|
Используется для управления преобразованием текста элемента в прописные или строчные символы. W3C |
top |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: auto
Применяется: к позиционированным элементам
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.top="value"
|
Задает смещение позиционированного элемента относительно верхнего края элемента. Проценты рассчитываются относительно высоты родительского элемента. W3C |
transition |
Значение:
transition-property transition-delay transition-duration transition-timing-function
[, ...] | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.transition="value"
|
Позволяет задать сразу несколько параметров перехода, которые перечисляются через пробел. Если какое-то из значений не будет указано, браузер применит вместо него значение по умолчанию. W3C |
transition- delay |
Значение:
<время> [,<время>, ...] | inherit
По умолчанию: 0s
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.transitionDelay="value"
|
Устанавливает время задержки перед запуском перехода. Значения указываются в секундах (s) или миллисекундах (ms). W3C |
transition- duration |
Значение:
<время> [,<время>, ...] | inherit
По умолчанию: 0s
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.transitionDuration="value"
|
Устанавливает продолжительность перехода. Значения указываются в секундах (s) или миллисекундах (ms). W3C |
transition-property |
Значение:
none | all | <свойство> [,<свойство>, ...] | inherit
По умолчанию: none
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
![]() JavaScript: o.style.transitionProperty="value"
|
Определяет имя стилевого свойства, для которого требуется создать эффект перехода. W3C |
transition- timing-function |
Значение: ease | ease-in | ease-out | ease-in-out | linear |
step-start | step-end | steps | cubic-bezier | inherit
По умолчанию: ease
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.transitionTimingFunction="value"
|
Задает плавность перехода (скорость перехода от одного состояния к другому). W3C |
unicode-bidi |
Значение: normal | embed | bidi-override | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.unicodeBidi="value"
|
Устанавливает направление символов в тексте элемента, для которого задано свойство direction. W3C |
vertical-align |
Значение:
<размер> | <проценты> | baseline | bottom | middle | sub | super
| text-bottom | text-top | top | inherit
По умолчанию: baseline
Применяется: к строчным элементам и ячейкам таблицы
Анимируется: да
Наследуется: нет
JavaScript: o.style.verticalAlign="value"
|
Используется для управления вертикальным выравниванием строчных элементов относительно своего родителя, а также содержимого ячеек таблицы. Значения свойства для строчных элементов имеют несколько другой смысл, чем для ячеек таблицы (см. в учебнике). W3C |
visibility |
Значение: visible | hidden | collapse | inherit
По умолчанию: visible
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
![]() JavaScript: o.style.visibility="value"
|
Используется для отображения или скрытия элемента. При этом место, выделенное под элемент, остается и не занимается соседними элементами. W3C |
white-space |
Значение: normal | nowrap | pre | pre-line | pre-wrap | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.whiteSpace="value"
|
Указывает браузеру на способ обработки пробелов и переносов строк. W3C |
widows |
Значение: <число> | inherit
По умолчанию: 2
Применяется: к блочным элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.widows="value"
|
Задает минимальное количество строк блочного элемента, которые должны быть перенесены на следующую страницу при печати документа в случае нехватки места для печати содержимого данного блочного элемента на текущем листе бумаги. Свойство имеет эффект, если текст расположен на двух и более страницах. W3C |
width |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: auto
Применяется: ко всем элементам кроме незаменяемых строчных элементов, строк таблицы и групп строк
Анимируется: да
Наследуется: нет
JavaScript: o.style.width="value"
|
Задает ширину элемента. По умолчанию ширина элемента рассчитывается без учета отступов и границ. W3C |
word-spacing |
Значение: <размер> | normal | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.wordSpacing="value"
|
Устанавливает интервал между словами. Допускается использование отрицательных значений. W3C |
z-index |
Значение: <число> | auto | inherit
По умолчанию: auto
Применяется: к позиционированным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.zIndex="value"
|
Определяет порядок расположения позиционированных элементов по оси Z. W3C |
Свойство | Характеристики | Описание |
---|---|---|
background |
Значение: значения свойств через пробел | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
JavaScript: o.style.background="value"
|
Используется для одновременного определения сразу нескольких характеристик фона, которые указываются через пробел в любом порядке. Если какое-то из значений не будет указано, браузер применит вместо него значение по умолчанию. W3C |
background- color |
Значение: цвет | transparent | inherit
По умолчанию: transparent
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.backgroundColor="value"
|
Определяет цвет фона элемента и принимает те же значения цвета, что и свойство color. W3C |
background- image |
Значение: url("path_1") [, url("path_2"),...]
| none | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.backgroundImage="value"
|
Устанавливает изображение в качестве фона элемента. Если в значении указывается путь к нескольким файлам изображений, то они перечисляются через запятую в формате url("path_1"), url("path_2"), ..., где сам путь можно писать как в кавычках, так и без них. При этом изображения указанные впереди, будут располагаться выше остальных в порядке своего перечисления в значении свойства. W3C |
background- repeat |
Значение: repeat-x | repeat-y | [repeat | no-repeat | space |
round] {1,2} | inherit
По умолчанию: repeat
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
![]() JavaScript: o.style.backgroundRepeat="value"
|
Данное свойство позволяет заполнять фон изображением, тиражируя его по-своему усмотрению. Допустимо указывать через запятую сразу два значения: первое ключевое слово задаёт повторение по горизонтали, второе – по вертикали. При этом ключевыми словами не должны быть repeat-x или repeat-y. W3C |
background- position |
Значение: [left | center | right | <проценты> |
<размер>] || [top | center | bottom | <проценты> |
<размер>] | inherit
По умолчанию: 0% 0%
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.backgroundPosition="value"
|
Определяет начальное положение фонового изображения. Свойство может принимать как одну пару значений (или одиночное значение), так и несколько пар значений (или одиночных значений), разделяемых запятой для каждого изображения, указанного в значении свойства background-image. W3C |
background- size |
Значение: [ <размер> | <проценты> | auto
] {1,2} | cover | contain | inherit
По умолчанию: auto
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.backgroundSize="value"
|
Используется для масштабирования фонового изображения. Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. При этом пропорции картинки сохраняются. Если через пробел заданы два значения, то они задают ширину и высоту фоновой картинки. W3C |
background- clip |
Значение: padding-box | border-box | content-box [, padding-box |
border-box | content-box ] | inherit
По умолчанию: border-box
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
![]() JavaScript: o.style.backgroundClip="value"
|
Указывает браузеру какую область элемента следует использовать для фона (остальное обрезается). Разрешается указывать через запятую несколько значений в случае использования более одного фонового изображения. W3C |
background- attachment |
Значение: fixed | scroll | local [, fixed | scroll |
local] | inherit
По умолчанию: scroll
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.backgroundAttachment="value"
|
Используется для управления поведением фонового изображения при прокрутке элемента. Разрешается указывать через запятую несколько значений в случае использования более одного фонового изображения. W3C |
background- origin |
Значение: padding-box | border-box | content-box [, padding-box |
border-box | content-box ] | inherit
По умолчанию: padding-box
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.backgroundOrigin="value"
|
Указывает браузеру относительно чего нужно позиционировать фоновое изображение внутри элемента. Свойство не применяется, если значение свойства background-attachment задано как fixed. Кроме того, если задано свойство background-size, то приоритет будет отдан браузером значению этого свойства. Разрешается указывать через запятую несколько значений в случае использования более одного фонового изображения. W3C |
color |
Значение: <цвет> | transparent | inherit
По умолчанию: зависит от браузера
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.color="value"
|
Используется для установки цвета текста. Применение данного свойства влияет не только на сам текст, но и на цвет границ элемента в случае, если он не будет установлен явно. Поэтому, если нужно задать цвет границ отличный от цвета текста, необходимо задать его явно при помощи свойства border-color. W3C |
Свойство | Характеристики | Описание |
---|---|---|
border-style |
Значение: [none | hidden | dotted | dashed | solid | double | groove |
ridge | inset | outset] {1,4} | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.borderStyle="value"
|
Используется для установки стиля границ элемента. Может принимать через пробел два, три или даже четыре значения для установки разного стиля границ для каждой из сторон элемента. W3C |
border-top- style |
Значение: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.borderTopStyle="value"
|
Используется для установки стиля верхней границы элемента. W3C |
border-right- style |
Значение: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.borderRightStyle="value"
|
Используется для установки стиля правой границы элемента. W3C |
border-bottom- style |
Значение: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
![]() JavaScript: o.style.borderBottomStyle="value"
|
Используется для установки стиля нижней границы элемента. W3C |
border-left- style |
Значение: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.borderLeftStyle="value"
|
Используется для установки стиля левой границы элемента. W3C |
border-width |
Значение: [<размер> | thin | medium |
thick] {1,4} | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderWidth.="value"
|
Используется для установки ширины границ элемента. Может принимать через пробел два, три или даже четыре значения для установки разной ширины границы для каждой из сторон элемента. W3C |
border-top- width |
Значение: <размер> | thin | medium | thick | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderTopWidth.="value"
|
Используется для установки ширины верхней границы элемента. W3C |
border-right- width |
Значение: <размер> | thin | medium | thick | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.borderRightWidth.="value"
|
Используется для установки ширины правой границы элемента. W3C |
border-bottom- width |
Значение: <размер> | thin | medium | thick | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderBottomWidth.="value"
|
Используется для установки ширины нижней границы элемента. W3C |
border-left- width |
Значение: <размер> | thin | medium | thick | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderLeftWidth.="value"
|
Используется для установки ширины левой границы элемента. W3C |
border-color |
Значение: [<цвет> | transparent]
{1,4} | inherit
По умолчанию: значение св-ва color
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderColor="value"
|
Используется для установки цвета границ. Может принимать через пробел два, три или даже четыре значения, которые позволяют задать собственный цвет для каждой из границ элемента. Свойство должно использоваться в паре с border-style, иначе оно не даст никакого эффекта. W3C |
border-top- color |
Значение: <цвет> | transparent | inherit
По умолчанию: значение св-ва color
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.borderTopColor="value"
|
Используется для установки цвета верхней границы элемента. Свойство должно использоваться в паре с border-style или border-top-style, иначе оно не даст никакого эффекта. W3C |
border-right- color |
Значение: <цвет> | transparent | inherit
По умолчанию: значение св-ва color
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderRightColor="value"
|
Используется для установки цвета правой границы элемента. Свойство должно использоваться в паре с border-style или border-right-style, иначе оно не даст никакого эффекта. W3C |
border-bottom- color |
Значение: <цвет> | transparent | inherit
По умолчанию: значение св-ва color
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderBottomColor="value"
|
Используется для установки цвета нижней границы элемента. Свойство должно использоваться в паре с border-style или border-bottom-style, иначе оно не даст никакого эффекта. W3C |
border-left- color |
Значение: <цвет> | transparent | inherit
По умолчанию: значение св-ва color
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderLeftColor="value"
|
Используется для установки цвета левой границы элемента. Свойство должно использоваться в паре с border-style или border-left-style, иначе оно не даст никакого эффекта. W3C |
border |
Значение: border-width border-style border-color | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
![]() JavaScript: o.style.border="value"
|
Задает все характеристики границы элемента одновременно. W3C |
border-top |
Значение: border-top-width border-top-style border-top-color | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
JavaScript: o.style.borderTop="value"
|
Задает все характеристики верхней границы элемента одновременно. W3C |
border-right |
Значение: border-right-width border-right-style border-right-color | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
JavaScript: o.style.borderRight="value"
|
Задает все характеристики правой границы элемента одновременно. W3C |
border-bottom |
Значение: border-bottom-width border-bottom-style border-bottom-color | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
JavaScript: o.style.borderBottom="value"
|
Задает все характеристики нижней границы элемента одновременно. W3C |
border-left |
Значение: border-left-width border-left-style border-left-color | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
![]() JavaScript: o.style.borderLeft="value"
|
Задает все характеристики левой границы элемента одновременно. W3C |
border-radius |
Значение: [<радиус> | проценты] {1,4}
[ / [<радиус>
| проценты] {1,4}] | inherit
По умолчанию: см. для каждого угла
Применяется: ко всем элементам кроме таблиц с
border-collapse: collapse
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderRadius="value"
|
Используется для скругления углов элемента. Может принимать через пробел два, три или даже четыре значения. Принимает в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу. Свойство срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента. W3C |
border-top- left-radius |
Значение: <радиус> | проценты
/ [<радиус> | проценты] | inherit
По умолчанию: 0
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderTopLeftRadius="value"
|
Используется для скругления верхнего левого угла элемента. Принимает в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу. Свойство срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента. W3C |
border-top- right-radius |
Значение: <радиус> | проценты
/ [<радиус> | проценты] | inherit
По умолчанию: 0
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderTopRightRadius="value"
|
Используется для скругления верхнего правого угла элемента. Принимает в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу. Свойство срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента. W3C |
border-bottom- left-radius |
Значение: <радиус> | проценты
/ [<радиус> | проценты] | inherit
По умолчанию: 0
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.borderBottomLeftRadius="value"
|
Используется для скругления нижнего левого угла элемента. Принимает в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу. Свойство срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента. W3C |
border-bottom- right-radius |
Значение: <радиус> | проценты
/ [<радиус> | проценты] | inherit
По умолчанию: 0
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.borderBottomRightRadius="value"
|
Используется для скругления нижнего правого угла элемента. Принимает в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу. Свойство срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента. W3C |
box-shadow |
Значение: none | <тень> [,<тень>] | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.boxShadow="value"
|
Создает одну или несколько теней элемента, значения которых перечисляются через запятую. Если для элемента задано свойство border-radius, то тень также получится с закруглёнными углами. Кроме того, добавление тени увеличивает ширину элемента. W3C |
outline |
Значение: outline-color outline-style outline-width | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: нет
JavaScript: o.style.outline="value"
|
Одновременно устанавливает цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента. Задавать параметры линии на отдельных сторонах элемента не разрешается. Кроме того, в отличие от границ свойство outline не влияет на положение элемента и его ширину. W3C |
outline-color |
Значение: <цвет> | invert | inherit
По умолчанию: invert
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.outlineColor="value"
|
Устанавливает цвет внешней границы элемента. W3C |
outline-style |
Значение: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.outlineStyle="value"
|
Устанавливает стиль внешней границы элемента. При этом не влияет на положение элемента и его ширину. W3C |
outline-width |
Значение: thin | medium | thick | <размер> | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.outlineWidth="value"
|
Устанавливает толщину внешней границы элемента. При этом не влияет на положение элемента и его ширину. Свойство должно использоваться в паре с outline-style, у которого значение не установлено в none, иначе оно не даст никакого эффекта. W3C |
outline-offset |
Значение: <размер> | inherit
По умолчанию: 0
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.outlineOffset="value"
|
Задает расстояние между внешней и внутренней границами элемента. W3C |
Свойство | Характеристики | Описание |
---|---|---|
height |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: auto
Применяется: ко всем элементам кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов
Анимируется: да
Наследуется: нет
JavaScript: o.style.height="value"
|
Задает высоту элемента. По умолчанию высота элемента рассчитывается без учета отступов и границ. W3C |
width |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: auto
Применяется: ко всем элементам кроме незаменяемых строчных элементов, строк таблицы и групп строк
Анимируется: да
Наследуется: нет
JavaScript: o.style.width="value"
|
Задает ширину элемента. По умолчанию ширина элемента рассчитывается без учета отступов и границ. W3C |
box-sizing |
Значение: content-box | border-box | padding-box | inherit
По умолчанию: content-box
Применяется: ко всем элементам, к которым применимы свойства width и height
Анимируется: нет
Наследуется: нет
JavaScript: o.style.boxSizing="value"
|
Используется для изменения алгоритма расчёта ширины и высоты элемента. W3C |
min-height |
Значение: <размер> | <проценты> | inherit
По умолчанию: 0
Применяется: ко всем элементам кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов
Анимируется: да
Наследуется: нет
JavaScript: o.style.minHeight="value"
|
Устанавливает минимально допустимое значение высоты элемента. Если высота элемента будет меньше, чем значение свойства, то браузер отдаст приоритет значению свойства. W3C |
max-height |
Значение: <размер> | <проценты> | inherit
По умолчанию: 0
Применяется: ко всем элементам кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов
Анимируется: да
Наследуется: нет
JavaScript: o.style.maxHeight="value"
|
Устанавливает максимально допустимое значение высоты элемента. Если высота элемента будет больше, чем значение свойства, то браузер отдаст приоритет значению свойства. W3C |
min-width |
Значение: <размер> | <проценты> | inherit
По умолчанию: 0
Применяется: ко всем элементам кроме незаменяемых строчных элементов, строк таблицы и групп строк
Анимируется: да
Наследуется: нет
JavaScript: o.style.minWidth="value"
|
Устанавливает минимально допустимое значение ширины элемента. Если ширина элемента будет меньше, чем значение свойства, то браузер отдаст приоритет значению свойства. W3C |
max-width |
Значение: <размер> | <проценты> | inherit
По умолчанию: 0
Применяется: ко всем элементам кроме незаменяемых строчных элементов, строк таблицы и групп строк
Анимируется: да
Наследуется: нет
JavaScript: o.style.maxWidth="value"
|
Устанавливает максимально допустимое значение ширины элемента. Если ширина элемента будет больше, чем значение свойства, то браузер отдаст приоритет значению свойства. W3C |
Свойство | Характеристики | Описание |
---|---|---|
margin |
Значение: [<размер> | <проценты> |
auto] {1,4} | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column; кроме того, значения относящиеся к
margin-top и margin-bottom не применяются к строчным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.margin="value"
|
Используется для установки внешних отступов элемента. Может принимать через пробел два, три или даже четыре значения, которые позволяют задать внешние отступы для каждой из сторон элемента. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
margin-top |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column; кроме того, свойство не имеет эффекта
в случае применения к строчным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.marginTop="value"
|
Используется для установки внешнего отступа верхнего края элемента. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
margin-right |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
JavaScript: o.style.marginRight="value"
|
Используется для установки внешнего отступа правого края элемента. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
margin-bottom |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column; кроме того, свойство не имеет эффекта в
случае применения к строчным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.marginBottom="value"
|
Используется для установки внешнего отступа нижнего края элемента. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
margin-left |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
JavaScript: o.style.marginLeft="value"
|
Используется для установки внешнего отступа левого края элемента. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
Свойство | Характеристики | Описание |
---|---|---|
padding |
Значение:
[<размер> | <проценты> |
auto] {1,4} | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group |
table-header-group | table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
JavaScript: o.style.padding="value"
|
Используется для установки внутренних отступов (полей) элемента. Может принимать через пробел два, три или даже четыре значения, которые позволяют задать поля для каждой из сторон элемента. Использование отрицательных значений при установке полей не допускается. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
padding-top |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group |
table-header-group | table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
JavaScript: o.style.paddingTop="value"
|
Используется для установки внутреннего отступа (поля) верхнего края элемента. Использование отрицательных значений при установке полей не допускается. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
padding-right |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group |
table-header-group | table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
JavaScript: o.style.paddingRight="value"
|
Используется для установки внутреннего отступа (поля) правого края элемента. Использование отрицательных значений при установке полей не допускается. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
padding- bottom |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group |
table-header-group | table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
JavaScript: o.style.paddingBottom="value"
|
Используется для установки внутреннего отступа (поля) нижнего края элемента. Использование отрицательных значений при установке полей не допускается. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
padding-left |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: 0
Применяется:
ко всем элементам кроме тех, у которых display: table-row-group |
table-header-group | table-footer-group | table-row | table-column-group | table-column
Анимируется: да
Наследуется: нет
JavaScript: o.style.paddingLeft="value"
|
Используется для установки внутреннего отступа (поля) левого края элемента. Использование отрицательных значений при установке полей не допускается. Проценты рассчитываются относительно ширины области содержимого родительского элемента. W3C |
Свойство | Характеристики | Описание |
---|---|---|
position |
Значение: absolute | fixed | relative | static | inherit
По умолчанию: static
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.position="value"
|
Определяет порядок расположения элементов относительно окна браузера, других элементов на веб-странице или относительно текущего местоположения элемента. W3C |
top |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: auto
Применяется: к позиционированным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.top="value"
|
Задает смещение позиционированного элемента относительно верхнего края элемента. Проценты рассчитываются относительно высоты родительского элемента. W3C |
right |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: auto
Применяется: к позиционированным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.right="value"
|
Задает смещение позиционированного элемента относительно правого края элемента. Проценты рассчитываются относительно ширины родительского элемента. W3C |
bottom |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: auto
Применяется: к позиционированным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.bottom="value"
|
Задает смещение позиционированного элемента относительно нижнего края элемента. Проценты рассчитываются относительно высоты родительского элемента. W3C |
left |
Значение: <размер> | <проценты> | auto | inherit
По умолчанию: auto
Применяется: к позиционированным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.left="value"
|
Задает смещение позиционированного элемента относительно левого края элемента. Проценты рассчитываются относительно ширины родительского элемента. W3C |
z-index |
Значение: <число> | auto | inherit
По умолчанию: auto
Применяется: к позиционированным элементам
Анимируется: да
Наследуется: нет
JavaScript: o.style.zIndex="value"
|
Определяет порядок расположения позиционированных элементов по оси Z. W3C |
Свойство | Характеристики | Описание |
---|---|---|
font |
Значение:
[font-style font-variant font-weight font-stretch]
font-size[/line-height] font-family | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам
Анимируется: см. каждое свойство
Наследуется: да
JavaScript: o.style.font="value"
|
Дает возможность задать через пробел несколько характеристик шрифта одновременно. Имеет значение порядок указания значений свойств:
первыми, если они конечно будут указываться, должны записываться значения свойств font-style,
font-variant или font-weight в любом порядке, затем необходимо указывать
значение свойства font-size, а также при необходимости через слэш '/'
значение свойства line-height, в конце указывается значение свойства
|
font-family |
Значение:
<шрифт> | <семейство> [, <шрифт> |
<семейство> [, ...]] | inherit
По умолчанию: зависит от браузера
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.fontFamily="value"
|
Указывает браузеру на шрифт, который нужно использовать внутри элемента. Если в названии шрифта содержатся пробелы, то его нужно указывать в кавычках. W3C |
font-size |
Значение:
<размер> | <проценты> | medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | inherit
По умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.fontSize="value"
|
Устанавливает размер шрифта, который будет использоваться внутри элемента. Проценты рассчитываются относительно размера шрифта родительского элемента. W3C |
font-style |
Значение:
normal | italic | oblique | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.fontStyle="value"
|
Устанавливает начертание шрифта, которое будет использоваться внутри элемента. W3C |
font-variant |
Значение:
normal | small-caps | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.fontVariant="value"
|
Используется для конвертации строчных букв в прописные уменьшенного размера. W3C |
font-weight |
Значение:
bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.fontWeight="value"
|
Устанавливает насыщенность шрифта, которая будет использоваться внутри элемента. W3C |
Свойство | Характеристики | Описание |
---|---|---|
direction |
Значение: ltr | rtl | inherit
По умолчанию: ltr
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.direction="value"
|
Устанавливает направление текста в пределах элемента. W3C |
letter-spacing |
Значение: <размер> | normal | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.letterSpacing="value"
|
Устанавливает интервал между символами. Допускается использование отрицательных значений. W3C |
line-height |
Значение: <множитель> | <размер> | <проценты> | normal | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.lineHeight="value"
|
Устанавливает межстрочный интервал, т.е. расстояние между строками. Проценты рассчитываются относительно высоты шрифта. W3C |
text-align |
Значение: center | justify | left | right | start | end | inherit
По умолчанию:
start, т.е. left если направление текста слева направо, и right если направление текста справа налево
Применяется: к блочным элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.textAlign="value"
|
Определяет горизонтальное выравнивание текста в пределах элемента. W3C |
text-decoration |
Значение:
none | [line-through overline
underline] | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
![]() JavaScript: o.style.textDecoration="value"
|
Используется для оформления текста, например, подчеркиванием. Разрешается применять более одного стиля, перечисляя значения через пробел. W3C |
text-indent |
Значение: <размер> | <проценты> | inherit
По умолчанию: 0
Применяется: к блочным элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.textIndent="value"
|
Устанавливает красную строку, т.е. отступ первой строки в абзаце. Проценты рассчитываются относительно ширины родительского элемента. W3C |
text-transform |
Значение: none | capitalize | lowercase | uppercase | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.textTransform="value"
|
Используется для управления преобразованием текста элемента в прописные или строчные символы. W3C |
unicode-bidi |
Значение: normal | embed | bidi-override | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.unicodeBidi="value"
|
Устанавливает направление символов в тексте элемента, для которого задано свойство direction. W3C |
white-space |
Значение: normal | nowrap | pre | pre-line | pre-wrap | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.whiteSpace="value"
|
Указывает браузеру на способ обработки пробелов и переносов строк. W3C |
word-spacing |
Значение: <размер> | normal | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
JavaScript: o.style.wordSpacing="value"
|
Устанавливает интервал между словами. Допускается использование отрицательных значений. W3C |
Свойство | Характеристики | Описание |
---|---|---|
list-style |
Значение: list-style-type list-style-position list-style-image | inherit
По умолчанию: см. каждое свойство
Применяется: К элементам 'li', 'ol' и 'ul', а также ко всем элементам, у которых display: list-item
Анимируется: нет
Наследуется: да
JavaScript: o.style.listStyle='value'
|
Позволяет задать через пробел значения свойств списка одновременно, перечисляя их в указанном порядке. В случае отсутствия какого-либо значения, браузер использует значение данного свойства по умолчанию. W3C |
list-style-type |
Значение:
circle | disc | square | armenian | decimal | decimal-leading-zero |
georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit
По умолчанию: disc для 'ul'; decimal для 'ol'
Применяется: К элементам 'li', 'ol' и 'ul', а также ко всем элементам, у которых display: list-item
Анимируется: нет
Наследуется: да
JavaScript: o.style.listStyleType="value"
|
Устанавливает вид маркера для каждого элемента списка. При этом цвет маркера будет таким же как и цвет установленный для текста в элементе. W3C |
list-style-position |
Значение: inside | outside | inherit
По умолчанию: disc для 'ul'; decimal для 'ol'
Применяется: К элементам 'li', 'ol' и 'ul', а также ко всем элементам, у которых display: list-item
Анимируется: нет
Наследуется: да
JavaScript: o.style.listStylePosition="value"
|
Устанавливает вид маркера для каждого элемента списка. При этом цвет маркера будет таким же как и цвет установленный для текста в элементе. W3C |
list-style-image |
Значение: none | url("path") | inherit
По умолчанию: none
Применяется: К элементам 'li', 'ol' и 'ul', а также ко всем элементам, у которых display: list-item
Анимируется: нет
Наследуется: да
JavaScript: o.style.listStyleImage='value'
|
Позволяет использовать вместо стандартных маркеров изображения. W3C |
Свойство | Характеристики | Описание |
---|---|---|
caption-side |
Значение: top | bottom | inherit
По умолчанию: top
Применяется: к заголовку таблицы и ко всем элементам, у которых display: table-caption
Анимируется: нет
Наследуется: да
JavaScript: o.style.captionSide="value"
|
Определяет положение заголовка до или после таблицы. W3C |
border-collapse |
Значение: collapse | separate | inherit
По умолчанию: separate
Применяется: к таблице и ко всем элементам, у которых display: table | inline-table
Анимируется: нет
Наследуется: да
JavaScript: o.style.borderCollapse="value"
|
Определяет, как отображать границы вокруг ячеек таблицы. W3C |
border-spacing |
Значение: <размер> [<размер>] | inherit
По умолчанию: 2px
Применяется: к таблице и ко всем элементам, у которых display: table | inline-table
Анимируется: да
Наследуется: да
JavaScript: o.style.borderSpacing="value"
|
Устанавливает расстояние между границами смежных ячеек в случае, когда border-collapse: separate. Если указано два значения, первое устанавливает расстояние по вертикали, второе по горизонтали. W3C |
empty-cells |
Значение: show | hide | inherit
По умолчанию: show
Применяется: к ячейкам таблицы и ко всем элементам, у которых display: table-cell
Анимируется: нет
Наследуется: да
JavaScript: o.style.emptyCells="value"
|
Устанавливает способ отображения пустых ячеек таблицы. Не работает, если border-collapse: collapse. W3C |
table-layout |
Значение: auto | fixed | inherit
По умолчанию: auto
Применяется: к таблице и ко всем элементам, у которых display: table | inline-table
Анимируется: нет
Наследуется: нет
JavaScript: o.style.tableLayout="value"
|
Управляет процессом формирования браузером макета таблицы, точнее ширины ячеек. W3C |
Свойство | Характеристики | Описание |
---|---|---|
display |
Значение: block | inline | inline-block | inline-table | list-item | none |
run-in | table | table-caption | table-cell | table-column-group | table-column |
table-footer-group | table-header-group | table-row | table-row-group | inherit
По умолчанию: зависит от элемента
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.display="value"
|
Указывает тип элемента, определяя тем самым, как элемент будет показан в документе. W3C |
float |
Значение: none | left | right | inherit
По умолчанию: none
Применяется: ко всем элементам, кроме абсолютно и фиксированно позиционированных
Анимируется: нет
Наследуется: нет
JavaScript: o.style.cssFloat="value"
|
Задает выравнивание элемента и его обтекание другими элементами. W3C |
clear |
Значение: none | left | right | both | inherit
По умолчанию: none
Применяется: к блочным элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.clear="value"
|
Определяет порядок обтекания данным блочным элементом плавающих элементов, которые идут в коде выше (до него). W3C |
visibility |
Значение: visible | hidden | collapse | inherit
По умолчанию: visible
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.visibility="value"
|
Используется для отображения или скрытия элемента. При этом место, выделенное под элемент, остается и не занимается соседними элементами. W3C |
opacity |
Значение: <число> | inherit
По умолчанию: 1
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
![]() JavaScript: o.style.opacity="value"
|
Определяет уровень прозрачности элемента. В качестве значения принимает числа от 0.0, когда элемент становится полностью прозрачным, до 1, когда элемент становится полностью непрозрачным. W3C |
overflow |
Значение: visible | hidden | scroll | auto | inherit
По умолчанию: visible
Применяется: к блочным элементам, а также ко всем элементам, у которых display: inline-block
Анимируется: нет
Наследуется: нет
JavaScript: o.style.overflow="value"
|
Указывает браузеру, как следует отображать содержимое блочного элемента в случае его переполнения. W3C |
overflow-x |
Значение: visible | hidden | scroll | auto | inherit
По умолчанию: visible
Применяется: к блочным элементам, а также ко всем элементам, у которых display: inline-block
Анимируется: нет
Наследуется: нет
JavaScript: o.style.overflowX="value"
|
Указывает браузеру, как следует отображать содержимое блочного элемента в случае его переполнения в горизонтальном направлении. W3C |
overflow-y |
Значение: visible | hidden | scroll | auto | inherit
По умолчанию: visible
Применяется: к блочным элементам, а также ко всем элементам, у которых display: inline-block
Анимируется: нет
Наследуется: нет
JavaScript: o.style.overflowY="value"
|
Указывает браузеру, как следует отображать содержимое блочного элемента в случае его переполнения в вертикальном направлении. W3C |
vertical-align |
Значение:
<размер> | <проценты> | baseline | bottom | middle | sub | super
| text-bottom | text-top | top | inherit
По умолчанию: baseline
Применяется: к строчным элементам и ячейкам таблицы
Анимируется: да
Наследуется: нет
JavaScript: o.style.verticalAlign="value"
|
Используется для управления вертикальным выравниванием строчных элементов относительно своего родителя, а также содержимого ячеек таблицы. Значения свойства для строчных элементов имеют несколько другой смысл, чем для ячеек таблицы (см. в учебнике). W3C |
Свойство | Характеристики | Описание |
---|---|---|
animation- name |
Значение:
none | <имя анимации> [, <имя анимации>, ...] | inherit
По умолчанию: none
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationName="value"
|
Указывает список имен анимаций, которые должны быть применены к выбранному элементу. Используется совместно с правилом @keyframes. W3C |
animation- delay |
Значение:
<время> [,<время>, ...] | inherit
По умолчанию: 0s
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationDelay="value"
|
Устанавливает время задержки перед запуском анимации. Значения указываются в секундах (s) или миллисекундах (ms). W3C |
animation- duration |
Значение:
<время> [,<время>, ...] | inherit
По умолчанию: 0s
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationDuration="value"
|
Устанавливает продолжительность одного цикла анимации. Значения указываются в секундах (s) или миллисекундах (ms). W3C |
animation- iteration-count |
Значение: <число> | infinite | inherit
По умолчанию: 1
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
![]() JavaScript: o.style.animationIterationCount="value"
|
Устанавливает количество повторений анимации. W3C |
animation- direction |
Значение: normal | alternate | reverse | alternate-reverse | inherit
По умолчанию: normal
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationDirection="value"
|
Задает направление анимации. W3C |
animation- timing-function |
Значение: ease | ease-in | ease-out | ease-in-out | linear |
step-start | step-end | steps | cubic-bezier | inherit
По умолчанию: ease
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationTimingFunction="value"
|
Задает плавность анимации (скорость переходов от одного состояния к другому). W3C |
animation- play-state |
Значение: running | paused | inherit
По умолчанию: running
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationPlayState="value"
|
Ставит или снимает анимацию с паузы. W3C |
animation-fill- mode |
Значение: none | forwards | backwards | both | inherit
По умолчанию: none
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.animationFillMode="value"
|
Определяет, какие стили применять к элементу до и после анимации. W3C |
animation |
Значение:
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
animation-fill-mode animation-play-state [, ...] | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
![]() JavaScript: o.style.animation="value"
|
Позволяет задать сразу несколько параметров анимации, которые перечисляются через пробел. Если какое-то из значений не будет указано, браузер применит вместо него значение по умолчанию. W3C |
transition-property |
Значение:
none | all | <свойство> [,<свойство>, ...] | inherit
По умолчанию: none
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.transitionProperty="value"
|
Определяет имя стилевого свойства, для которого требуется создать эффект перехода. W3C |
transition- delay |
Значение:
<время> [,<время>, ...] | inherit
По умолчанию: 0s
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.transitionDelay="value"
|
Устанавливает время задержки перед запуском перехода. Значения указываются в секундах (s) или миллисекундах (ms). W3C |
transition- duration |
Значение:
<время> [,<время>, ...] | inherit
По умолчанию: 0s
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.transitionDuration="value"
|
Устанавливает продолжительность перехода. Значения указываются в секундах (s) или миллисекундах (ms). W3C |
transition- timing-function |
Значение: ease | ease-in | ease-out | ease-in-out | linear |
step-start | step-end | steps | cubic-bezier | inherit
По умолчанию: ease
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.transitionTimingFunction="value"
|
Задает плавность перехода (скорость перехода от одного состояния к другому). W3C |
transition |
Значение:
transition-property transition-delay transition-duration transition-timing-function
[, ...] | inherit
По умолчанию: см. каждое свойство
Применяется: ко всем элементам, а также псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.transition="value"
|
Позволяет задать сразу несколько параметров перехода, которые перечисляются через пробел. Если какое-то из значений не будет указано, браузер применит вместо него значение по умолчанию. W3C |
Свойство | Характеристики | Описание |
---|---|---|
content |
Значение:
<строка> | attr(<атрибут>) | open-quote | close-quote
| no-open-quote | no-close-quote | url | counter | normal | none | inherit
По умолчанию: normal
Применяется: к псевдо-элементам ::before and ::after
Анимируется: нет
Наследуется: нет
JavaScript: o.style.content="value"
|
Предназначено для вставки в текст веб-страницы генерируемого содержимого. Используется совместно с псевдоэлементами ::after и ::before, которые указывают куда вставлять генерируемое содержимое. W3C |
counter-reset |
Значение: none | <переменная> | <число> | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.counterReset="value"
|
Устанавливает счетчик, а также начальное значение счетчика. Для вывода текущего значения счетчика используется свойство content со значением counter(id_счетчика). W3C |
counter-increment |
Значение: none | <переменная> | <число> | inherit
По умолчанию: none
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
JavaScript: o.style.counterIncrement="value"
|
Увеличивает одно или несколько значений указанного в качестве значения счетчика, который в свою очередь задается свойством counter-reset. W3C |
quotes |
Значение: none | <Строка> <Строка> | inherit
По умолчанию: зависит от браузера
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.quotes="value"
|
Используется для определения вида кавычек при их автоматическом добавлении, например, в случае использования элемента 'q'. В качестве значений свойство принимает символ открывающей кавычки и символ закрывающей кавычки. При этом сами символы также должны быть взяты в кавычки W3C |
Свойство | Характеристики | Описание |
---|---|---|
orphans |
Значение: <число> | inherit
По умолчанию: 2
Применяется: к блочным элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.orphans="value"
|
Задает минимальное количество строк блочного элемента, которые должны остаться при печати документа на предыдущей странице в случае переноса части содержимого блочного элемента на следующую страницу из-за нехватки места на текущем листе бумаги. Свойство имеет эффект, если текст расположен на двух и более страницах. W3C |
widows |
Значение: <число> | inherit
По умолчанию: 2
Применяется: к блочным элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.widows="value"
|
Задает минимальное количество строк блочного элемента, которые должны быть перенесены на следующую страницу при печати документа в случае нехватки места для печати содержимого данного блочного элемента на текущем листе бумаги. Свойство имеет эффект, если текст расположен на двух и более страницах. W3C |
page-break-before |
Значение: auto | always | avoid | left | right | inherit
По умолчанию: auto
Применяется: к блочным элементам, которые находятся в обычном потоке элементов
Анимируется: нет
Наследуется: нет
JavaScript: o.style.pageBreakBefore="value"
|
Добавляет разрыв страницы при печати документа перед указанным элементом. W3C |
page-break-after |
Значение: auto | always | avoid | left | right | inherit
По умолчанию: auto
Применяется: к блочным элементам, которые находятся в обычном потоке элементов
Анимируется: нет
Наследуется: нет
JavaScript: o.style.pageBreakAfter="value"
|
Добавляет разрыв страницы при печати документа после указанного элемента. W3C |
page-break-inside |
Значение: auto | avoid | inherit
По умолчанию: auto
Применяется: к блочным элементам, которые находятся в обычном потоке элементов
Анимируется: нет
Наследуется: нет
JavaScript: o.style.pageBreakInside="value"
|
Разрешает или запрещает разрыв страницы внутри указанного элемента при печати. W3C |
Правило | Синтаксис | Описание |
---|---|---|
@import |
@import url("имя файла") [типы носителей] @import url(имя файла) [типы носителей] @import "имя файла" [типы носителей] |
Позволяет импортировать содержимое css-файла в текущую таблицу стилей. W3C |
@charset | @charset "кодировка"; | Используется для указания кодировки текущей внешней таблицы стилей, чтобы браузер понимал, в какой кодировке сохранен css-файл. Название кодировки должно быть указано в кавычках. W3C |
@media |
@media тип_носителя_1, тип_носителя_2,... and|not|only (медиа_особенности) {стили для этих типов} |
Используется, когда возникает необходимость указать типы носителей, для которых будет применяться данная таблица стилей. W3C |
@font-face |
@font-face { font-family: my_font; src: url("path_1"), url("path_2"), ...; } |
Используется для загрузки на компьютер пользователя специфичного или авторского шрифта непосредственно с сервера, на котором расположен данный сайт. W3C |
@page |
@page :first | :left | :right{ внешние отступы; } |
Используется при печати документа для изменения внешних полей (margins) распечатываемых страниц. Также может быть использован для страниц, у которых тип носителя задан как print. W3C |
@keyframes | @keyframes имя_анимации {описание} | Устанавливает ключевые кадры при анимации элемента. Используется совместно с animation-name. W3C |
Класс | Синтаксис | Описание |
---|---|---|
:active | Селектор:active {блок объявлений} | Выбирается активный в данный момент элемент требуемого вида (таковым он становится в момент нажатия на него). W3C |
:link | Селектор:link {блок объявлений} | Выбираются все непосещенные ссылки. W3C |
:visited | Селектор:visited {блок объявлений} | Выбираются все посещенные ссылки. W3C |
:hover | Селектор:hover {блок объявлений} | Выбирается элемент требуемого вида, на который наведен курсор мыши. W3C |
:focus | Селектор:focus {блок объявлений} | Выбирается элемент требуемого вида, который в данный момент находится в фокусе. W3C |
:checked | Селектор:checked {блок объявлений} | Выбираются все элементы требуемого вида, которые выбраны пользователем или выбраны по умолчанию при помощи атрибута checked. W3C |
:disabled | Селектор:disabled {блок объявлений} | Выбираются все элементы формы требуемого вида, у которых атрибут disabled присутствует (элемент заблокирован). W3C |
:enabled | Селектор:enabled {блок объявлений} | Выбираются все элементы формы требуемого вида, у которых атрибут disabled отсутствует (элемент доступен). W3C |
:empty | Селектор:empty {блок объявлений} | Выбираются все пустые элементы требуемого вида. W3C |
:lang | Селектор:lang {блок объявлений} | Выбираются все элементы требуемого вида, у которых атрибут lang имеет значение языка, указанного в селекторе. W3C |
:not |
Селектор:not(селектор) { блок объявлений } |
Выбираются все элементы требуемого вида, которые не подходят под шаблон указанного в скобках селектора; при этом нельзя использовать в качестве значения в скобках сам псевдокласс и псевдоэлементы. W3C |
:root | Селектор:root {блок объявлений} | Выбирает корневой элемент, которым в html-документе является элемент 'html'. W3C |
:target |
Селектор:target {блок объявлений}
![]() |
Выбираются все элементы требуемого вида, которые используются в качестве якорей. Стиль к ним применяется после перехода по соответствующей ссылке. W3C |
:nth-child |
Селектор:nth-child(значение) { блок объявлений } |
Выбираются дочерние элементы требуемого вида, у которых порядковый номер следования внутри родительского элемента соответствует значению, указанному в селекторе. W3C |
:nth-last-child |
Селектор:nth-last-child(значение) { блок объявлений } |
Выбираются дочерние элементы требуемого вида, у которых порядковый номер следования внутри родительского элемента отсчитывается от конца родительского элемента (от закрывающего тега) и соответствует значению, указанному в селекторе. W3C |
:first-child | Селектор:first-child {блок объявлений} | Выбираются первые дочерние элементы требуемого вида (порядковый номер n=1) относительно своего родительского элемента. W3C |
:last-child | Селектор:last-child {блок объявлений} | Выбираются последние дочерние элементы требуемого вида относительно своего родительского элемента. W3C |
:only-child | Селектор:only-child {блок объявлений} | Выбираются дочерние элементы требуемого вида, которые являются единственными дочерними элементами для своего родительского элемента. W3C |
:nth-of-type |
Селектор:nth-of-type(значение) { блок объявлений } |
Выбираются дочерние элементы требуемого вида без учета (подсчета) любых других дочерних элементов, у которых порядковый номер следования внутри родительского элемента соответствует значению, указанному в селекторе. W3C |
:nth-last-of- type |
Селектор:nth-last-of-type(значение) { блок объявлений } |
Выбираются дочерние элементы требуемого вида без учета (подсчета) любых других дочерних элементов, у которых порядковый номер следования внутри родительского элемента отсчитывается от конца родительского элемента (от закрывающего тега) и соответствует значению, указанному в селекторе. W3C |
:first-of-type | Селектор:first-of-type {блок объявлений} | Выбираются первые дочерние элементы требуемого вида (порядковый номер n=1) относительно своего родительского элемента, но без учета (подсчета) любых других видов дочерних элементов. W3C |
:last-of-type | Селектор:last-of-type {блок объявлений} | Выбираются последние дочерние элементы требуемого вида относительно своего родительского элемента, но без учета (подсчета) любых других видов дочерних элементов. W3C |
:only-of-type | Селектор:only-of-type {блок объявлений} | Выбираются дочерние элементы требуемого вида, которые являются единственными дочерними элементами для своего родительского элемента данного вида (при этом дочерние элементы других видов могут присутствовать). W3C |
Элемент | Синтаксис | Описание |
---|---|---|
::first-letter | Селектор::first-letter {блок объявлений} | Выбирается первая буква элементов требуемого вида, у которых свойство display имеет одно из значений: block, inline-block, list-item, table-cell или table-caption, при этом первая буква элементов с display: inline-block | table-cell не должна быть в тоже время и первой буквой родительского элемента. Кроме того, к псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, полям, границам, отступам, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства. W3C |
::first-line | Селектор::first-line {блок объявлений} | Выбираются первые строки блочных элементов требуемого вида, которые отсчитываются от начала текста до принудительного либо автоматического перевода текста на новую строку, при этом ширина строки может меняться в зависимости от ширины блочного элемента, но стиль первой строки будет оставаться постоянным вплоть до перевода на новую строку. К псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства. W3C |
::before | Селектор::before {блок объявлений} | Выбираются элементы требуемого вида, перед которыми вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства content. W3C |
::after | Селектор::after {блок объявлений} | Выбираются элементы требуемого вида, после которых вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства content. W3C |
Селектор | Тип | Описание |
---|---|---|
* | Универсальный селектор | Выбираются все элементы, а сам селектор имеет вид звездочки, например, * {блок объявлений}. W3C |
E | Селектор элементов | Выбираются все элементы указанного вида, а если их несколько, то виды элементов перечисляются через запятую, например, span {блок объявлений} или сразу для нескольких видов элементов span, div, p {блок объявлений}. W3C |
E.className | Селектор классов | Выбираются все элементы, у которых в качестве значения атрибута class указано имя селектора. Сам селектор классов начинается с точки, после которой следует имя селектора (класса), например, p.my_class {блок объявлений}. W3C |
E#idValue | Селектор идентификаторов | Выбирается элемент с соответствующим значением атрибута id. Сам селектор начинается со знака решетки '#', после которого следует идентификатор (т.е. значение атрибута id), например, p#my_id {блок объявлений}. W3C |
[атрибут] | Селектор атрибутов | Выбираются все элементы, у которых присутствует такой атрибут вне зависимости от его значения, например, span[title] {блок объявлений}. W3C |
[атрибут="значение"] | Селектор атрибутов | Выбираются все элементы, у которых данный атрибут имеет указанное в селекторе значение (здесь и далее учитывается также и регистр символов!), например, [title="Очень большое животное."] {блок объявлений}. W3C |
[атрибут^="значение"] |
Селектор атрибутов
![]() |
Выбираются все элементы, у которых значение данного атрибута начинается на подстроку (фрагмент строки), указанную в селекторе, например, [title^="Очень бол"] {блок объявлений}. W3C |
[атрибут$="значение"] | Селектор атрибутов | Выбираются все элементы, у которых значение данного атрибута заканчинается на подстроку, указанную в селекторе, например, [title$="тное."] {блок объявлений}. W3C |
[атрибут~="значение"] | Селектор атрибутов | Выбираются все элементы, у которых значение данного атрибута содержит подстроку, отделенную пробелами от остальной части, или отдельное слово и указанную в селекторе, например, [title~="большое"] {блок объявлений}. W3C |
[атрибут*="значение"] | Селектор атрибутов | Выбираются все элементы, у которых значение данного атрибута содержит подстроку, указанную в селекторе, например, [title*="ивотн"] {блок объявлений}. W3C |
E F | Контекстный селектор | Выбираются все элементы требуемого вида, которые находятся внутри указанных в селекторе элементов-родителей (в селекторе вложенный элемент пишется через пробел после элемента-родителя), например, если задано правило div p span {блок объявлений}, то стиль будет применен ко всем элементам 'span', которые находятся внутри абзацев, в свою очередь находящихся внутри элемента 'div'. W3C |
E>F |
Селектор дочерних элементов |
Выбираются элементы требуемого вида, которые являются дочерними по отношению к указанному в селекторе элементу, например, p>span {блок объявлений}. W3C |
E+F |
Селектор соседних элементов |
Выбираются элементы требуемого вида, которые идут после указанного в селекторе элемента, например, p+span {блок объявлений}, здесь будут выбраны все элементы 'span', которые идут после элементов 'p'. W3C |