Enlazar y abrir hojas de estilo

Nota: En la página de vídeos explicativos se puede ver un vídeo de 6 minutos de duración en el que se crea una página web con su hoja de estilo.

Para que el navegador aplique una hoja de estilo externa al mostrar una página web, la hoja de estilo tiene que estar enlazada en la página web.

En esta página se tratan los siguientes temas:

Enlazar una hoja de estilo

Para poder enlazar una hoja de estilo en una página web, basta con tener abierta en Amaya la página web. Los pasos a dar son los siguientes:

• Abrir el menú Estilo > Hojas de estilo > Enlazar hoja de estilo....

  

• Inmediatamente se abrirá una caja de diálogo "Enlace".

  

• Si la hoja de estilo no existe todavía y se quiere crear en el mismo directorio que la página web, basta con escribir el nombre de la hoja de estilo en la caja de texto (sin olvidar la extensión .css) y pulsar el botón "Confirmar".
• Si se quiere elegir una hoja de estilo ya existente (o crearla en otra carpeta), se puede pulsar el icono de carpeta "Buscar" () situado a la derecha de la caja de texto. Inmediatamente se abrirá una caja de diálogo estándar de Windows para seleccionar el archivo. Hay que desplazarse hasta la carpeta en la que se encuentre la hoja de estilo y seleccionarla (o escribir su nombre sin olvidar la extensión .css si se quiere crear la hoja de estilo en otra carpeta).

  

• Si la hoja de estilo está abierta en otra ventana de Amaya, se puede pulsar el botón "Clic". El cursor cambiará de forma y se convertirá en una cruz ( ). A continuación, hay que hacer clic en la ventana que contiene la hoja de estilo (teneindo cuidado en no hacer clic en ningún elemento que tenga el icono de destino ).

Volver al principio de la página

Abrir una hoja de estilo enlazada

Para poder abrir la hoja de estilo enlazada en una página web, lógicamente hay que tener abierta en Amaya la página web y haber enlazado previamente la hoja de estilo, como se comenta en el punto anterior). Los pasos a dar son los siguientes:

• Abrir el menú Estilo > Hojas de estilo > Abrir hoja de estilo enlazada....

  

• Si no se hubiera enlazado ninguna hoja de estilo, Amaya mostrará únicamente la hoja de estilo por omisión del usuario (que salvo si el usuario la ha modificado, está vacía)

  

• Si hay una o varias hojas de estilo enlazadas en la misma página web, Amaya las mostrará junto con la hoja de estilo por omisión del usuario. Hay que seleccionar la hoja de estilo que se quiera abrir y pulsar "Confirmar". Inmediatamente, Amaya abrirá una nueva pestaña con la hoja de estilo.

  

  Nota: El archivo css no se crea en el disco duro cuando se enlaza en la página web ni cuando se abre, sino cuando se guarde por primera vez en la ventana de edición de Amaya.

Volver al principio de la página

Borrar el enlace a una hoja de estilo

Para borrar el enlace a una hoja de estilo en una página web, basta con tener abierta en Amaya la página web. Los pasos a dar son los siguientes:

• Abrir el menú Estilo > Hojas de estilo > Borrar enlace a hoja de estilo....

  

• Si hay una o varias hojas de estilo enlazadas en la misma página web, Amaya las mostrará. Hay que seleccionar la hoja de estilo cuyo enlace se quiera eliminar y pulsar "Confirmar".

  

Volver al principio de la página

Abrir una hoja de estilo cualquiera

Se puede abrir una hoja de estilo cualquiera (esté o no esté enlazada a una página web), mediante el menú Archivo > Abrir documento > Archivo, pulsando el botón "Buscar" () y eligiendo el tipo de archivo CSS en la caja de diálogo estándar de Windows para seleccionar el archivo.

Volver al principio de la página

Desactivar y activar una hoja de estilo

Mediante el menú Estilo > Hojas de estilo > Desactivar hoja de estilo enlazada se puede desactivar una hoja de estilo para que Amaya no aplique temporalmente las propiedades definidas en esa hoja de estilo. Al desactivar una hoja de estilo no se elimina el enlace a la hoja de estilo.

Para aplicar nuevamente la hoja de estilo se puede simplemente actualizar la página o utilizar el menú Estilo > Hojas de estilo > Activar hoja de estilo enlazada.

Volver al principio de la página

Hojas de estilo alternativas

Nota: Se puede ver un vídeo explicativo que muestra cómo definir hojas de estilo alternativas en Amaya.

Como navegador, Amaya no maneja hojas de estilo alternativas, aunque puede preparar el código para que las hojas de estilo aternativas funcionen en el navegador.

Amaya tampoco permite elegir entre hojas de estilo alternativas, ni tampoco hay opciones en los menús para crear las etiquetas correspondientes, por lo que hay que que utilizar la vista Estructura o editar el código fuente para incorporar hojas de estilo alternativas a una página web.

El primer paso sería enlazar todas las hojas de estilo (en Amaya se aplica la última añadida).

Si se quiere definir la hoja de estilo alternativa editando el código fuente, habría que abrir la vista de código fuente (menú Ver > Código fuente) ...

... y modificar los enlaces <link /> añadiendo los atributos title:

Una vez definida las hojas de estilo alternativas, puede comprobarse en Firefox su correcto funcionamiento:

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.