Estilos CSS: Imagen de Lista

Con los estilos CSS podemos hacer páginas estupendas. ¿Qué tal cambiar estas aburridas viñetas de lista por imágenes más originales? De esto trata el tutorial. Necesitarás una serie de pequeñas imágenes, que serán las que sustituyan a las típicas cuadraditas o redondas. Aquí tienes para descargar: (sólo hay que pinchar en ellas y botón derecho).

Era fácil hacerlas, pero la mayoría me las ha proporcionado esta página: http://memmers.tripod.com/freeimages/ y también en www.animaniacos.com.

Abrimos Dreamweaver . Crearemos para este ejercicio un documento nuevo, html normal, y creamos una lista sin ordenar. Sencillita, solo es para probar; por ejemplo:

• Primer elemento
• Segundo elemento
• Tercer elemento
• Cuarto elemento

Despues, la cosa es fácil: crearemos una Hoja de Estilo css nuevo o mejor todavía, vamos a añadir un nuevo estilo a una Hoja de Estilos que ya tenemos.
En primer lugar tenemos que vincular la Hoja de Estilos existente a este nuevo archivo que acabamos de crear, y que habremos guardado en nuestro sitio: Menú Texto-->Estilos CSS-->Adjuntar Hoja de estilos. Examinamos y buscamos la hoja que creamos en el tutorial de BODY.

Ahora tendremos un fondo dentro de la página, además de la lista. Vamos a crear el estilo de viñetas:

Texto-->Estilos CSS-->Editar hoja de estilos. Y tendremos que pinchar el estilo miestilo.css y después editar.

Después pinchamos en nuevo y en la ventana que nos sale, ponemos el nombre .lista, (acordaos con un punto delante) y elegimos el Tipo Clase, el primero de todos.

Aceptamos y se nos abrirá la ventana Definición de estilo .Lista para miestilo.css

En esa ventana, elegiremos la categoría Lista, y en Imagen de Viñeta, buscaremos con Examinar la imagen que anteriormente habremos guardado.

Después Aceptar, Guardar y Listo.

Para aplicar el estilo no tenemos más que poner el cursor dentro de un elemento de nuestra lista, o bien seleccionar todos y, en la ventana de la paleta de Disposición, estilos css, aplicar el estilo Lista, de esa manera tendremos una lista muy original. Imagina cuántos cambios se le puede dar a una página¡¡¡

Con esto hemos terminado este tutorial. Puedes ver el ejercicio terminado en este enlace.