Свойство (property) - название стиля.
Значение (value) - значение свойства.
Селектор (selector) - переключатель, идентификатор набора стилей (блока стилей)
Блок стилей (block) - набор описаний стилей (declarations), который заключается в фигурные скобки ({}).
Правило (rule или набор правил -rule set)- селектор стиля плюс блок стилей.
Декларация (declaration ) - строка-описание стиля. Внутри одного блока (между фигурными скобками) может быть находиться одна декларация или несколько, разделённых символом (;). Декларация состоит из свойства (property), после которого ставится двоеточие (:) после этого символа - значение этого свойства (value ), после этого - символ точка с запятой (;).
Отражает свойства стилей элемента (inline styles). Отражает те свойства стилей, которые заданы атрибутом style.
Задать атрибут style (нужно иметь в виду, что если этот атрибут уже был задан, его старое значение будет удалено)
Удалить атрибут (и все inline стили элемента)
Модифицировать параметры атрибута style (изменение свойс объекта style для элемента).
Свойство | Описание | Версия CSS |
---|---|---|
alignContent | Устанавливает или возвращает выравнивание между линиями внутри гибкого контейнера, когда элементы не используют все свободное пространство | 3 |
alignItems | Устанавливает или возвращает выравнивание элементов внутри гибкого контейнера | 3 |
alignSelf | Устанавливает или возвращает выравнивание для выбранных элементов внутри гибкого контейнера | 3 |
animation | Сокращённое свойство для всех свойств анимации, приведённых ниже, за исключением свойства animationPlayState | 3 |
animationDelay | Устанавливает или возвращает, когда анимация начнется | 3 |
animationDirection | Устанавливает или возвращает, должна ли анимация воспроизводиться в обратном порядке на альтернативных циклах | 3 |
animationDuration | Устанавливает или возвращает количество секунд или миллисекунд, которое требуется анимации для завершения одного цикла | 3 |
animationFillMode | Устанавливает или возвращает значения, которые применяются анимацией за пределами времени ее выполнения | 3 |
animationIterationCount | Устанавливает или возвращает количество раз, когда должна воспроизводиться анимация | 3 |
animationName | Устанавливает или возвращает имя для анимации @keyframes | 3 |
animationTimingFunction | Устанавливает или возвращает кривую скорости анимации | 3 |
animationPlayState | Устанавливает или возвращает, работает анимация или приостановлена | 3 |
background | Устанавливает или возвращает все свойства фона в одной директиве | 1 |
backgroundAttachment | Устанавливает или возвращает фиксированное фоновое изображение или прокручивает страницу | 1 |
backgroundColor | Устанавливает или возвращает фоновый цвет элемента | 1 |
backgroundImage | Устанавливает или возвращает фоновое изображение для элемента | 1 |
backgroundPosition | Устанавливает или возвращает начальную позицию фонового изображения | 1 |
backgroundRepeat | Устанавливает или возвращает как повторять (мозаику) фоновое изображение | 1 |
backgroundClip | Устанавливает или возвращает область рисования фона | 3 |
backgroundOrigin | Устанавливает или возвращает область позиционирования фоновых изображений | 3 |
backgroundSize | Устанавливает или возвращает размер фонового изображения | 3 |
backfaceVisibility | Устанавливает или возвращает, должен ли элемент быть видимым, если он не обращен к экрану | 3 |
border | Устанавливает или возвращает borderWidth, borderStyle и borderColor в одном объявлении | 1 |
borderBottom | Устанавливает или возвращает все свойства borderBottom в одном объявлении | 1 |
borderBottomColor | Устанавливает или возвращает цвет нижней границы | 1 |
borderBottomLeftRadius | Устанавливает или возвращает форму границы нижнего левого угла | 3 |
borderBottomRightRadius | Устанавливает или возвращает форму границы нижнего правого угла | 3 |
borderBottomStyle | Устанавливает или возвращает стиль нижней границы | 1 |
borderBottomWidth | Устанавливает или возвращает ширину нижней границы | 1 |
borderCollapse | Устанавливает или возвращает, должна ли граница таблицы быть свернута в одну границу или нет | 2 |
borderColor | Устанавливает или возвращает цвет границы элемента (может иметь до четырех значений) | 1 |
borderImage | Стеновое свойство для установки или возврата всех свойств borderImage | 3 |
borderImageOutset | Устанавливает или возвращает величину, на которую область изображения границы выходит за пределы поля | 3 |
borderImageRepeat | Устанавливает или возвращает, следует ли повторять, округлять или растягивать границу изображения | 3 |
borderImageSlice | Устанавливает или возвращает внутренние смещения границы изображения | 3 |
borderImageSource | Устанавливает или возвращает изображение, которое будет использоваться в качестве границы | 3 |
borderImageWidth | Устанавливает или возвращает ширину границы изображения | 3 |
borderLeft | Устанавливает или возвращает все свойства borderLeft в одном объявлении | 1 |
borderLeftColor | Устанавливает или возвращает цвет левой границы | 1 |
borderLeftStyle | Устанавливает или возвращает стиль левой границы | 1 |
borderLeftWidth | Устанавливает или возвращает ширину левой границы | 1 |
borderRadius | Сокращенное свойство для установки или возврата радиусавсех четырех границ | 3 |
borderRight | Устанавливает или возвращает все свойства borderRight в одном объявлении | 1 |
borderRightColor | Устанавливает или возвращает цвет правой границы | 1 |
borderRightStyle | Устанавливает или возвращает стиль правой границы | 1 |
borderRightWidth | Устанавливает или возвращает ширину правой границы | 1 |
borderSpacing | Устанавливает или возвращает пробел между ячейками в таблице | 2 |
borderStyle | Устанавливает или возвращает стиль границы элемента (может иметь до четырех значений) | 1 |
borderTop | Устанавливает или возвращает все свойства borderTop в одном объявлении | 1 |
borderTopColor | Устанавливает или возвращает цвет верхней границы | 1 |
borderTopLeftRadius | Устанавливает или возвращает форму границы верхнего левого угла | 3 |
borderTopRightRadius | Устанавливает или возвращает форму границы верхнего правого угла | 3 |
borderTopStyle | Устанавливает или возвращает стиль верхней границы | 1 |
borderTopWidth | Устанавливает или возвращает ширину верхней границы | 1 |
borderWidth | Устанавливает или возвращает ширину границы элемента (может иметь до четырех значений) | 1 |
bottom | Устанавливает или возвращает нижнее положение позиционированного элемента | 2 |
boxDecorationBreak | Устанавливает или возвращает поведение фона и границы элемента при разрыве страницы или для встроенных элементов при разрыве строки. | 3 |
boxShadow | Прикрепляет к коробке одну или несколько отбрасываемых теней | 3 |
boxSizing | Позволяет определить для определенных элементов способ размещения в определенной области | 3 |
captionSide | Устанавливает или возвращает позицию заголовка таблицы | 2 |
clear | Устанавливает или возвращает позицию элемента относительно плавающих объектов | 1 |
clip | Устанавливает или возвращает часть видимого элемента | 2 |
color | Устанавливает или возвращает цвет текста | 1 |
columnCount | Устанавливает или возвращает количество столбцов, на которые элемент должен быть разделен | 3 |
columnFill | Устанавливает или возвращает способ заполнения столбцов | 3 |
columnGap | Устанавливает или возвращает промежуток между столбцами | 3 |
columnRule | Стеновое свойство для установки или возврата всех свойств columnRule | 3 |
columnRuleColor | Устанавливает или возвращает цвет линии-разделителя между столбцами | 3 |
columnRuleStyle | Устанавливает или возвращает стиль линии-разделителя между столбцами | 3 |
columnRuleWidth | Устанавливает или возвращает ширину линии-разделителя между столбцами | 3 |
columns | Сокращенное свойство для установки или возврата columnWidth и columnCount | 3 |
columnSpan | Устанавливает или возвращает, сколько столбцов должен занимать элемент | 3 |
columnWidth | Устанавливает или возвращает ширину столбцов | 3 |
content | Используется с: :before and :after псевдоэлементами, для вставки сгенерированного содержимого | 2 |
counterIncrement | Увеличивает один или несколько счетчиков | 2 |
counterReset | Создает или сбрасывает один или несколько счетчиков | 2 |
cursor | Устанавливает или возвращает тип курсора для отображения указателя мыши | 2 |
direction | Устанавливает или возвращает направление текста | 2 |
display | Устанавливает или возвращает тип отображения элемента | 1 |
emptyCells | Устанавливает или возвращает, показывать границу и фон пустых ячеек, или нет | 2 |
filter | Устанавливает или возвращает фильтры изображений (визуальные эффекты, такие как размытие и насыщенность) | 3 |
flex | Устанавливает или возвращает длину элемента относительно остальных | 3 |
flexBasis | Устанавливает или возвращает начальную длину гибкого элемента | 3 |
flexDirection | Устанавливает или возвращает направление гибких элементов | 3 |
flexFlow | Сокращенное свойство свойств flexDirection и flexWrap | 3 |
flexGrow | Устанавливает или возвращает, насколько элемент будет расти относительно остальных | 3 |
flexShrink | Устанавливает или возвращает, как элемент будет уменьшаться относительно остальных | 3 |
flexWrap | Устанавливает или возвращает, устанавливать ли свойство wrap для flex - элементов | 3 |
cssFloat | Устанавливает или возвращает горизонтальное выравнивание элемента | 1 |
font | Устанавливает или возвращает fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily в одном объявлении | 1 |
fontFamily | Устанавливает или возвращаетсемейство шрифта | 1 |
fontSize | Устанавливает или возвращает размер текста | 1 |
fontStyle | Устанавливает или возвращает стиль шрифта | 1 |
fontVariant | Устанавливает или возвращает модификацию шрифта | 1 |
fontWeight | Устанавливает или возвращает толщину линии шрифта | 1 |
fontSizeAdjust | Preserves the readability of text when font fallback occurs | 3 |
fontStretch | Выбирает нормальное, сжатое или расширенное написание из семейства шрифтов | 3 |
hangingPunctuation | Указывает, может ли знак пунктуации быть помещен вне блока строки | 3 |
height | Устанавливает или возвращает высоту элемента | 1 |
hyphens | Устанавливает, как разделять слова для улучшения макета абзацев | 3 |
icon | Предоставляет автору возможность стилизовать элемент под иконку | 3 |
imageOrientation | Определяет поворот вправо или в направлении по часовой стрелке, который браузер применяет к изображению | 3 |
justifyContent | Устанавливает или возвращает выравнивание между элементами внутри гибкого контейнера, когда элементы не используют все доступное пространство | 3 |
left | Устанавливает или возвращает левую позицию позиционируемого элемента | 2 |
letterSpacing | Устанавливает или возвращает пробел между символами в тексте | 1 |
lineHeight | Устанавливает или возвращает расстояние между строками в тексте | 1 |
listStyle | Устанавливает или возвращает listStyleImage, listStylePosition и listStyleType в одном объявлении | 1 |
listStyleImage | Устанавливает или возвращает изображение для маркера элемента списка | 1 |
listStylePosition | Устанавливает или возвращает позицию для маркера элемента списка | 1 |
listStyleType | Устанавливает или возвращает типмаркера списка | 1 |
margin | Устанавливает или возвращает внешние отступы элемента (может иметь до четырех значений) | 1 |
marginBottom | Устанавливает или возвращает нижний отступ элемента | 1 |
marginLeft | Устанавливает или возвращает левый отступ элемента | 1 |
marginRight | Устанавливает или возвращает правый отступ элемента | 1 |
marginTop | Устанавливает или возвращает верхний отступ элемента | 1 |
maxHeight | Устанавливает или возвращает максимальную высоту элемента | 2 |
maxWidth | Устанавливает или возвращает максимальную ширину элемента | 2 |
minHeight | Устанавливает или возвращает минимальную высоту элемента | 2 |
minWidth | Устанавливает или возвращает минимальную ширину элемента | 2 |
navDown | Устанавливает или возвращает, куда следует перемещаться при использовании клавиши со стрелкой вниз | 3 |
navIndex | Устанавливает или возвращает порядок табуляции для элемента | 3 |
navLeft | Устанавливает или возвращает, куда следует перемещаться при использовании клавиши навигации со стрелкой влево | 3 |
navRight | Устанавливает или возвращает, куда следует перемещаться при использовании клавиши навигации со стрелкой вправо | 3 |
navUp | Устанавливает или возвращает туда, куда следует перемещаться при использовании клавиши навигации со стрелкой | 3 |
opacity | Устанавливает или возвращает уровень непрозрачности для элемента | 3 |
order | Устанавливает или возвращает порядок гибкого элемента относительно остальных | 3 |
orphans | Устанавливает или возвращает минимальное количество строк для элемента, который должен быть оставлен в нижней части страницы, когда разрыв страницы происходит внутри элемента | 2 |
outline | Устанавливает или возвращает все свойства обводки (контура) в одном объявлении | 2 |
outlineColor | Устанавливает или возвращает цвет контура вокруг элемента | 2 |
outlineOffset | Смещает контур и вытягивает его за пределы края | 3 |
outlineStyle | Устанавливает или возвращает стиль контура вокруг элемента | 2 |
outlineWidth | Устанавливает или возвращает ширину контура вокруг элемента | 2 |
overflow | Устанавливает или возвращает, что делать с содержимым, которое отображается вне поля элемента | 2 |
overflowX | Указывает, что делать с левыми / правыми краями содержимого, если он переполняет область содержимого элемента | 3 |
overflowY | Указывает, что делать с верхними / нижними краями содержимого, если оно переполняет область содержимого элемента | 3 |
padding | Устанавливает или возвращает внутренние отступы элемента (может иметь до четырех значений) | 1 |
paddingBottom | нижний отступ | 1 |
paddingLeft | левый отступ | 1 |
paddingRight | правый отступ | 1 |
paddingTop | верхний отступ | 1 |
pageBreakAfter | Устанавливает или возвращает поведение разрыва страницы после элемента | 2 |
pageBreakBefore | Устанавливает или возвращает поведение разрыва страницы до элемента | 2 |
pageBreakInside | Устанавливает или возвращает поведение разрыва страницы внутри элемента | 2 |
perspective | Устанавливает или возвращает перспективу просмотра 3D-элементов | 3 |
perspectiveOrigin | Устанавливает или возвращает нижнюю позицию трехмерных элементов | 3 |
position | Устанавливает или возвращает тип метода позиционирования, используемый для элемента (статический, относительный, абсолютный или фиксированный) | 2 |
quotes | Устанавливает или возвращает тип кавычек для встроенных котировок | 2 |
resize | Устанавливает или возвращает, может ли пользователь изменять размер элемента | 3 |
right | Устанавливает или возвращает правое положение позиционируемого элемента | 2 |
tableLayout | Устанавливает или возвращает способ компоновки ячеек, строк и столбцов таблицы | 2 |
tabSize | Устанавливает или возвращает длину (колич пробелов) символа табуляции | 3 |
textAlign | Устанавливает или возвращает горизонтальное выравнивание текста | 1 |
textAlignLast | Устанавливает или возвращает, как последняя строка блока или строка прямо перед выравниванием принудительной строки выравнивается, когда выравнивание текста - "justify" | 3 |
textDecoration | Устанавливает или возвращает оформление текста | 1 |
textDecorationColor | Устанавливает или возвращает цвет оформления текста | 3 |
textDecorationLine | Устанавливает или возвращает тип строки в текстовом оформлении | 3 |
textDecorationStyle | Устанавливает или возвращает стиль линии для оформления текста | 3 |
textIndent | Устанавливает или возвращает отступ первой строки текста | 1 |
textJustify | Устанавливает или возвращает метод выравнивания, используемый, когда text-align установлено "justify" | 3 |
textOverflow | Устанавливает или возвращает то, что должно произойти, когда текст переполняет содержащий элемент | 3 |
textShadow | Устанавливает или возвращает теневой эффект текста | 3 |
textTransform | Устанавливает или возвращает капитализацию текста | 1 |
top | Устанавливает или возвращает верхнее положение позиционированного элемента | 2 |
transform | Применяет преобразование 2D или 3D к элементу | 3 |
transformOrigin | Устанавливает или возвращает позицию преобразованных элементов | 3 |
transformStyle | Устанавливает или возвращает способ отображения вложенных элементов в 3D-пространстве | 3 |
transition | Стеновое свойство для установки или возврата четырех свойств перехода (transition) | 3 |
transitionProperty | Устанавливает или возвращает свойство CSS, для которого применяется эффект перехода | 3 |
transitionDuration | Устанавливает или возвращает количество секунд или миллисекунд, которое требуется для перехода | 3 |
transitionTimingFunction | Устанавливает или возвращает кривую скорости эффекта перехода | 3 |
transitionDelay | Устанавливает или возвращает, когда эффект перехода начнется | 3 |
unicodeBidi | Устанавливает или возвращает, должен ли текст переопределяться для поддержки нескольких языков в одном документе | 2 |
verticalAlign | Устанавливает или возвращает вертикальное выравнивание содержимого в элементе | 1 |
visibility | Устанавливает или возвращает, должен ли элемент быть видимым | 2 |
whiteSpace | Устанавливает или возвращает способ обработки вкладок, разрывов строк и пробелов в тексте | 1 |
width | Устанавливает или возвращает ширину элемента | 1 |
wordBreak | Устанавливает или возвращает правила нарушения строки для не-CJK-скриптов | 3 |
wordSpacing | Устанавливает или возвращает расстояние между словами в тексте | 1 |
wordWrap | Позволяет разбивать длинные, неразделяемые слова и перенести на следующую строку | 3 |
widows | Устанавливает или возвращает минимальное количество строк для элемента, который должен быть видимым в верхней части страницы | 2 |
zIndex | Устанавливает или возвращает порядок по вертикали позиционированного элемента | 2 |
Объект «StyleSheet» позволяет просматривать листы стилей документа, добавлять или удалять правила в одном из них.
Получить перечень листов стилей для документа
var styleSheetList = document.styleSheets;
Добавить элемент STYLE - создать из него новый объект CSSStyleSheet
Добавить элемент LINK - добавить из файла стили и на этой базесоздать новый объект CSSStyleSheet
Свойство | Описание |
---|---|
cssRules[] | Возвращает массив, содержащий все правила CSS таблицы |
cssText | Свойство Read / Write, содержащее все содержимое таблицы стилей. |
disabled | Свойство Read / write, которое указывает, отключена ли таблица стилей или нет. Значение по умолчанию - false. |
href | Свойство «Read/write», которое содержит URL-адрес листа стилей |
media | Указывает устройство для таблицы стилей. Значение по умолчанию - «экран». |
ownerNode | Ссылки на узел дерева документов, который содержит текущую таблицу стилей. Для обычных HTML-страниц ownerNode обычно возвращает элемент LINK или STYLE в таблице стилей. |
ownerRule | Для таблиц стилей, которые определяются с помощью правила @import, возвращается объект CSSImportRule. |
owningElement | Ссылки на узел дерева документов, который содержит текущую таблицу стилей. IE только свойство. В NS6 + / Firefox эквивалент «ownerNode». |
parentStyleSheet | Для таблиц стилей, которые включены на странице с помощью правила @page, @import родительский стиль StyleSheet ссылается на таблицу стилей верхнего уровня. Для стандартных таблиц стилей LINK или STYLE это свойство возвращает null. |
rules[] | Возвращает массив, содержащий все правила CSS таблицы стилей. IE только. В NS6 + / Firefox вместо этого используется cssRules []. С помощью правил [] можно добавлять, удалять или изменять существующие правила в таблице стилей. |
title | Возвращает значение атрибута title таблицы стилей, если оно определено. |
type | Возвращает значение атрибута type таблицы стилей. |
Метод | Описание |
---|---|
addRule(selector, declaration, [index]) | Метод для IE? который добавляет новое правило в styleSheet/ Параметр selector - селектор правила ("p", "div b"), declaration - набор свойств правила ("background-color: yellow; color: brown"). Необязательный параметр - "index" позволяет указать позицию нового правила в таблице стилей. |
removeRule([index]) | Метод, который удаляет первое правило таблицы стилей. Необязательный индекс (целое число) позволяет удалить определенное правило на основе его позиции в коллекции правил []. |
deleteRule(index) | Удаляет правило из таблицы стилей, основываясь на его позиции в коллекции cssRules []. Параметр «index» (integer) используется, чтобы указать эту позицию. |
insertRule(rule, index) | Вставляет новое правило в таблицу стилей, где параметр «rule» - это строка, содержащая все добавляемое правило (например: #myid {color: red; border: 1px solid black}) и «index» - целое число, определяющее положение внутри cssRules []. |
Свойство | Описание |
---|---|
cssText | Возвращает содержимое правила css целиком, от селектора до соответствующих объявлений CSS. Полезное свойство для простого поиска внутри правила, позволяющее увидеть как селектор, так и все сразу правила. |
length | Возвращает длину объекта CSS Rule (cssRules.length или rules.length), другими словами, количество правил в таблице стилей. |
parentStyleSheet | Возвращает объект styleSheet, который содержит текущее правило. |
selectorText | Возвращает часть правила - селектор. |
style | Даёт доступ для чтения-записи к отдельным атрибутам, заданным в правиле. Аналогично inline объекту "style" элемента DOM. |