hecho con NvuCreación de Páginas Web con Nvu/KompoZer
Página de inicio                                                                                                                                                                  Curso de Formación TIC 2007-2008

HOJAS DE ESTILO

1. Introducción

Vamos a ver qué son las hojas de estilos y cómo usarlas para dotar a los documentos que creemos de una apariencia personalizada. Es importante que sepamos que para poder sacarles todo el partido posible a las hojas de estilos, tenemos que tener ciertos conocimientos del lenguaje HTML. Así que no está de más tener a mano un manual básico de HTML.

Una hoja de estilos o CSS ("Cascade Style Sheet"), es un conjunto de reglas y características que, aplicadas a una página web o a un conjunto de ellas, pueden modificar su apariencia. De esta forma, podemos separar en cierta forma el diseño de la página de su contenido. Gracias a las hojas de estilos podemos de alguna manera homogeneizar y automatizar el trabajo que supone el diseño de una Web. Podemos definir un estilo para los títulos y otro para el texto, de forma que no tengamos que modificar cada vez el texto y los títulos para que tengan la apariencia que queramos.

Una hoja de estilos puede estar contenida en la misma página donde se utiliza o puede estar definida en un archivo aparte. De la segunda forma, podemos definir estilos para todo el sitio web, mientras que de la primera tendremos que escribir el mismo código en cada página cada vez que lo necesitemos. Por eso la primera se utiliza cuando se quiere aplicar algún efecto en particular y la segunda cuando ese efecto es el mismo para todas las páginas. Existe una tercera posibilidad, y es especificar el estilo en la propia etiqueta HTML dónde queramos usarlo, con lo que el efecto sólo se producirá en ese lugar. Esto implica conocer código HTML y las propiedades que queramos cambiar. Esto tendríamos que repetirlo para cada elemento del texto cuyo estilo deseamos cambiar. Por ello, al ser poco eficiente, se usa la primera forma o la segunda, antes mencionadas. Estas formas también requieren conocer HTML.

Por ello NVU / KompoZer nos facilita el uso de estilos por medio de las plantillas, que nos permite usar hojas de estilo con pocos conocimientos de HTML.

2. Usar hojas de estilo en cascada

NVU / 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: a) Modo para principiantes: este modo permite crear reglas asociadas a selectores de clase o selectores de tipo de elemento; Modo avanzado: este modo permite crear reglas sin restricciones. En caso de que no haya hoja de estilo, se creará una nueva automáticamente.

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 en Nvu:
  • Haga clic en el botón de elemento <style>.


De forma opcional, se puede rellenar la información sobre Lista de medios y Título de la hoja de estilo. Finalmente, debmos hacer clic en Crear hoja de estilo.



Para crear una hoja de estilo externa en Nvu:
  • Haga clic en el botón de elemento <link>.


  • Escriba la URL de la hoja de estilo en el panel de la derecha. Si no existe ya, se creará un nuevo fichero en el sistema de archivos local. De forma opcional, rellenamos la información sobre Lista de medios y Título de la hoja de estilo. Activamos también comprobar al crear una hoja de estilo alternativa si ésta es una alternativa. Podemos aconsejar que siempre se archive el documento html antes de agregar una hoja de estilo local; guarde también el documento inmediatamente antes de cerrar el editor CSS. Finalmente, podemos utilizarutilice 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:
    • estilo con nombre (introduzca abajo el nombre de la clase)
    • estilo aplicado a todos los elementos del tipo (introduzca el tipo abajo)
    • estilo aplicado a todos los elementos coincidentes con este selector
  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.

4. Ejercicio práctico

Vamos a asignar a continuación una hoja de estilos a una página Web que vamos a crear a modo de ejemplo, para poner en práctica lo que hemos aprendido en este capítulo. En primer lugar creamos una página web cualquiera como la del ejemplo que se muestra en la parte superior, a continuación la guardamos en nuestra carpeta “cursoweb”, que es donde estamos guardando todas las actividades del curso, con el nombre “index.html”.

A continuación crearemos nuestra hoja de estilos, para ello desplegaremos el menú Herramientas --> Editor CSS en un documento vacío, tal como hemos descrito con anterioridad. Haremos clic en el botón <Style> y le damos nombre al Título por ejemplo “regla” y luego pulsaremos en el botón Crear hoja de estilo (así se crea una hoja de estilo interna). Ahora podemos poner los estilos que queramos utilizando el botón Regla (le damos el nombre body). Le asignamos los estilos propios, le cambiamos el color al fondo...

En Texto elegiremos la letra personal Book Antiqua, de tamaño 12 px y alineación Justificada, como se muestra en la imagen siguiente.



En Fondo seleccionamos el botón color y en la pantalla de selección de color de fondo, una tonalidad azulada, tal como se indica.



En Bordes, seleccionamos una anchura de 10px y una tonalidad negra de los mismos.

En Caja seleccionamos Position relative y Anchura de 500 px



En su conjunto todas estas operaciones quedan reflejadas en la pestaña General así.


Una vez seleccionadas las opciones elegidas, marcamos con el ratón en la ventana de la izquierda “hoja de estilos interna” y haremos clic en el botón Exportar hoja de estilo y cambiar a la versión exportada.



Le asignaremos el nombre al archivo “hojaestilos.css” (¡¡¡Ojo!!!, hay que ponerle la extensión css al archivo).



Ahora lo único que nos queda es enlazar la página “index.html” con la hoja de estilos que acabamos de crear “hojaestilos.css”; para ello abriremos en NVU el index.html y desplegaremos del menú Herramientas >> Editor CSS y en la ventana que se abre haremos clic en <link> y elegimos el archivo que queremos enlazar, en nuestro caso la hoja de estilos.



En este caso, en NVU aparece la ruta absoluta file:///C:/Documents%20and%20Settings/LARA/Desktop/ nvumanual/hojaestilos.css. Para que se quede hojaestilo.css en el proceso de carga del archivo le tendremos que borrar la ruta y quedarnos con el nombre del archivo únicamente. Por último haremos clic en Crear hoja de estilo.



Pues ya tenemos hecho casi todo el trabajo, para aplicar nuestra hoja de estilo, seleccionamos el texto de la Web al que se lo queramos aplicar y elegir la body a asignar.



El resultado finala ha sido el siguiente en el texto seleccionado y según los procesos realizados:



[ir arriba]
José Manual Lara Fuillerat - 2008 - I.E.S. Carbula (Almodóvar del Río, Córdoba)