Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de imagen de estilo de lista
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Imagen de estilo de lista Con sintaxis y ejemplos.
describir
La propiedad CSS list-style-image define la imagen que se usará como marcador de elemento de lista, es decir, la imagen que aparece antes de cada elemento de lista.
sintaxis
La sintaxis de la propiedad CSS list-style-image es:
list-style-image: value;parámetro o parámetro
valor
Imagen para marcado de lista. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| URL | Ubicación de los recursos de imagen ul { imagen-estilo-lista: url(“/images/symbol.png”); } |
| no cualquiera | sin imagen (este es el valor predeterminado) ul {imágenes de estilo de lista: ninguna;} |
| heredar | El elemento heredará la imagen de estilo de lista de su elemento principal ul {imagen de estilo de lista: heredar;} |
notas
- La propiedad list-style-image se puede aplicar a
- ,
- Etiqueta.
- list-style-image se aplica a elementos con display: list-item.
- Si no se especifica la propiedad list-style-image, el valor predeterminado es ninguno.
- Consulte también las propiedades list-style, list-style-position y list-style-type.
- Aleación de cromo
- Firefox (Geco)
- Navegador de Internet (IE)
- ópera
- Safari (WebKit)
- TechOnTheNet.com
- CompruebaTusMatemáticas.com
- BigActivity.com
- TechOnTheNet.com
- CompruebaTusMatemáticas.com
- BigActivity.com
- o
Compatibilidad del navegador
La propiedad CSS list-style-image tiene soporte básico para los siguientes navegadores:
ejemplo
Discutiremos la propiedad list-style-image a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
Usar una lista ordenada
Veamos un ejemplo de imagen de estilo de lista CSS donde aplicamos imagen de estilo de lista a una lista ordenada.
Pero primero, veamos cómo se ve una lista ordenada sin ningún estilo aplicado. Si creamos una lista ordenada, el HTML se verá así:
<ol> <li>TechOnTheNet.com</li> <li>CheckYourMath.com</li> <li>BigActivities.com</li> </ol>La lista ordenada se verá así:
Ahora usemos la propiedad list-style-image para aplicar una imagen a la etiqueta del elemento de la lista. CSS se ve así:
ol { list-style-image: url("/images/symbol.gif"); }La lista ordenada ahora se verá así:
En este ejemplo de imagen de estilo de lista CSS, elegimos
- Cada elemento de la lista en el marcado está precedido por una imagen denominada símbolo.gif. Como puede ver, la imagen symbol.gif reemplaza cualquier número que normalmente aparecería en una lista ordenada.
Usar una lista desordenada
A continuación, veamos un ejemplo de imagen de estilo de lista CSS en el que aplicamos imagen de estilo de lista a una lista desordenada. Entonces, si creamos una lista desordenada, el HTML se verá así:
<ul> <li>TechOnTheNet.com</li> <li>CheckYourMath.com</li> <li>BigActivities.com</li> </ul>La lista desordenada se verá así:
Ahora, si usamos la propiedad list-style-image para aplicar una imagen al marcado del elemento de la lista, el CSS se verá así:
ul { list-style-image: url("/images/symbol.gif"); }La tabla fuera de secuencia ahora aparecerá de la siguiente manera:
En este ejemplo de imagen de estilo de lista,
- El disco delante de cada elemento de la lista en el marcado se reemplazará con una imagen symbol.gif.
con elementos de lista
También puede aplicar la propiedad list-style-image directamente a los elementos de la lista, así:
li { list-style-image: url("/images/symbol.gif"); }Esto también hará que los elementos de la lista aparezcan de la siguiente manera (independientemente de si el elemento de la lista es parte de una lista ordenada o desordenada):
(Visited 12 times, 1 visits today)