Usar hojas de estilo en cascada

KompoZer dispone de un editor de hojas de estilo denominado CaScadeS (CSS, Cascade Style Sheets). CaScadeS puede ser utilizado para producir tanto hojas de estilo internas como externas. A diferencia de los estilos incrustados, las hojas de estilo internas o externas ayudan a mantener separadas la información del contenido de la del estilo.CaScadeS permite dos modos de edición de hojas de estilo:

Para proporcionar estilo al documento html que se edita, CaScadeS puede iniciarse haciendo clic en el menú Herramientas y seleccionando Editor CSS, apareciendo la siguiente ventana a continuación.

En KompoZer contamos con un botón específico para activar la Hoja de estilos CSS, se trata del icono CasCadeS:

Para crear una hoja de estilo interna:

  1. Dejaremos por defecto la opción URL(ninguna, incrustado en el documento.
    1. (Opcional) Rellenaremos la información sobre Lista de medios y Título de la hoja de estilo.
  2. Haremos clic en Crear hoja de estilo.

 

Para crear una hoja de estilo externa:

1. Pulsamos el icono Exportar hoja de estilos y cambiar a la versión exportada:

2. Seleccionamos el fichero en cuestión, Si no existe ya, se creará un nuevo fichero en el sistema de archivos local. Es recomendable, al guardarlo, asignarle el nombre completo (nombre.css)

o (Opcional) Rellenaremos la información sobre Lista de medios y Título de la hoja de estilo.

3. Activaremos comprobar al crear una hoja de estilo alternativa si ésta es una alternativa.

 

Consejo: guardaremos siempre el documento html antes de agregar una hoja de estilo local. Guardaremos también el documento inmediatamente antes de cerrar el editor CSS.

Consejo: utilizaremos el botón Recargar del panel de la izquierda si la hoja de estilo no se descarga inmediatamente. 3.

Crear reglas de estilo

Después de crear una o más hojas de estilo para el documento html, se pueden crear reglas para cada hoja de estilo de forma individual. Para usar una hoja de estilos concreta al crear o modificar reglas, selecciónela en el panel de la izquierda haciendo clic sobre ella con el botón izquierdo del ratón. El panel de la derecha mostrará entonces los detalles de la hoja de estilo en la pestaña General. Para crear reglas nuevas:

  1. Haremos clic en el botón Regla del panel de la izquierda.
  2. El panel de la derecha mostrará opciones para especificar el tipo de regla a crear. Elegiremos una entre las siguientes:
  3. Rellenaremos el nombre de la regla.
  4. Haremos clic en Crear regla de estilo.

En la parte derecha de esta pantalla de Hoja de estilos CSS, aparerá el elemento creado con el proceso anteriormente descrito.

Las reglas pueden ser definidas usando las pestañas de estilo (Texto, Fondo, Bordes, Caja, Aural) del panel de la derecha. Para ver todas las definiciones de una regla de estilo, seleccionaremos en el panel de la izquierda y haremos clic en la pestaña General del panel de la derecha. La pestaña General mostrará todas las definiciones aplicadas a la regla.