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

La interfaz **`CSSStyleSheet`** representa una sola hoja de estilo CSS, y le permite inspeccionar y modificar la lista de reglas contenidas en la hoja de estilo. Hereda propiedades y métodos de su padre, `StyleSheet`.

StyleSheet

CSSStyleSheet
Una hoja de estilo consta de una colección de objetos `CSSRule` que representan cada una de las reglas de la hoja de estilo. Las reglas están contenidas en un `CSSRuleList` (en-US), que se puede obtener de la propiedad `cssRules` (en-US) de la hoja de estilo.

Por ejemplo, una regla podría ser un objeto `CSSStyleRule` que contenga un estilo como:


```css
h1,
h2 {
  font-size: 16pt;
}
```


Otra regla podría ser una *regla de arroba* como `@import` o `@media`, y así sucesivamente.

Consulte la sección Obtención de una hoja de estilo para conocer las diversas formas en que se puede obtener un objeto `CSSStyleSheet`. Un objeto `CSSStyleSheet` también se puede construir directamente. El constructor y los métodos `CSSStyleSheet.replace()` (en-US) y `CSSStyleSheet.replaceSync()` (en-US) son adiciones más recientes a la especificación, que permiten *hojas de estilo construibles*.

Constructor
-----------

`CSSStyleSheet()` (en-US)

Crea un nuevo objeto `CSSStyleSheet`.

Propiedades de instancia
------------------------

*Hereda las propiedades de su padre, `StyleSheet`.*

`CSSStyleSheet.cssRules` (en-US) Read only 

Devuelve un `CSSRuleList` (en-US) activo que mantiene una lista actualizada de los objetos `CSSRuleList` (en-US) que componen la hoja de estilo.

**Nota:** En algunos navegadores, si se carga una hoja de estilo desde un dominio diferente, acceder a `cssRules` genera un `SecurityError`.

`CSSStyleSheet.ownerRule` Read only 

Si esta hoja de estilo se importa al documento mediante una regla `@import`, la propiedad `ownerRule` devuelve la correspondiente `CSSImportRule` (en-US); de lo contrario, el valor de esta propiedad es `null`.

Métodos de instancia
--------------------

*Hereda métodos de su padre, `StyleSheet`.*

`CSSStyleSheet.deleteRule()`

Elimina la regla en el índice especificado en la lista de reglas de la hoja de estilo.

`CSSStyleSheet.insertRule()`

Inserta una nueva regla en la posición especificada en la hoja de estilo, dada la representación textual de la regla.

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

Reemplaza de forma asíncrona el contenido de la hoja de estilo y devuelve un `Promise` que se resuelve con la `CSSStyleSheet` actualizada.

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

Reemplaza sincrónicamente el contenido de la hoja de estilo.

Propiedades heredadas
---------------------

*Estas propiedades son propiedades heredadas introducidas por Microsoft; estos se mantienen para la compatibilidad con los sitios existentes.*

`rules` (en-US) Read only  
Obsoleto

La propiedad `rules` es funcionalmente idéntica a la propiedad estándar `cssRules` (en-US); devuelve un `CSSRuleList` (en-US) en vivo que mantiene una lista actualizada de todas las reglas en la hoja de estilo.

Métodos heredados
-----------------

*Estos métodos son métodos heredados introducidos por Microsoft; estos se mantienen para la compatibilidad con los sitios existentes.*

`addRule()` (en-US) 
Obsoleto

Agrega una nueva regla a la hoja de estilo dado el selector al que se aplica el estilo y el bloque de estilo para aplicar a los elementos coincidentes.

Esto difiere de `insertRule()`, que toma la representación textual de la regla completa como una sola cadena.

`removeRule()` (en-US) 
Obsoleto

Funcionalmente idéntico a `deleteRule()`; elimina la regla en el índice especificado de la lista de reglas de la hoja de estilo.

Obtención de una hoja de estilo
-------------------------------

Una hoja de estilo está asociada como máximo con un `Document`, al que se aplica (a menos que este desactivada). Se puede obtener una lista de objetos `CSSStyleSheet` para un documento dado usando la propiedad `Document.styleSheets`. También se puede acceder a una hoja de estilo específica desde su objeto *propietario* (`Node` o `CSSImportRule`), si lo hay.

Un objeto `CSSStyleSheet` se crea y se inserta en la lista `Document.styleSheets` del documento automáticamente por el navegador, cuando se carga una hoja de estilo para un documento.

A continuación se muestra una lista (posiblemente incompleta) de las formas en que una hoja de estilo se puede asociar con un documento:

| Motivo por el cual la hoja de estilo se asocia con el documento | Aparece en la lista `document.styleSheets` | Obtener el elemento/regla propietario dado el objeto de hoja de estilo | La interfaz para el objeto propietario. | Obtención del objeto CSSStyleSheet del propietario |
| --- | --- | --- | --- | --- |
| 
 Elementos `<style>` y `<link>`
 en el documento
  | Sí | `.ownerNode` | `HTMLLinkElement` (en-US),`HTMLStyleElement`,o
 `SVGStyleElement` (en-US) | `HTMLLinkElement.sheet` (en-US),`HTMLStyleElement.sheet` (en-US),o
 `SVGStyleElement.sheet` (en-US) |
| Regla CSS `@import` en otras hojas de estilo aplicadas al documento | Sí | `.ownerRule` | `CSSImportRule` (en-US) | `.styleSheet` (en-US) |
| 
 Instrucción `<?xml-stylesheet ?>` de procesamiento en
 el documento (no HTML)
  | Sí | `.ownerNode` | `ProcessingInstruction` (en-US) | `.sheet` (en-US) |
| Cabecera de enlace HTTP | Sí | *N/A* | N/A | N/A |
| Hojas de estilo del navegador (predeterminado) | No | N/A | N/A | N/A |

Especificaciones
----------------

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

Compatibilidad con navegadores
------------------------------

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

Véase también
-------------

* Modelo de objetos CSS
* Uso de información de estilo dinámico (en-US)