Regla @import de CSS

Definición y uso

La regla @import permite importar una hoja de estilo en otra hoja de estilo.

La regla @import debe estar ubicada en la parte superior del documento (pero después de cualquier declaración @charset).

La regla @import también admite consultas de medios, por lo que permite la importación dependiente del medio.

Ejemplo

Ejemplo 1

Importar la hoja de estilo "navigation.css" a la hoja de estilo actual:

@import "navigation.css"; /* Uso de cadena */

o

@import url("navigation.css"); /* Uso de url */

Ejemplo 2

Importar la hoja de estilo "printstyle.css" solo cuando el medio sea print:

@import "printstyle.css" print;

Prueba por ti mismo

Ejemplo 3

Importar la hoja de estilo "mobstyle.css" solo cuando el medio sea screen y el ancho máximo de la ventana de visualización sea 768 píxeles:

@import "mobstyle.css" screen and (max-width: 768px);

Prueba por ti mismo

sintaxis de CSS

@import url|string list-of-mediaqueries;

valor del atributo

valor descripción
url|string url o cadena, que representa la ubicación del recurso a importar. La url puede ser absoluta o relativa.
list-of-mediaqueries Una lista de consultas de medios separada por comas, que determina en qué condiciones se aplican las reglas de CSS introducidas a través de la URL.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que completamente admite esa propiedad.

Chrome IE / Edge Firefox Safari Opera
1.0 5.5 1.0 1.0 3.5