Estilos HTML y CSS

Diseño de páginas web
Estilos HTML y CSS
Ricardo Esteban Alonso
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.
Páginas web
Estilos HTML y CSS
12.-1
Estilos CSS (1)
n
Fig. 1
n
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
Páginas web
Estilos HTML y CSS
12.-2
Estilos CSS (2)
n
n
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
Páginas web
Fig. 4
Estilos HTML y CSS
12.-3
Estilos CSS (3)
n
n
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
veremos los estilos definidos hasta el
momento en nuestra hoja (Fig. 6)
Fig. 5
Fig. 6
Páginas web
Estilos HTML y CSS
12.-4
Estilos CSS (4)
n
n
n
Páginas web
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
Estilos CSS (5)
n
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.
Páginas web
Estilos HTML y CSS
12.-6
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.
Páginas web
Estilos HTML y CSS
12.-7
Estilos CSS (7)
n
n
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
Páginas web
Estilos HTML y CSS
12.-8