JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Las rutas relativas en archivos CSS

Se trata esta de una cuestión básica pero que muchos programadores web con poca experiencia suelen confundir.

Imagina que tienes un sitio web muy sencillo con una página, una hoja de estilos y una imagen, organizados de esta manera:

Esquema_Imagenes_CSS

La página que está ubicada en la raíz hace uso de la hoja de estilos “MisEstilos.css” que está en la carpeta CSS. Además incluye a la imagen “Correo.jpg” almacenada en la carpeta “imágenes”. Además, la hoja de estilos incluye una regla que hace uso también de la misma imagen, para colocarla de fondo en un elemento.

¿Cuál es la ruta relativa que deberíamos usar para referenciar a la imagen desde la página? ¿Y desde la CSS? ¿Es la misma?

Veamos las respuestas a estas preguntas, bastante sencillas pero no obvias para todo el mundo.

Si queremos referenciar la imagen desde la página debemos hacer algo como esto:

<img src="imagenes/Correo.jpg">

Más fácil imposible, ¿no?

La página hace uso de la hoja de estilos, así que para referenciar el archivo .css ponemos esto:

<link rel="stylsheet" type="text/css" href="CSS/MisEstilos.css" />

...referenciando el .css del mismo modo exactamente.

Vale, ahora viene el detalle importante...

Desde dentro del .css se hace referencia también a la imagen, por ejemplo con una regla como esta:

.Correo {
    background-image:url(ruta a la imagen);
}

¿Qué ruta deberíamos colocar dentro de la función url?

Tenemos dos opciones:

  • Opción a) Dado que la página que está haciendo uso de la imagen está en el raíz, la ruta que debería ir es /imagenes/Correo.jpg, como hemos hecho hace un momento para colocar la imagen en la página (ver más arriba).
  • Opción b): Dado que la imagen está siendo referenciada desde el archivo .css, entonces debemos escribir una ruta relativa a la ubicación del CSS, no de la página que lo utiliza, es decir, en este caso sería ../imagenes/Correo.jpg.

¿Con qué opción te quedas?

Efectivamente, la opción correcta es la segunda, la b): El estándar CSS dice lo siguiente ya desde su primera versión, hace casi 20 años:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.

Esta forma de proceder es muy lógica y conveniente, ya que así cuando creamos una hoja de estilos no debemos preocuparnos de dónde va a ser utilizada posteriormente. Sólo nos preocupará la ubicación relativa a ésta de los recursos (como las imágenes) que se utilicen.

Simple, básico, pero no siempre tenido en cuenta por los que empiezan. Me ha parecido conveniente recordarlo.

¡Espero que te sea útil!

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (6) -

Árticulo Genial, muchas gracias.

Responder

Hola,  tengo un problema y te lo cuento a ver si me puedes ayudar amigo:   diseñé una pagina web en una carpeta local llamada  MIPROYECTO, dentro tengo index.html y subcarpetas para CSS e IMAGENES

Inicialmente en index.html llamaba el archivo de estilos asi:  ../MIPROYECTO/CSS/estilos.css  y funcionaba bien local pero al subir al sitio no jala el archivo css. ( porque la carpeta local MIPROYECTO no existe en el sitio web)

Hice un cambio en las rutas de index.html y dejé esto:   CSS/estilos.css  ahora si me jala los estilos en la web y todo perfecto.

Mi problema es que localmente ahora ese index.html no funciona, no jala los estilos porque le quité /MIPROYECTO/  dentro de la ruta para buscar mi archivo css

Que debo hacer para que mi index.html logre jalar el archivo de estilos tanto local como en la web??

muchas gracias.  Saludos.

RONALD DE COSTA RICA

Responder

Spain José M. Alarcón

No tiene mucho sentido que ocurra lo que comentas. Tiene que haber algo más.

Si tu index.html está ubicado en la misma carpeta que las subcarpetas "CSS" y similares, en primer lugar no tiene sentido que uses una ruta del estilo "../MIPROYECTO/CSS/Estilos.css", sino que siempre deberías usar "CSS/Estilos.css" y te funcionará tanto en local como en el servidor SIEMPRE.

Si no te funciona en local es porque algo más estás haciendo mal, pues esto no tiene fallo posible.

Saludos.

Responder

Manuel Rojas

Como hago para ubicar y modificar un archivo css, utilizo Firebug y hago la modificación pero como no la hago directamente en el archivo no se guarda...en la pantalla derecha cuando utilizo el Firebug...mi pregunta es: como saber donde se encuentra ese archivo que veo en la pantalla derecha para poder hacer la modificación y guardar los cambios en forma definitiva. Gracias

Responder

Te agredezco muchísimo el aporte!!

Responder

cristian ruiz

Super útil, muchas gracias  

Responder

Agregar comentario