La declaración
@import
permite importar una hoja de estilos externa dentro de otra hoja de estilos.La sintaxis
El url a utilizar puede aparecer dentro de una anotación funcional url(), o sencillamente entre comillas:
@import url(ruta/estilos.css); @import 'ruta/estilos.css';
La posición dentro de una hoja de estilos
Las declaraciones
@import
tienen que preceder cualquier otra regla de la hoja de estilos, con una excepción: puede ser precedida y tiene que ser precedida por la declaración @charsert
.@charset "utf-8"; @import url(ruta/estilos.css);
@import y @media
Tampoco puede ser utilizada dentro de un bloque
@media
, aunque sí es posible importar una hoja de estilos externa para ser utilizada con un cierto tipo de media.@import url(estilos/print.css) print; . . . . @media print { /* las reglas CSS van aquí */ }
Para tener en cuenta
La declaración
@import
puede tener un efecto negativo en el rendimiento de la página.Algunos ejemplos
@import url("print.css") print; @import url("speech.css") speech; @import 'custom.css'; @import url("chrome://communicator/skin/"); @import "common.css" screen; @import url('landscape.css') screen and (orientation:landscape); @import url(https://fonts.googleapis.com/css?family=Raleway:400); @import 'https://fonts.googleapis.com/css?family=Raleway:400)';
0 Comentarios