Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Estilos CSS
(Hojas de Estilo en Cascada)
ESTILOS CSS
Una de las opciones más interesantes que posee la herramienta Dreamweaver
CS3 son los Estilos CSS (Hojas de Estilo en Cascada), que nos permite crear
formatos que controlan de una forma flexible los contenidos de una página Web
(texto, imágenes, formato de la página, listas, bloques, entre otros).
Por medio de los CSS podemos combinar atributos de color, de tamaño, de tipos
de fuente, o de fondo; buscando la forma de no repetir asignaciones de estos
atributos.
La ventaja de la utilización de CSS, es que permite una actualización automática
en el documento de los cambios que se generen en ellos.
La desventaja de los estilos es que algunos navegadores antiguos no pueden
soportarlos y a veces los ignoran, aunque esto puede ocurrir solo en casos
contados.
Nota: Para evitar que ocurra un conflicto en los CSS creados, evite aplicar dos
estilos deferentes a un mismo texto.
Crear Estilo CSS Nuevo:
1. En la barra de Menú en la opción Texto, seleccione Estilos CSS y luego
de click en la opción Nuevo…
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
2. Aparecerá el cuadro de diálogo Nuevo Estilo CSS.
Defina el tipo de estilo CSS que desea crear:
• Seleccione Clase (puede aplicarse a cualquier etiqueta) y escriba el nombre
del estilo en el cuadro de texto Nombre (Ejemplo: .miestilo)
Nota: los nombres de clase deben comenzar por un punto (.) y pueden
contener cualquier combinación alfanumérica (por ejemplo .myhead1). Si no
introduce el punto inicial, Dreamweaver lo hará de forma automática.
• Para incrustar el estilo en el documento actual, donde dice Definir en,
seleccione Sólo este documento.
3. De click en el botón Aceptar. Aparecerá el cuadro de diálogo Definición de
Estilos.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
4. Seleccione las opciones de estilo que desea establecer para el estilo CSS
nuevo como tipo fuente, tamaño, color, etc. y haga clic en el botón Aceptar.
Aplicar un Estilo CSS:
Nota: Antes de aplicar los Estilos CSS, se recomienda digitar primero todo el texto
que estará en la página.
Para aplicarle a un texto un Estilo CSS creado previamente debe hacer lo
siguiente:
1. Seleccione el texto al que desea aplicarle el estilo
2. En el inspector de propiedades, en el cuadro de texto Estilo, seleccione el
nombre del estilo.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Le aparecerá en la página el texto con el estilo que ha seleccionado.
Nota: El procedimiento anterior lo debe realizar para aplicarle un estilo a cada
uno de los textos que se encuentran en la página.
Modificar el Nombre de un Estilo CSS:
Para modificar el nombre de un Estilo CSS, en el panel de archivos en la Ventana
Estilos CSS, seleccione el nombre del estilo que desea modificar, de click derecho
y seleccione la opción Cambiar nombre de clase
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Aparecerá el cuadro de diálogo Cambiar nombre de clase, en el cual se encuentra
seleccionado el nombre del estilo que va a cambiar
En el cuadro de texto Nuevo nombre, digite el nombre que desea asignarle al estilo
y de click en el botón Aceptar.
Modificar las Propiedades de un Estilo CSS:
Para modificar las propiedades de un Estilo CSS como tipo de fuente, color,
tamaño, etc, en el panel de archivos en la Ventana Estilos CSS, seleccione el
nombre del estilo que desea modificar, de click derecho y seleccione la opción
Editar
Aparecerá el cuadro de diálogo Definición de regla, en el cual se encuentran las
propiedades actuales del estilo.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Modifique las propiedades que desee y por último de click en el botón Aplicar y
luego de click en el botón Aceptar.
Para la realización de este documento, se tomó como referencia el “Manual
Adobe Dreamweaver CS3” de la empresa Adobe y el Sitio Web
http://www.aulaclic.es/dreamweavercs3/index.htm.
CS3 son los Estilos CSS (Hojas de Estilo en Cascada), que nos permite crear
formatos que controlan de una forma flexible los contenidos de una página Web
(texto, imágenes, formato de la página, listas, bloques, entre otros).
Por medio de los CSS podemos combinar atributos de color, de tamaño, de tipos
de fuente, o de fondo; buscando la forma de no repetir asignaciones de estos
atributos.
La ventaja de la utilización de CSS, es que permite una actualización automática
en el documento de los cambios que se generen en ellos.
La desventaja de los estilos es que algunos navegadores antiguos no pueden
soportarlos y a veces los ignoran, aunque esto puede ocurrir solo en casos
contados.
Nota: Para evitar que ocurra un conflicto en los CSS creados, evite aplicar dos
estilos deferentes a un mismo texto.
Crear Estilo CSS Nuevo:
1. En la barra de Menú en la opción Texto, seleccione Estilos CSS y luego
de click en la opción Nuevo…
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
2. Aparecerá el cuadro de diálogo Nuevo Estilo CSS.
Defina el tipo de estilo CSS que desea crear:
• Seleccione Clase (puede aplicarse a cualquier etiqueta) y escriba el nombre
del estilo en el cuadro de texto Nombre (Ejemplo: .miestilo)
Nota: los nombres de clase deben comenzar por un punto (.) y pueden
contener cualquier combinación alfanumérica (por ejemplo .myhead1). Si no
introduce el punto inicial, Dreamweaver lo hará de forma automática.
• Para incrustar el estilo en el documento actual, donde dice Definir en,
seleccione Sólo este documento.
3. De click en el botón Aceptar. Aparecerá el cuadro de diálogo Definición de
Estilos.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
4. Seleccione las opciones de estilo que desea establecer para el estilo CSS
nuevo como tipo fuente, tamaño, color, etc. y haga clic en el botón Aceptar.
Aplicar un Estilo CSS:
Nota: Antes de aplicar los Estilos CSS, se recomienda digitar primero todo el texto
que estará en la página.
Para aplicarle a un texto un Estilo CSS creado previamente debe hacer lo
siguiente:
1. Seleccione el texto al que desea aplicarle el estilo
2. En el inspector de propiedades, en el cuadro de texto Estilo, seleccione el
nombre del estilo.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Le aparecerá en la página el texto con el estilo que ha seleccionado.
Nota: El procedimiento anterior lo debe realizar para aplicarle un estilo a cada
uno de los textos que se encuentran en la página.
Modificar el Nombre de un Estilo CSS:
Para modificar el nombre de un Estilo CSS, en el panel de archivos en la Ventana
Estilos CSS, seleccione el nombre del estilo que desea modificar, de click derecho
y seleccione la opción Cambiar nombre de clase
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Aparecerá el cuadro de diálogo Cambiar nombre de clase, en el cual se encuentra
seleccionado el nombre del estilo que va a cambiar
En el cuadro de texto Nuevo nombre, digite el nombre que desea asignarle al estilo
y de click en el botón Aceptar.
Modificar las Propiedades de un Estilo CSS:
Para modificar las propiedades de un Estilo CSS como tipo de fuente, color,
tamaño, etc, en el panel de archivos en la Ventana Estilos CSS, seleccione el
nombre del estilo que desea modificar, de click derecho y seleccione la opción
Editar
Aparecerá el cuadro de diálogo Definición de regla, en el cual se encuentran las
propiedades actuales del estilo.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Modifique las propiedades que desee y por último de click en el botón Aplicar y
luego de click en el botón Aceptar.
Para la realización de este documento, se tomó como referencia el “Manual
Adobe Dreamweaver CS3” de la empresa Adobe y el Sitio Web
http://www.aulaclic.es/dreamweavercs3/index.htm.
No hay comentarios:
Publicar un comentario