Regla CSS @import
La regla at-rule @import de CSS se utiliza para importar reglas de estilo desde otras hojas de estilo y para admitir consultas de medios. La palabra clave @import debe ir seguida de la URI de la hoja de estilo que se va a incluir. También se permite una cadena. Debe estar en la parte superior de la hoja de estilo, antes de cualquier otra regla excepto @charset y @layer.
INFO
La regla at-rule @import no se puede usar dentro de reglas at-rule de grupo condicional.
| Valor inicial | - |
|---|---|
| Se aplica a | - |
| Heredado | No. |
| Animable | No. |
| Versión | CSS2 |
| Sintaxis DOM | N/A |
Sintaxis
Sintaxis de la regla CSS @import
@import <url> | <string> [ <media-query-list> ]? ;Ejemplo de la regla @import:
Ejemplo de la regla CSS @import
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
@import url('https://fonts.googleapis.com/css?family=Coiny');
@import url('https://fonts.googleapis.com/css?family=Lobster');
.p1 {
font-family: 'Coiny', cursive;
}
.p2 {
font-family: 'Lobster', cursive;
}
</style>
</head>
<body>
<h2>@import at-rule example</h2>
<p class="p1">The @import rule allows you to import a style sheet into another style sheet.</p>
<p class="p2">The @import rule also supports media queries, so you can allow the import to be media-dependent.</p>
</body>
</html>Resultado
La diferencia entre URL relativa y URL absoluta
El tipo de datos <url> y <string> son aceptados por la regla @import para determinar el archivo que se debe importar. Esto se puede proporcionar como una URL absoluta o relativa.
El ejemplo de código a continuación utiliza una URL relativa. Esto significa que la URL es relativa a la ubicación de la hoja de estilo actual. Aquí no necesitamos proporcionar una ruta. En su lugar, solo proporcionamos el nombre del archivo.
Regla CSS @import
@import "relative.css";En el siguiente ejemplo, la URL sigue siendo relativa, aunque hemos proporcionado información de ruta:
Regla CSS @import
@import "../css/relative.css";Como puede ver, el siguiente ejemplo de código incluye la ruta completa con el nombre de dominio. Esto significa que la URL es absoluta.
Regla CSS @import
@import "http://www.examples.fr/css/absolute.css";Consultas de medios
La regla @import admite consultas de medios. Esto significa que la importación puede depender del medio. En el ejemplo de código a continuación, puede importar la hoja de estilo solo cuando el medio sea de impresión.
Regla CSS @import
@import "media-query.css" print;Valores
| Valor | Descripción |
|---|---|
| url | Una <url> o <string> que indica la ubicación del recurso que se va a importar. La URL puede ser relativa o absoluta. |
| string list-of-mediaqueries | Una lista separada por comas de consultas de medios que condicionan la aplicación de las reglas CSS definidas en la URL vinculada. |
Práctica
¿Cuál es la sintaxis correcta para usar la regla @import en CSS?