¿Es posible incluir un archivo CSS en otro?

782

css

— Gaizka Allende
fuente

26

Solo para su información, hacer esto no guarda una solicitud HTTP. Simplemente le ahorra tener que incluir el archivo .css importado en otro lugar.

— T. Brian Jones

1

Sería casi lo mismo que incluir otro CSS antes y no la mejor de las prácticas

— Gaizka Allende

1087

Si:

@import url("base.css");

Nota:

La @importregla debe preceder a todas las demás reglas (excepto @charset).
Las @importdeclaraciones adicionales requieren solicitudes de servidor adicionales. Como alternativa, concatene todos los CSS en un archivo para evitar múltiples solicitudes HTTP. Por ejemplo, copie el contenido de base.cssy special.cssdentro base-special.cssy solo de referencia base-special.css.

— Kevin Read
fuente

143

Si. Es posible importar un archivo CSS a otro archivo CSS.

Debe ser la primera regla en la hoja de estilo usando la regla @import .

@import "mystyle.css";
@import url("mystyle.css");

La única advertencia es que los navegadores web más antiguos no lo admitirán. De hecho, este es uno de los 'hacks' de CSS para ocultar estilos CSS de navegadores antiguos.

Consulte esta lista para obtener asistencia sobre el navegador.

— Ronnie Liew
fuente

42

El @import url("base.css");bien pero hay que tener en cuenta que funciona cada @importdeclaración es una nueva petición al servidor. Esto puede no ser un problema para usted, pero cuando se requiere un rendimiento óptimo, debe evitarlo @import.

— Gene
fuente

2

¿No se almacenan en caché los archivos CSS? ¿Entonces solo va a solicitar el archivo una vez? Parece trivial de qué preocuparse.

— endolito

1

Si no está minimizando su CSS a un archivo, sí, está en lo correcto, pero una vez que lo hace, simplemente está llamando a un archivo CSS. Corrígeme si me equivoco, por supuesto.

— mjwrazor

27

La @importregla CSS hace justamente eso. P.ej,

@import url('/css/common.css');
@import url('/css/colors.css');

— Sören Kuklau
fuente

16

Si.

@import "your.css";

La regla está documentada aquí .

— Gordon Wilson
fuente

11

En algunos casos es posible usar @import "file.css", y la mayoría de los navegadores modernos deberían admitir esto, los navegadores más antiguos como NN4, se volverán un poco locos.

Nota: la declaración de importación debe preceder a todas las demás declaraciones en el archivo y probarla en todos los navegadores de destino antes de usarla en producción.

— seanb
fuente

8

Sí, use @import

información detallada fácilmente buscada en Google, una buena en http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

— DarenW
fuente

6

Sí, es posible usar @import y proporcionar la ruta del archivo CSS, por ejemplo

@import url("mycssfile.css");

o

@import "mycssfile.css";

— vidhi
fuente

6

@import("/path-to-your-styles.css");

Esa es la mejor manera de incluir una hoja de estilo CSS dentro de una hoja de estilo CSS utilizando CSS.

— Floyd
fuente

6

La regla "@import" podría llamar en varios archivos de estilos. El navegador o el Agente de usuario llama a estos archivos cuando es necesario, por ejemplo, las etiquetas HTML llaman CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
</body>
</html>

El archivo CSS "main.css" contiene la siguiente sintaxis:

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

Para insertar en el elemento de estilo, use createTexNode, no use innerHTML pero:

<script>
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var textNode = document.createTextNode("
    @import 'fineprint.css' print;
    @import 'bluish.css' projection, tv;
    @import 'custom.css';
    @import 'chrome://communicator/skin/';
    @import 'common.css' screen, projection;
    @import 'landscape.css' screen and (orientation:landscape);
");
style.appendChild(textNode);
</script>

— Chetabahana
fuente

Solo para señalar, mientras que @hylp señala que es posible anular las clases de las importaciones (¿clases projectiony screen?), Esto generalmente nunca es algo bueno. ;)

— Tcll

2

@import url('style.css');

A diferencia de la mejor respuesta, no se recomienda agregar todos los archivos CSS en un solo fragmento cuando se utiliza HTTP / 2.0

— peterC_
fuente

2

Importar bootstrap con altervista y wordpress

Lo uso para importar bootstrap.css en altervista con wordpress

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

y funciona bien, ya que eliminaría el código rel del enlace html si lo pongo en una página

— Giovanni G. PY
fuente

1

Sí. Puede importar fácilmente un CSS a otro (en cualquier lugar del sitio web). Debe usar como:

@import url("url_path");

— NARGIS PARWEEN
fuente

1

Por alguna razón, @import no funcionó para mí, pero no es realmente necesario, ¿verdad?

Esto es lo que hice en su lugar, dentro del html:

  <link rel="stylesheet" media="print" href="myap-print.css">
  <link rel="stylesheet" media="print" href="myap-screen.css">
  <link rel="stylesheet" media="screen" href="myap-screen.css">

Tenga en cuenta que media = "print" tiene 2 hojas de estilo: myap-print.css y myap-screen.css. Es el mismo efecto que incluir myap-screen.css dentro de myap-print.css.

— Colin Keenan
fuente

No esto no es correcto. Esto incluye múltiples archivos CSS desde un archivo HTML, sin incluir un archivo CSS desde otro archivo CSS.

— TylerH

0

canta la regla CSS @import aquí

@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;

— Pocky_Thailand
fuente

0

He creado el archivo main.css e incluí todos los archivos css en él.

Solo podemos incluir un archivo main.css

@import url('style.css');
@import url('platforms.css');

— Dinesh Vaitage
fuente

-3

Me topé con esto y solo quería decir: ¡NO UTILIZEN @IMPORT EN CSS! La declaración de importación se envía al cliente y el cliente realiza otra solicitud. Si desea dividir su CSS entre varios archivos, use Less. En Less, la declaración de importación ocurre en el servidor y la salida se almacena en caché y no crea una penalización de rendimiento al obligar al cliente a realizar otra conexión. Sass también es una opción que no he explorado. Francamente, si no estás usando Less o Sass, entonces debes comenzar. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

— WillSeitz
fuente

1

El cliente hará otra solicitud, no otra conexión. Y por la calidad, es una buena forma de usar import css. Es mucho mejor tener esas importaciones en lugar de un gran archivo CSS que crece y crece con el proyecto ...

— YvesR

3

Esta es la recomendación de Google ( developers.google.com/speed/docs/best-practices/… ) y Yahoo ( developer.yahoo.com/performance/rules.html#csslink )

— WillSeitz

1

Aún así, es solo una solicitud más. Potencialmente de cientos para una carga de página completa.

— Steve Bennett

8

¡¿Derecha?! Una solicitud más no justifica el movimiento de brazos y las renuncias de mayúsculas. Una solicitud no es una mala práctica. -1 a la respuesta - MENOS y SASS culto de carga.

— Chris Baker

Bueno, es solo una solicitud más ... pero puede importar más CSS en uno y se descargan en paralelo.

— wh1sp3r