Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

La regla-at @import CSS

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)';

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas