Estilos CSS
Aplicar formato a párrafos y textos mediante hojas de estilo CSS.
Las hojas de estilo CSS cumplen una función similar al comando "Estilo" que usamos en Word para dar formato predefinido a textos y párrafos rápidamente sin necesidad de volver a realizar manualmente todos los pasos de formato.
¿Para qué sirve? Imagine que usted ha terminado su Sitio el cual cuenta con 50 páginas, dentro de las cuales usted configuró los títulos con letra tipo Arial, color rojo y tamaño 14, pero usted se dio cuenta a última hora, que hubiera sido mejor haber definido letra tipo Verdana, color azul y tamaño 12. ¿Que tendría que hacer normalmente? Gastar por lo menos una cinco horas de su valioso tiempo editando título por título.
Usando las hojas de estilo CSS el proceso de edición anterior puede reducirse a 30 segundos! ¿Cómo? Es sencillo: En lugar de guardar el formato del párrafo (fuente, color, alineación, etc.) dentro de la misma página, usted puede guardarla en un archivo INDEPENDIENTE, bajo un nombre descriptivo que le permita recuperar o aplicar esta configuración a cualquier párrafo, en cualquier página.
tome una hoja en blanco y escriba allí el formato que desea aplicar a los párrafos principales de su página. Por ejemplo:
Todos los títulos deben ser: Arial, tamaño 13, Negrilla, color verde, subrayado.
Todos los subtítulos deben ser: Times New Roman, tamaño 10, cursiva, color negro.
Todos los parrafos de texto deben ser: Verdana, tamaño 10, normal, color negro.
Cada tipo de formato se llama "Clase" (CLASS en inglés). La hoja en blanco representa el archivo "estilos.css" que usted deberá crear y guardar junto con los archivos HTML que usted ha creado en anteriores actividades.
Ahora, ¿Cómo hacer que el archivo HTML vaya a este archivo, lea la configuración del formato, y luego lo aplique a un párrafo específico? ¡Es muy fácil!
Para crear la hoja de estilo CSS realice cuidadosamente el siguiente procedimiento:
1. Abra el archivo index.html. Si no se ve las lineas de división entre los marcos, hágalas visibles utilizando la siguiente secuencia: Ver; Ayudas visuales; Bordes de marco.
2. Si no está visible el pánel "Estilos CSS", actívelo a través del menú: Ventana; Estilos CSS.
3. Dentro del pánel aparece el texto "No hay estilo CSS". Dé clic derecho sobre el y seleccione "Nuevo estilo CSS" (También puede hacerlo dando clic sobre el pequeño ícono que aparece en el borde inferior del pánel, el cual tiene el signo "+").
4. En la casilla "Nombre" escriba ".titulo" (no olvide incluir el punto inicial). Asegúrese de que esté seleccionado "Crear estiilo personal (clase). En "Definir en" seleccione: "Nuevo archivo de hoja de estilos". Dé clic en "Aceptar". Asigne el nombre "estilos.css" a la hoja de estilo. Presione el botón "Aceptar" para continuar. Aparecerá una ventana donde usted deberá incorporar el formato deseado. Asegúrese que esté seleccionada la categoría "tipo" y asigne allí la fuente, tamaño, grosor, color y decoración deseados para todos sus títulos. Por ahora no defina más atributos, para evitar confusiones. Presione el botón "Aceptar". Note que el archivo "estilos.css" ha sido creado y que en el pánel se muestra el nuevo estilo que ha sido creado dentro de él bajo el nombre "titulo".
5. Para aplicar el estilo a un texto cualquiera simplemente selecciónelo con el mouse y luego dé clic sobre la palabra "titulo". Notará que el formato definido es aplicado al texto.
6. Para crear más estilos dentro de su archivo "estilos.css" realice de nuevo el procedimiento explicado en el paso 4, asignando nuevos nombres según el formato que desea crear. Por ejemplo: ".subtitulo", ".texto", etc. Una vez creados, estos aparecerán junto con el estilo "titulo" dentro del pánel "Estilos CSS". Podrá aplicarlos seleccionando cualquier texto y dando clic sobre el estilo deseado.
Nota: Tenga en cuenta no asignar nombres con tildes o letras especiales tal como la "ñ".
Realice este procedimiento en todas sus páginas, de tal manera que en el futuro pueda cambiar la apariencia de su Sitio desde este único archivo.
Para EDITAR un estilo, símplemente dé doble clic sobre él desde el pánel "Estilos CSS".
7. Las hojas de estilo permiten predefinir mucho más de lo visto aquí.
8. Para insertar los estilos en todas las páginas de su sitio, debe abrir cada una de ellas y dentro del panel estilo, aparece el boton "Adjuntar hoja de estilos". En "examinar", busca el estilo creado y lo vincula a esa página.
Mayor información sobre este tema está disponible en la AYUDA de Dreamweaver.
Buena Suerte!!
