PDF de programación - Hojas de estilo CSS - Macromedia Dreamweaver

Macromedia Dreamweaver

1-18

Hojas de estilo CSS





Hojas de estilo CSS

A la hora de dar formato al contenido de nuestras páginas echamos de menos
algunas cosillas. Por ejemplo ¿si quiero establecer un determinado interlineado? o
¿una sangría de primera línea?... vamos, herramientas que estamos acostumbrados
a utilizar en un tratamiento de textos. El lenguaje HTML se queda corto a la hora de
ofrecernos la posibilidad de aplicar según que formatos a elementos de nuestra
página.

Aquí entran las llamadas "Hojas de estilo en cascada (CSS)". Este
complemento nos va a ofrecer multitud de posibilidades a la hora de mejorar el
aspecto de nuestra página. Además de posibilitarnos la utilización de formatos y
características que no disponíamos anteriormente, nos facilita la aplicación y, sobre
todo la modificación de dichos formatos en diferentes zonas de la página o del sitio
Web.

Lo primero, entendemos por "Estilo" un conjunto de formatos que podremos
aplicar a:

Una etiqueta. Todos los elementos de nuestra página o sitio web

contenidos en dicha etiqueta adoptarán los formatos aplicados a ella.

Una zona de nuestra página. Seleccionaremos la zona de nuestra
página que nos interese y le aplicaremos el estilo definido. Por lo tanto, ya
no dependemos de etiquetas.

Vínculos. Podemos definir estilos que afectarán exclusivamente a los

diferentes enlaces incluidos en nuestra página o en nuestro sitio Web.

Otra posibilidad es la de crear un archivo de hoja de estilos que podremos
utilizar en las diferentes páginas de nuestro sitio. Esto nos facilitará muchísimo la
realización de cambios en cuanto al formato de las diferentes páginas.

Macromedia Dreamweaver

2-18

Hojas de estilo CSS





Creación de estilos

Imagina que nos interesa que todos los párrafos de nuestra página (elementos
contenidos en la etiqueta <P>) tengan una serie de características. Tal y como
sabemos hacerlo tendríamos que ir seleccionando uno por uno y aplicando los
formatos que nos interesen, con la limitación que conlleva.

Pues bien, vamos a crear un estilo que contenga una serie de formatos y que
afectarán a dichos elementos de nuestra página.

Para la prueba, copia el contenido del siguiente archivo en un nuevo documento
de Dreamweaver. A cada una de las cabeceras de los diferentes bloques les das
formato de "Encabezado 3" (esto es para diferenciarlas de los párrafos). Guarda la
página.

Archivo para el ejemplo

Los pasos a seguir para la creación de un estilo son...

1. Selecciona la opción del menú "Texto/Estilos CSS/Nuevo".



En la opción "Tipo de selector" seleccionaremos "Etiqueta". Si te fijas en la
explicación es justo lo que queremos, definir el nuevo aspecto de una etiqueta
específica. Dicha etiqueta, hemos quedado que va a ser <P>, ya que deberá
afectar a los diferentes párrafos de nuestra página.

En cuanto a la opción "Definir en...", de momento queremos que, únicamente
afecte a la página en la que estamos. Por lo tanto elegiremos "Sólo este
documento".

Una vez seleccionadas las opciones que nos interesan, ya podemos pulsar el
botón "Aceptar". En la siguiente lección te comento los diferentes formatos que
podemos utilizar.

Macromedia Dreamweaver

3-18

Hojas de estilo CSS





Elección de formatos

Una vez hemos determinado la etiqueta a la que va a afectar nuestro estilo,
vamos a elegir los formatos que lo compondrán. Observarás que se muestra una
ventana con multitud de formatos organizados por categorías. La primera de ellas
es "Tipo".



Aquí podemos establecer diferentes atributos que afectarán a la fuente (tipo de
letra, tamaño, color...) y, si te fijas, también podemos determinar el interlineado
desde la opción "Alto de línea".

Para nuestro ejemplo, elige los atributos de texto que prefieras y, vamos a
aplicar un doble espacio entre líneas para nuestros párrafos. Para ello introduce el
número 2 en la casilla "Alto de línea" y elige como unidad de medida "ems". Esta
unidad equivale a la altura de la fuente que viene a ser lo mismo que la distancia
entre líneas.

No pulses todavía el botón "Aceptar" ya que vamos a continuar con la elección
de formatos para nuestro estilo.

Macromedia Dreamweaver

4-18

Hojas de estilo CSS





Elección de formatos (Fondo)

Si pulsas sobre la categoría "Fondo" se mostrará la siguiente ventana...



En esta ventana podemos establecer el aspecto que tendrá el fondo de los
elementos incluidos en la etiqueta seleccionada. En nuestro caso, el fondo de los
párrafos.

