Diseño de páginas web

Transcripción

1 Diseño de páginas web Estilos HTML y CSS Ricardo Esteban Alonso

2 Estilos HTML Un estilo define un grupo de características de texto, y están normalizados para los exploradores más utilizados. Son muy útiles cuando se utilizan dentro de una misma página las mismas características concretas como el tipo de letra, tamaño, color, etc. Las rutas a seguir: Texto > Estilos HTML, y en el submenú que aparece pulsar en uno de la lista. También : Ventana > Estilos HTML, y pulsar en el icono de Nuevo estilo. En ambos casos se llega al mismo cuadro de diálogo, Definir un nuevo estilo HTML. Estilos HTML y CSS 12.-1

3 Estilos CSS (1) Fig. 1 Los llamados estilos CSS (estilos en cascada), permiten controlar al mismo tiempo todos los documentos que forman un sitio web, en todos sus valores como el color, la forma, el tamaño, etc.,,tanto para unas palabras como para párrafos enteros. Y lo que es más importante: cuando queramos cambiar alguno de los valores de todas las páginas, en lugar de ir una a una, los estilos CSS definidos en el sitio hacen el cambio automáticamente en todo el sitio. Cuando tengamos abierto cualquier documento del sitio, podemos empezar a crearlo. Para ello se sigue la ruta: Ventana > Estilos CSS, y se abre la ventana de la fig 1. Al pulsar en el icono aparece la ventana de la fig 2. Fig. 2 Estilos HTML y CSS 12.-2

4 Estilos CSS (2) Empezaremos por asignarle un nombre al estilo que vamos a crear. Es condición indispensable mantener el. al inicio del nombre. Del Tipo seleccionamos Crear estilo person. (clase) definido en Nuevo archivo de hoja. Cambiamos el nombre a. palabras, y le damos a Aceptar, y nos aparece la ventana de la fig. 3. Le damos un nombre a la hoja: estilo1.css, y pulsamos en Guardar. A continuación se abre la ventana de la fig. 4 para definir el sitio y escribir los parámetros que queramos tenga nuestro estilo. Fig. 3 Fig. 4 Estilos HTML y CSS 12.-3

5 Estilos CSS (3) Veremos como en la ventana de nuestro sitio se ha añadido la hoja que acabamos de crear: estilo1.css (Fig. 5). Al hacer doble clic en el icono momento en nuestra hoja (Fig. 6) veremos los estilos definidos hasta el Fig. 5 Fig. 6 Estilos HTML y CSS 12.-4

6 Estilos CSS (4) Para definir otro estilo, dentro de la ventana de Estilos CSS le damos al icono y se abre la ventana de Nuevo estilo. Le ponemos otro nombre (.texto) y de nuevo lo definimos como antes, con los valores que nos interesen. Cuando queramos aplicar este estilo a todos los párrafos que escribamos en nuestros documentos, bastará colocar el cursor en el inicio del párrafo y hacer clic sobre el estilo texto. Si dentro del párrafo hay una palabra ya definida por otro estilo, no se modifica y mantiene el primer estilo asignado. Estilos HTML y CSS 12.-5

7 Estilos CSS (5) Cuando tengamos otro documento nuevo y queramos vincularlo con la hoja de estilos que ya tenemos creada, le damos a Texto > Estilos CSS > Adjuntar hoja de estilos Seleccionamos la hoja y pinchamos en el botón Seleccionar, y así la hoja estará vinculada con el nuevo documento. Estilos HTML y CSS 12.-6

8 Estilos CSS (6) Dentro de la misma hoja de estilos ya creada (estilo1.css) podemos crear nuevo estilo como Redefinir etiqueta HTML, y la ventana cambiará : si seleccionamos, por ejemplo la etiqueta <a> (que es la etiqueta de los enlaces), y pulsamos Aceptar, aparecerá la ventana de Definir el estilo. Lo hacemos y marcamos la casilla ninguna, y le damos a Aceptar. Estilos HTML y CSS 12.-7

9 Estilos CSS (7) Lo que hemos indicado al programa en la diapositiva anterior es que, aparte del tipo de fuente, del tamaño y del grosor, cuando haya un enlace, que el vínculo no esté subrayado. Lógicamente el cambio afecta a todos los documentos vinculados con esta hoja de estilos. Podemos ahora definir un efecto a este estilo: que cuando pase el puntero del ratón por el vínculo, este se subraye. Para ello pulsamos el icono ya conocido, y ahora marcamos Usar selector CSS. En Selector elegimos A:hover y damos a Aceptar. Aparecerá la ventana de Definición de estilo y marcamos subrayado y de nuevo damos a Aceptar Estilos HTML y CSS 12.-8