CSS (hojas de estilo en cascada)

3.4. CSS utilizando la etiqueta @import

<style type="text/css">
    @import url ("ruta_hasta_nuestro_archivo/styles.css");
</style>

es equivalente a:

<link href="ruta_hasta_nuestro_archivo/styles.css" rel="stylesheet" type="text/css" />

Podemos incluir la importación dentro del HEAD de nuestro documento. Sin embargo, esta técnica tiene sus desventajas (no las trataremos en este curso, pero si alguien siente curiosidad, puede conocerlas en esta página: www.anieto2k.com/2009/04/09/no-uses-import). Mencionamos esta técnica únicamente para que no os extrañe si en algún momento os encontráis con una importación hecha de esa manera.

También se puede utilizar la etiqueta @import en un CSS externo.

Ejemplo:

Tengo un CSS general, que se llama “styles.css”, pero es muy grande, y he decidido dividirlo en varios documentos para que actualizarlo sea más sencillo. El resultado son tres archivos: colors.css, fonts.css y general.css

Mi archivo “styles.css” podría ser así:

@import url ("general.css");  
@import url ("fonts.css");  
@import url ("colors.css");

De momento no vamos a profundizar en este punto. Comprenderemos mejor qué implicaciones tienen las líneas anteriores (el hecho de que haya unas definiciones CSS después de otras) más adelante.