Podemos establecer un color de fondo o mostrar una imagen que podrá
repetirse o no y en caso de no repetirse, se nos da la posibilidad de determinar su
posición. Para probar, guarda la siguiente imagen en la carpeta que contiene los
archivos pertenecientes al sitio que definimos.



Haremos que esta imagen se coloque, como fondo, en la parte superior derecha
de cada párrafo. Selecciona la imagen guardada en la opción "Imagen de fondo",
en la opción "Repetir" elegiremos "No repetir", en la posición horizontal,
"Derecha" y, en la posición vertical "Superior". Vamos a seguir eligiendo formatos
y... ya veremos como queda.

Macromedia Dreamweaver

5-18

Hojas de estilo CSS





Elección de formatos (Bloque)

Desde esta categoría podemos modificar alineaciones (tanto verticales como
horizontales), espacio entre letras y palabras y establecer sangrías de
primera línea (espacio desde el margen al comienzo de la primera línea de cada
párrafo).

Como estamos probando la utilización de estilos, vamos a seleccionar como
alineamiento de texto, justificar y como sangría de texto 15 px.



Macromedia Dreamweaver

6-18

Hojas de estilo CSS





Elección de formatos (Cuadro)



Las opciones de esta categoría nos van a permitir establecer anchura y altura de
según que elementos de nuestra página y el espacio entre el elemento y sus bordes
o entre el elemento y los bordes de la ventana.

Como después vamos a hacer que se muestren los bordes alrededor de cada
párrafo, vamos a aumentar la distancia desde dichos bordes hasta el texto. En la
opción "Sup" del apartado "Relleno", escribe, por ejemplo, 15 y, como unidad de
medida, lo dejaremos en píxeles. deja activada la casilla "Igual para todo" para
que dicha distancia afecte a todos los lados del párrafo.

Macromedia Dreamweaver

7-18

Hojas de estilo CSS





Elección de formatos (borde)



Aquí podemos determinar si queremos que se muestren determinados bordes
alrededor del elemento seleccionado, su estilo, grosor y color.

¡Es obligatorio elegir el estilo para que se muestren los bordes del

elemento!

Para probar, selecciona un estilo (sólido, por ejemplo) un grosor y un color y
deja la casilla "Igual para todo" activada. De esta manera dibujará todo el
contorno de cada párrafo.

Pulsa el botón "Aceptar" y carga la página en el navegador para ver como
queda. En teoría, con los formatos aplicados, los párrafos de la página deberían
quedar, más o menos, así...

Macromedia Dreamweaver

8-18

Hojas de estilo CSS







Elección de formatos (lista)

Ya comentamos que podemos colocar a la izquierda de cada párrafo un número
o una viñeta. En esta categoría de formatos se nos da la posibilidad de utilizar más
tipos de viñetas e incluso sustituir dichas viñetas por una imagen.



Ejemplo

Lista con viñetas



Macromedia Dreamweaver

9-18

Hojas de estilo CSS





Lista con estilo aplicado a la etiqueta <LI>



Ahora que pienso, en el ejemoplo anterior te he puesto "Lista con estilo aplicado
a la etiqueta <LI>" ¿cómo sé a qué etiqueta he de aplicar un determinado
estilo? Si tengo que aplicar un estilo a los elementos de una lista, a una tabla, a un
elemento de formulario, a una imagen... No tenemos por qué conocer todas las
etiquetas HTML. Bueeenooo... en este caso, por ejemplo, si me sitúo en uno de los
elementos de la lista y me fijo en la parte inferior de la ventana del documento, me
doy cuenta de que se muestra la etiqueta HTML correspondiente al elemento en el
que me encuentro.

Pues eso, ya podemos conocer qué etiqueta se corresponde con cada elemento
de nuestra página.



Macromedia Dreamweaver

10-18

Hojas de estilo CSS





Edición de estilos

Una vez creado un estilo, podemos hacer modificaciones en él variando
cualquiera de los formatos que lo componen. Para editar un estilo y modificarlo,
muestra la ventana "Estilos CSS".

En ella aparecen los estilos creados y las propiedades de cada uno de ellos.
Puedes hacer modificaciones directamente en esta ventana, haciendo un clic en la
propiedad que desees modificar pero... te recomiendo que hagas doble clic en el
estilo, vuelve a mostrarse la ventana con las categorías y formatos. Por ejemplo,
haz doble clic en el estilo asignado a la etiqueta P.



Macromedia Dreamweaver

11-18

Hojas de estilo CSS





Modifica, para probar, el color del texto...

Pulsa el botón "Aceptar" y observa como cambia el aspecto de los párrafos.
Date cuenta de que la utilización de estilos, además de ofrecernos más
posibilidades en cuanto a la utilización de formatos y de facilitarnos el cambio de
aspecto de diferentes elementos de nuestra página, hace mucho más cómoda la
modificación de formatos ya aplicados.



Macromedia Dreamweaver

12-18

Hojas de estilo CSS







Estilos para los enlaces