belarusweb.net - веб-программирование для новичков: HTML,CSS, JavaScript, PHP, MySQL и др.

# Справочник по 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-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-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

Наверх

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