1.- Estilos CSS (I).
Los Estilos en cascada, estilos css, nos permiten controlar los parámetros de estilo para todos los documentos que forman un sitio web. Esto es así cuando los estilos css los definimos en una hoja externa, por otro lado, la forma más rentable de trabajar esta herramienta. Por ejemplo el Tutorial Dreamweaver MX de iniciación al editor, estaba controlado por una hoja de estilos que definía una serie de valores de color, forma, tamaño, para unas cuantas de las palabras y textos empleados en el sitio. Definir así los estilos de un sitio le da una coherencia y sensación de unidad que, de otro modo, es difícil de conseguir. Por otro lado, si un estilo no nos gusta una vez ya realizado todo el sitio, bastará modificar el estilo concreto en esa hoja, para que se modifique en todos los documentos que formen el sitio y que estén vinculados con esa hoja de estilos.
Para crear una hoja de estilos css, teniendo abierto cualquier documento del sitio, le damos a Ventana > Estilos CSS
En la columna de la derecha se abrirá:
Ahora pincharemos en el icono
de 
y aparecerá la siguiente
ventana:
En esta ventana podemos darle un nombre al estilo que vamos a crear (por defecto el programa le da el nombre .unnamed1).
Podemos elegir si lo que queremos es definir un estilo personal, o bien, redefinir una de las etiquetas del lenguaje HTML. (Más adelante explicaremos la tercera opción: Usar selector CSS).
Por último podemos definir el estilo en una hoja externa o bien, que se aplique únicamente al documento en el que estamos trabajando.
Vamos a empezar trabajando los valores que están elegidos por defecto:
Cambiamos el .unnamed1 por .palabrasclave (si no ponemos el punto al comienzo, Dreamweaver lo hará por nosotros) y, sin más, le damos a Aceptar. Aparecerá la siguiente ventana:
En esta ventana nos aparece la carpeta raíz del sitio, en este caso, la carpeta para este sitio de ejemplo que he llamado webDreamMXcurso . Le daremos un nombre en Nombre de archivo (por ejemplo hoja1) y pulsaremos Guardar:
Se abrirá la siguiente ventana para que definamos el estilo:
Por ejemplo:
Y le damos a Aceptar
Podemos observar la inclusión del estilo que acabamos de definir:
Y, por otro lado, vemos la hoja de estilos dentro de los archivos del sitio:
Si hacemos doble clic sobre el icono 
veremos los estilos definidos en nuestra hoja:
Volvemos a nuestro documento para aplicar nuestro
estilo: Seleccionaremos la palabra a la que se lo queramos aplicar, abriremos
de nuevo (o vamos directamente a 
) los Estilos CSS desde Ventana
> Estilos CSS y haremos clic en el estilo
palabrasclave.
El texto seleccionado pasará a estar escrito con los parámetros definidos.
Si una vez definido el estilo, no nos gusta, podemos
modificarlo haciendo doble clic en el estilo correspondiente 
.
Para definir otro estilo, dentro de la ventana
le damos al icono
y se abrirá la ventana Nuevo estilo. Le ponemos un nombre, por ejemplo,
.texto1 y lo definimos
Esta es la definición que he hecho:
Este estilo lo quiero aplicar a todos los párrafos
que escriba en los documentos. Para hacerlo bastará colocar el cursor
en el inicio del párrafo y hacer clic sobre el estilo 
.
Observa que, si dentro del párrafo, hay una palabra ya definida como
palabraclave el estilo de ésta no
se va a modificar. Un estilo prevalece sobre el otro.
Para acabar este apartado, defino otro estilo para los títulos de los apartados y lo aplico. Nuestra hoja tiene, ahora, estos tres estilos definidos:
 |