CSSStyleSheet
=============

**`CSSStyleSheet`** interface представляет одну CSS таблицу стилей. CSS таблица наследует свойства и методы от родителя, `StyleSheet`.

Таблица стилей состоит (правил) *rules*, таких как *style rules (en-US)* ("`h1,h2 { font-size: 16pt }"`), *и различных* (`@import`, `@media`, ...), etc. **`CSSStyleSheet`** interface позволяет получать и изменять список правил в таблице стилей.

Смотрите Notes секцию о различных способах получения **`CSSStyleSheet`** object.

Properties
----------

*Inherits properties from its parent, `StyleSheet`.*

`CSSStyleSheet.cssRules` (en-US)

 Returns a live `CSSRuleList` (en-US), listing the `CSSRule` objects in the style sheet.
 This is normally used to access individual rules like this:

```

   styleSheet.cssRules[i] // where i = 0..cssRules.length-1
```


To add or remove items in `cssRules`, use the `CSSStyleSheet`'s `deleteRule()` and `insertRule()` methods, described below.

`CSSStyleSheet.ownerRule` (en-US)

If this style sheet is imported into the document using an `@import` (en-US) rule, the `ownerRule` property will return that `CSSImportRule` (en-US), otherwise it returns `null`.

Methods
-------

*Inherits methods from its parent, `Stylesheet`.*

`CSSStyleSheet.deleteRule()` (en-US)

Deletes a rule at the specified position from the style sheet.

`CSSStyleSheet.insertRule()` (en-US)

Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.

Notes
-----

In some browsers, if a stylesheet is loaded from a different domain, calling `cssRules` results in `SecurityError`.

A stylesheet is associated with at most one `Document`, which it applies to (unless disabled). A list of `CSSStyleSheet` objects for a given document can be obtained using the `document.styleSheets` (en-US) property. A specific style sheet can also be accessed from its *owner* object (`Node` or `CSSImportRule`), if any.

A `CSSStyleSheet` object is created and inserted into the document's `styleSheets` list automatically by the browser, when a style sheet is loaded for a document. As the `document.styleSheets` (en-US) list cannot be modified directly, there's no useful way to create a new `CSSStyleSheet` object manually (although Constructable Stylesheet Objects is coming to the web platform soon and is already supported in Blink). To create a new stylesheet, insert a `<style>` or `<link>` element into the document.

A (possibly incomplete) list of ways a style sheet can be associated with a document follows:

| Reason for the style sheet to be associated with the document | Appears in `document. styleSheets` list | Getting the owner element/rule given the style sheet object | The interface for the owner object | Getting the CSSStyleSheet object from the owner |
| --- | --- | --- | --- | --- |
| `<style>` and `<link>` elements in the document | Yes | `.ownerNode` (en-US) | `HTMLLinkElement`, `HTMLStyleElement` (en-US), or `SVGStyleElement` (en-US) | `.sheet` (en-US) |
| CSS `@import` (en-US) rule in other style sheets applied to the document | Yes | `.ownerRule` (en-US) | `CSSImportRule` (en-US) | `.styleSheet` (en-US) |
| `<?xml-stylesheet ?>` processing instruction in the (non-HTML) document | Yes | `.ownerNode` (en-US) | `ProcessingInstruction` (en-US) | `.sheet` (en-US) |
| HTTP Link Header | Yes | *N/A* | N/A | N/A |
| User agent (default) style sheets | No | N/A | N/A | N/A |

Specifications
--------------

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssstylesheet-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using dynamic styling information (en-US)