Cómo reemplazar las balas con una imagen en CSS

Al crear listas desordenadas para su sitio web, el navegador muestra automáticamente las balas, que parecen círculos o cuadrados oscuros, al lado de cada elemento de la lista. Usted tiene la opción de reemplazar estas balas con sus propias imágenes utilizando Cascading Style Sheets (CSS). La regla de estilo CSS le permite especificar la imagen particular que desea utilizar en lugar de la bala para que pueda crear listas personalizadas que soportan mejor el diseño de su sitio web.

Instrucciones

1 Ingrese a su cuenta de alojamiento web que administra su sitio web. Sube la imagen que sustituye a su bala en la misma carpeta donde residen sus archivos de página web y hacer una nota de la ubicación de la URL.

2 Abrir su programa editor de texto y abra la página Web que contiene las balas que desea reemplazar.

3 Enter "<style type =" text / css "> </ style>" antes de la etiqueta de cierre </ head> en la parte superior de su documento. Este código crea la sección de hoja de estilo interna en el que introduce sus reglas CSS.

4 Coloque el cursor entre las etiquetas de estilo y tipo "ul" para crear una regla que controle su lista. Siga su entrada con un par de llaves, así:

ul {}

5 Enter "list-style-image: URL ( '');" entre los soportes y escriba la dirección URL de la imagen de la sustitución de las balas entre los paréntesis. El código de estilo completa ahora se ve como el siguiente ejemplo:

<Style type = "text / css">

ul {list-estilo de imagen: URL ( 'http://www.site.com/bullet.gif'); }

</ Style>

La parte "ul" de la regla de estilo reemplaza automáticamente las balas de todas las listas desordenadas en su página.

6 Guarde el archivo y subirlo de nuevo a su proveedor de alojamiento web para publicar las nuevas imágenes de la lista.