belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
CSS >>>

Справочник по CSS

По алфавиту:

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, в конце указывается значение свойства . В случае отсутствия значения какого-нибудь свойства браузер использует значение по умолчанию.   W3C
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-break
Значение: normal | break-all | keep-all | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.wordBreak="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
Наверх
Margins
Свойство Характеристики Описание
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
Наверх
Paddings
Свойство Характеристики Описание
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, в конце указывается значение свойства . В случае отсутствия значения какого-нибудь свойства браузер использует значение по умолчанию.   W3C
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-break
Значение: normal | break-all | keep-all | inherit
По умолчанию: normal
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
JavaScript: o.style.wordBreak="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
Наверх
Комментарии (0)
Петр Романовский
Есть общие вопросы по данному справочнику, пишите.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх