Cómo importar un archivo CSS dentro otro CSS

Anuncio:

En esta ocasión vamos a ver cómo importar un archivo CSS dentro de otro CSS. Para esto vamos a usar la directiva @import.

Para importar un archivo CSS a nuestra hoja de estilos, al inicio (normalmente) de nuestro documento .css vamos a usar lo siguiente:

@import url(estilos-css-exteno.css);

De este modo estamos importando todos los estilos del archivo indicado en nuestra hoja de estilos. La directiva @import acepta rutas relativas y absolutas así que puedes usar ambas.

Además, también puedes importar solo ciertos estilos. Por ejemplo, puedes importar solo los estilos referentes a print o screen del siguiente modo:

@import url(estilos-css-exteno.css) all; // Totos
@import url(estilos-css-exteno.css) screen; // Solo Screen
@import url(estilos-css-exteno.css) print; // Solo Print

Debes tener muy en cuenta que el uso de @import afecta al rendimiento en la carga de nuestro sitio web. Cuando está cargando la web, nosotros vamos a tener nuestra hoja de estilos enlazada en el documento HTML con:

< link rel="mis-estilos.css" href=" mis-estilos.css" type=" text / css ">

Entonces, cuando comience a cargar este archivo, se encuentra con el @import, cargará el archivo definido en el import, estilos-css-exteno.css, y después, continuará con la carga de los estilos definidos en mis-estilos.css. Como puedes ver se pausa la carga de los estilos de mi archivo hasta que cargan los del import. Si puedes importarlo directamente en el HTML, ambos archivos se cargarán paralelamente con lo que será mejor de cara al rendimiento.

¿Esto quiere decir que no debo usar @import? No. Esto quiere decir que tienes que saber cuando usar la directiva @import. En mi opinión, se debe usar esta directiva cuando no podamos modificar el HTML.

Puedes aprender más en nuestra sección de CSS.

Espero que te sea de utilidad!

• CSS3