| Grupo de Apoyo a la Teleenseñanza |  |
|
 |
||
|
Desarrollo web » Aspectos avanzados » CSS
Las hojas de estilo CSS son documentos de texto donde se indica el color, tamaño, etc.. del texto, tablas, y otros elementos HTML para modificar sus propiedades de forma unificada. Es una forma de dar un mismo valor a las propiedades de algunas etiquetas HTML. Los documentos CSS nos permiten distribuir las propiedades comunes en "clases" de manera que posteriormente en nuestro fichero HTML indiquemos que una etiqueta es de una "clase" determinada.
No queremos entrar en demasiados detalles, en este apartado explicaremos cómo crear estilos CSS desde el editor de hojas de estilo de NVU. NVU es un editor visual de páginas web gratuito continuación del antiguo Netscape Composer. Este editor permite también crear una hoja de estilos de forma sencilla. Tendremos que seleccionar la opción del menú Tools > CSS Editor. Aparecerá la ventana de creación de Hojas de Estilo.
Pulsando en el botón Style elt. nos aparecerá las opciones para darle un título a la hoja de estilos y poder crearla mediante el botón Create Stylesheet (Crear Hoja de Estilos). Daremos una descripción en el campo Title, una vez hemos pulsado en el botón de Crear Hoja de Estilos tendremos la opción de editar creando nuevos estilos pulsando sobre el botón Rule (Regla).
Podremos entonces dar nombre a la nueva "clase" con la que podremos unificar todas las propiedades, o redefinir una clase ya constituida como por ejemplo los enlaces o links, pudiendo redefinir su aspecto por defecto.
Podemos ahora indicar las propiedades para esta regla, como formato de fuente (tipo de letra, color, opciones de subrayado, etc..), indicar tipos de borde y decoración (para las tablas y marcos), fondo (para poner un color de fondo o una imagen en tablas y marcos), y otras propiedades.
Una vez pulsamos en Close (Cerrar) para quitar el cuadro de edición de Hojas de Estilo podríamos por ejemplo escribir el texto de una página web y darle un formato único indicando a qué "clase" de los estilos creados queremos que se adapte, para esto deberíamos escribir el siguiente código HTML: <font class="claseprueba">prueba de texto</font> También podríamos crear enlaces a páginas web indicando esa clase para que tengan el aspecto que queramos, tablas, etc...
Si no decimos nada, NVU creará la hoja de estilos CONTENIDA dentro del fichero HTML, si visualizamos el código generado podemos ver cómo se ha indicado nuestras reglas de estilo dentro de el documento HTML... <head> <title>prueba</title> <style title="Hoja de estilos de prueba" type="text/css"> .claseprueba { font-family: Times New Roman,Times,serif; font-size: 20px; color: rgb(153, 153, 0); font-weight: bold; font-style: normal; text-decoration: underline overline; } </style> </head> Vemos que en la cabecera del documento ha introducido una nueva sección encerrada entre las etiquetas <style></style> y dentro contiene la declaración de nuestra clase. La desventaja de definir los estilos dentro del documento HTML es que no se puede reutilizar esos estilos en otros documentos y se tendrían que copiar toda la declaración de estilos en cada uno de los documentos que hagamos. Otra solución es crear un documento de hoja de estilos aparte con la extensión .css que también podemos hacerlo desde el editor de NVU. Si volvemos a abrir el editor de Hojas de Estilo, seleccionamos nuestra hoja de estilo y pulsamos sobre el botón Export stylesheet and switch to exported version (Exportar hoja de estilo y cambiar a la versión exportada). Nos aparecerá un cuadro de diálogo para guardar nuestro fichero .css que guardaremos junto a nuestro documento HTML. NVU automáticamente enlazará a esta hoja de estilos en vez de a los estilos contenidos dentro del documento.
Ahora las reglas estarán definidas en el fichero .css, podremos ahora crear nuevas páginas web y enlazarlas a esta hoja de estilos desde el editor de Hojas de Estilo de NVU pulsando sobre el botón Link elt. (Enlazar estilo) o introduciendo el siguiente código HTML en la cabecera de nuestra página... <link href="estilo.css" rel="stylesheet" type="text/css">
|
