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" en la hoja de estilo actual:
@import "navigation.css"; /* usar cadena */
o
@import url("navigation.css"); /* usar url */
Ejemplo 2
Importar la hoja de estilo "printstyle.css" solo cuando el medio sea print:
@import "printstyle.css" print;
Ejemplo 3
Importar la hoja de estilo "mobstyle.css" solo cuando el medio sea screen y el ancho máximo de la vista sea de 768 píxeles:
@import "mobstyle.css" screen and (max-width: 768px);
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. url puede ser absoluta o relativa. |
| list-of-mediaqueries | Una lista de consultas de medios separada por comas, que determina bajo 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 admite completamente la propiedad.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 5.5 | 1.0 | 1.0 | 3.5 |
