Unidad 4. El texto (III)


Crear un Estilo Personalizado

 

Con Dreamweaver 8, las características que apliquemos a un texto crearán automáticamente estilos CSS que se incrustarán en el documento actual y se aplicarán únicamente sobre él.

Veámoslo:

Para crear un Estilo CSS personalizado:

1. En el documento, se selecciona el texto al que se desea aplicar características concretas.

2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los atributos de la fuente y del párrafo que queramos.

 

Automáticamente Dreamweaver creará un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... según los nombres de los estilos ya creados.

Aparecerá el nombre Estilo1 en el cuadro Estilo del panel Propiedades.

También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qué tipo de texto se va a aplicar. Para ello desplegamos la lista de estilos y seleccionamos la opción Cambiar nombre... Aparecerá un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen inferior.

Seguidamente se coloca el nuevo nombre sin espacios en blanco. En este caso: miestilo.

Al aceptar, aparecerá un panel con el nombre Resultados. Cerrar esta ventana.

De esta manera se puede crear un estilo para añadirlo a un documento.

Cada nuevo estilo que se crea, se añade a la lista de estilos, y los podemos acceder también de una manera rápida a través del menú Texto, opción Estilos CSS.

En el Panel CSS se puede verificar que se ha añadido automáticamente el nuevo estilo.

 

Si lo deseas, puedes aprender más sobre el panel CSS aquí  .

 

 

Aplicar un Estilo

 

Para aplicar un Estilo CSS personalizado:

En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sitúa el punto de inserción del mouse en un párrafo para aplicar el estilo a todo el párrafo. Si seleccionas un rango de texto dentro de un párrafo, el Estilo CSS sólo afectará al rango seleccionado.

En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Estilo.

 

Para practicar puedes realizar el Ejercicio paso a paso Crear estilo de clase.

 

Hojas de Estilos

Podemos exportar estilos que se encuentren incrustados en la página HTML a una nueva hoja de estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionando Exportar.

Se abrirá el cuadro de diálogo Exportar estilos como archivo CSS que te permitirá guardar todos los estilos incrustados en un nuevo archivo CSS.

Esta opción es muy útil si tienes los estilos incrustados en una página y queremos utilizarlos en otras también. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en cualquier página que queramos utilizarlos.

 

Para asignar una hoja de estilos a una página despliega el cuadro Estilo que se encuentra en el Inspector de Propiedades y selecciona Adjuntar hoja de estilos...

Adjuntar hoja de estilos

En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos.

Elegimos si queremos Vincular o importar la hoja de estilos.

Si elegimos Vincular la hoja no se incrusta en la página sino que se añade a la página una referencia a la hoja, esto permite que cualquier cambio realizado en la hoja quede reflejado de manera automática en todas las páginas que utilizan la hoja. Esta es la opción más aconsejable si vamos a utilizar el estilo en más de una página, de esta forma sólo será necesario vincular cada una de los archivos que quieras qeu se vean afectados a la hoja de estilos que hayas creado.

Si elegimos Importar la hoja se incrusta en la página.

La opción Media te permitirá seleccionar el tipo de medio al que se asociará la hoja de estilos, por ejemplo, screen (pantalla), print (impresora) o tv (webtv). Estas opciones te permitirán crear hojas de estilos para soportes diferentes. Puedes crear una para screen, que será la que se muestre cuando navegues por Internet, y otra para print que será la que se utilice cuando se imprima el contenido del archivo.

Después de Aceptar, la hoja con sus estilos aparecerá en el panel CSS.

 

  Ejercicios del Tema 4.

  Prueba evaluativa del Tema 4.




  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Pág. 4.3




Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.