Hogar › Teléfono › Cómo establecer la posición de un elemento en CSS. CSS: posicionamiento de elementos de bloque. Posicionamiento absoluto y fijo

Cómo establecer la posición de un elemento en CSS. CSS: posicionamiento de elementos de bloque. Posicionamiento absoluto y fijo

En HTML, un conjunto completo de etiquetas se encarga de organizar las listas, cuya organización debe cumplir con ciertas reglas de estructuración de datos.

Quinto estándar versiones html Se admiten 3 tipos de listas: listas numeradas, listas con viñetas y listas de definiciones. También proporciona la capacidad de anidar listas entre sí, creando listas anidadas de varios niveles.

lista numerada

lista numerada- este es un conjunto de elementos (elementos de lista) que tienen una secuencia determinada. Cada elemento de la lista numerado tiene un marcador único que indica el orden de aparición. de este párrafo en relación con otros elementos de la lista. De forma predeterminada, los marcadores de elementos de lista numerados son números. El primer elemento tiene el número 1, el segundo el número 2, y así sucesivamente.

Los ejemplos más comunes de listas numeradas son recetas para preparar varios platos. Ya que cualquier receta es una lista numerada, con una secuencia clara de acciones.

Para crear listas numeradas en HTML, use la etiqueta

Lista numerada:

Café
Té
Leche

Intentar "

Nota: etiqueta

elementos secundarios

, es decir, todo el contenido de la lista numerada debe colocarse dentro de los elementos
. Etiqueta

, a su vez, no tiene restricciones de contenido, por lo que puedes colocar en él párrafos, imágenes, enlaces, tablas, otras listas, etc.

Lista con viñetas

Lista con viñetas- Se trata de listas de elementos no numeradas, es decir, desordenadas, cuya secuencia no importa. Todos los artículos lista con viñetas tienen los mismos marcadores, de forma predeterminada se muestran como pequeños círculos negros.

Para crear listas con viñetas en HTML, use la etiqueta

, que contiene todos los contenidos mostrados de la lista):

Lista con viñetas:

Café
Té
Leche

Intentar "

tipos de marcadores

Puede cambiar los tipos de viñetas de lista numeradas usando atributo de tipo. Este atributo admite cinco tipos de marcadores:

Las listas con viñetas no tienen un atributo de tipo, por lo que no podrá cambiar el tipo de viñeta de una lista con viñetas usando HTML. Para cambiar el tipo de marcador, en este caso, puedes utilizar la propiedad CSS list-style-type, con la que, además del valor predeterminado, puedes seleccionar dos tipos más de marcador: círculo o cuadrado.

Cambiar marcadores de lista:

Título de la página

Lista numerada con atributo type="a":

manzanas
Plátanos
limones

Lista numerada con atributo tipo="I":

manzanas
Plátanos
limones

Tipos de marcadores de lista con viñetas:

manzanas
Plátanos
limones

manzanas
Plátanos
limones

Intentar "

CSS propiedad de tipo de estilo de lista, además de tipos de marcadores para listas con viñetas, tiene muchos varios tipos marcadores y para listas numeradas. Pero cambiar un tipo estándar de marcador por otro no siempre es suficiente para crear una lista hermosa. Para diseñar listas, es mejor usar CSS, que le permite no solo cambiar la apariencia del marcador, sino también reemplazar marcadores con imágenes, controlar su ubicación y controlar la sangría. Puedes ver cómo hacer todo esto.

lista horizontal

Si está utilizando una lista HTML para crear menú horizontal, deberá organizar los elementos de la lista uno tras otro en la misma línea. Usando HTML Esto no funcionará, por lo que necesitarás usar CSS.

Para crear una lista horizontal, debe establecer una propiedad de visualización CSS para los elementos de la lista con el valor inline o inline-block, dependiendo de qué otras propiedades vaya a utilizar.

Título de la página

lista numerada

manzanas
Plátanos
limones

Lista con viñetas:

manzanas
Plátanos
limones

Intentar "

Después de esto, todos los elementos de la lista se alinearán en una línea. Tenga en cuenta que las viñetas desaparecerán de los elementos de la lista y ni siquiera habrá un espacio entre ellas, pero la sangría izquierda de la lista permanecerá.

Puedes ver cómo convertir una lista horizontal en un menú horizontal.

- 4,5 sobre 5 basado en 2 votos

Muy a menudo, cierta información de un sitio web debe presentarse en forma de listas.

Las listas te permiten organizar y sistematizar información diversa y presentarlo al visitante de una manera conveniente.

Las listas en HTML vienen en tres variedades: listas con viñetas, listas numeradas y listas de definiciones. Veamos cómo crearlos en orden.

Lista con viñetas.

Este tipo de lista se utiliza con mayor frecuencia. La lista con viñetas en HTML se crea usando etiquetas

. En este caso, se agrega un marcador frente a cada elemento de la lista de forma predeterminada; es un marcador en forma de círculo; Usando etiquetas, se crea un contenedor, dentro del cual se encuentran los elementos de la lista: .

El código de la lista con viñetas se verá así:

Esta opción es
esta opción
Opción como esta

Puedes intentar crear página HTML usando este codigo y terminarás con la siguiente lista:

Como puede ver, cada elemento de la lista está posicionado con nueva linea, mientras que se crean ciertas sangrías a la izquierda, arriba y abajo. Cada elemento de la lista comienza con un marcador; el marcador puede ser un círculo relleno (usado de forma predeterminada), un círculo o un cuadrado. en la etiqueta

disco - círculo;
círculo - círculo;
cuadrado - cuadrado.

El valor del disco es el predeterminado.

Un ejemplo de creación de una lista con viñetas con marcadores circulares:

Esta opción es
esta opción
Opción como esta

Como resultado, la lista tomará la siguiente forma:

Crear una lista con viñetas con marcadores cuadrados:

Esta opción es
esta opción
Opción como esta

La lista se verá así:

El atributo de tipo se puede aplicar a más que solo una etiqueta

. De esta manera puedes crear una lista con una variedad de viñetas.

Esta opción es
esta opción
Opción como esta

El resultado será el siguiente:

Listas numeradas.

Las listas numeradas en HTML son listas en las que cada elemento tiene un número de serie, las listas numeradas se crean usando la etiqueta

primera linea
Segunda linea
Tercera linea

La lista se ve así:

Por defecto, la numeración está en números arábigos. Pero la etiqueta

A continuación se detallan versiones abreviadas del código y el tipo de numeración que puede haber en un caso u otro.

Vista de lista:

Numeración letras minúsculas Alfabeto latino:

Vista de lista:

Lista de definiciones en HTML.

Un tipo especial de lista son las listas de definiciones. Se diferencian en que cada elemento de la lista consta de dos elementos, un término y un texto que revela su significado. Estas listas se crean usando etiquetas.

. Etiqueta

establece el término y la etiqueta

descripción o definición de un término.

Grabado esta lista como sigue:

Término 1: Definición 1
Término 2: Definición del término 2
Término 3: Definición 3

El resultado será la siguiente lista:

Como puede ver, esto crea una sangría adecuada para el término y el texto de definición.

Listas anidadas o multinivel en HTML.

A veces es necesario anidar otra lista dentro de un elemento de cierto tipo de lista. HTML le permite incrustar ilimitadamente algunas listas en elementos de otras listas.

Por ejemplo, aquí se muestra un código que anida listas numeradas dentro de elementos de lista con viñetas.

Esta opción es
1. primera linea
2. Segunda linea
3. Tercera linea
esta opción
1. primera linea
2. Segunda linea
3. Tercera linea
Opción como esta
1. primera linea
2. Segunda linea
3. Tercera linea

¡Buen día!

En este artículo, aprenderá sobre todas las posibilidades de las listas, comprenderá cómo hacer una lista numerada y dominará las etiquetas que lo ayudarán a convertir una lista con viñetas simple en una más interesante y llamativa con viñetas arbitrarias. Después de completar la lección, comprenderá dónde se usan las listas y bajo qué circunstancias se pueden usar.

Este artículo es el tercero de este breve curso sobre Conceptos básicos de HTML. antes de leer esta lección Recomiendo pasar por los dos anteriores:

El artículo acaba de comenzar y ya puede notar el uso de una lista con viñetas estándar. En mi sitio web parece bastante simple: a la izquierda hay una pequeña sangría con una línea y un marcador cuadrado. Más adelante en el artículo veremos en detalle qué tipos de marcadores existen, cómo hacer números y también cómo hacer tu propio marcador.

En cada parte del artículo se acompañará la creación de determinadas listas. explicaciones detalladas insertando una lista particular.

1. Listas con viñetas en HTML

Este tipo de lista se utiliza para enumerar en el texto un conjunto de elementos con significados similares. Esta podría ser una lista de enlaces relacionados con el mismo tema, explicación detallada Para partes individuales texto. Pero veamos cómo se ven las listas con viñetas en el código:

Y así es como se ve en el navegador:

Arroz. 1.1. Tipo estándar de marcado lista sin numerar

HTML en el navegador

1.1 Viñetas estándar para listas con viñetas

En la imagen de arriba (Figura 1.1.) puede ver los círculos al principio de cada elemento del menú. Este es el marcador. De forma predeterminada, aparece como un círculo relleno en el navegador. Hay varios tipos de marcadores en HTML: círculo relleno, círculo vacío y cuadrado. No requieren ningún CSS ni imágenes de terceros:

1.2 Marcador de lista en forma de círculo vacío

Veamos inmediatamente cómo se verá este código en el navegador:

Arroz. 1.2.

Vista de un marcador de lista como un círculo en el navegador

1.3 Marcador de lista en forma de cuadrado

Veamos también el último ejemplo con un marcador cuadrado para una lista HTML:

Presta atención al marcador, se ha vuelto cuadrado:

Arroz. 1.3.: Vista de un marcador de lista como un cuadrado en el navegador

Nota importante Este método ya no se utiliza para crear estilos para listas con viñetas. Existe una clara separación entre CSS (lea qué es CSS) y HTML. HTML sirve para marcar y CSS sirve para crear una apariencia atractiva. Código que contieneeste atributo

, al especificar el tipo de documento actual como HTML5 ("

"), dará un error durante la validación. Si no ha oído qué es la validación, este es el lugar para usted.

El error será el siguiente: Arroz. 1.4. Error en el validador al utilizar el atributo "tipo" de una lista

Hemos ordenado las listas con viñetas. Ahora pasemos a las listas numeradas y luego veamos las listas anidadas y varias

ejemplos listos para usar , que se utilizan con mayor frecuencia en sitios reales. 2. Listas numeradas en HTML

A diferencia del tipo de lista anterior, las listas numeradas tienen una característica importante: se numeran automáticamente. Esto es útil cuando necesitas numerar

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<Ya conoces los valores de los atributos, pero ahora veamos cómo crear una lista con viñetas HTML en código. De la tabla anterior, elegimos el segundo valor "círculo" para el atributo de tipo y lo configuramos en nuestra lista con viñetas: <HTML > <cabeza > gran lista<Ejemplo de una lista con viñetas con un marcador circular vacío </título> </cabeza> <cuerpo >. Hacerlo manualmente llevará mucho tiempo y aún puede confundirse. Una lista numerada se especifica mediante la etiqueta. Cómo se ve en la práctica:<Estrellas: <Ejemplo de una lista numerada: <tipo ul = "círculo" > Ejemplo de una lista numerada estándar<Sirio <tipo ul = "círculo" > Del uno al cinco:<Sirio <tipo ul = "círculo" > viejo ><Sirio <tipo ul = "círculo" > Primero<Sirio <tipo ul = "círculo" > Segundo<Sirio <Tercero </cuerpo> </html>

Cuatro Quinto/ol>

Así es como se ve una lista numerada:

configuración estándar

en el navegador:

Arroz. 2.1.

Lista numerada en el navegador con configuración estándar	Al igual que su predecesor (lista con viñetas), tiene sus propios estilos para mostrar números. La numeración regular no es el único tipo de viñeta para una lista numerada en HTML.	2.1 Viñetas estándar para listas numeradas
Aquí podemos elegir no entre tres tipos de marcadores, sino entre cinco:	1	Nombre del marcador valor del atributo "tipo"
Ejemplo de lista Marcadores en forma de números arábigos.	Bádminton	Béisbol Marcadores en minúsculas letras latinas
a	chomolungma	Chogori Kanchenjunga Marcadores en forma de letras latinas mayúsculas.
A	La cumbre se desploma	Callejón de rabietas Insano Marcadores de números romanos en minúsculas
i	Mar de Filipinas	Mar Arábigo mar de coral Marcadores de números romanos en mayúsculas

I

Rojo Verde Para una lista numerada, también podemos comenzar nuestra numeración desde cualquier número. Para hacer esto necesitas configurar atributo adicional"comenzar" . Esta numeración funciona en todo tipo de marcadores para listas numeradas. Cómo se ve en la práctica:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<Ya conoces los valores de los atributos, pero ahora veamos cómo crear una lista con viñetas HTML en código. De la tabla anterior, elegimos el segundo valor "círculo" para el atributo de tipo y lo configuramos en nuestra lista con viñetas: <HTML > <cabeza > Numeración personalizada para una lista numerada<Ejemplo de una lista con viñetas con un marcador circular vacío </título> </cabeza> <cuerpo > Empezamos a numerar desde doce:<Estrellas: <tipo ol = "a" inicio = "12" > <tipo ul = "círculo" > Doce<Sirio <tipo ul = "círculo" > Trece<Sirio <tipo ul = "círculo" > Catorce<Sirio <tipo ul = "círculo" > Quince<Sirio <tipo ul = "círculo" > Dieciséis<Sirio <Tercero </cuerpo> </html>

Así es como aparecerá en el sitio real:

Arroz. 2.2.

Numeración a partir de un número arbitrario en una lista numerada

En la imagen de arriba, numeramos la lista a partir de doce, mientras hacíamos marcadores en forma de letras latinas minúsculas. Creo que ahora ha quedado claro cómo utilizar estos atributos en sus proyectos.

Bien, pasemos ahora a las listas HTML anidadas.

3. Cómo hacer una lista multinivel (anidada) en HTML

En el sitio se utilizan listas de varios niveles para crear menús. Este menú suele aparecer como un menú desplegable hacia abajo (lección activada) o un menú desplegable hacia la izquierda o hacia la derecha. Estos menús le permiten almacenar otros elementos del menú de forma compacta.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<Ya conoces los valores de los atributos, pero ahora veamos cómo crear una lista con viñetas HTML en código. De la tabla anterior, elegimos el segundo valor "círculo" para el atributo de tipo y lo configuramos en nuestra lista con viñetas: <HTML > <cabeza > Usando modelos de automóviles como ejemplo, crearemos una lista de varios niveles en HTML:<Ejemplo de una lista con viñetas con un marcador circular vacío </título> </cabeza> <Lista de viñetas anidadas HTML <tipo ul = "círculo" > ul ><Lista de viñetas anidadas HTML <tipo ul = "círculo" > Citroën<Sirio <tipo ul = "círculo" > berlingo<Sirio <tipo ul = "círculo" > C1<Sirio <tipo ul = "círculo" > C2<Sirio <tipo ul = "círculo" > C3 Picasso<Sirio <Sol <Sirio <tipo ul = "círculo" > C4 Gran Picasso<Sirio <tipo ul = "círculo" > Kia<Sirio <tipo ul = "círculo" > toyota<Sirio <tipo ul = "círculo" > Audi<Sirio <Sol </cuerpo> </html>

lexus

Observe cómo se ve la lista de varios niveles en el navegador:

Arroz. 3.1.

Hicimos una lista de varios niveles usando viñetas (etiqueta ). Apareció una lista de varios niveles con modelos de Citroën con otros marcadores. La lista principal tiene viñetas llenas y la lista del segundo nivel tiene círculos vacíos. Pero, como recordarás, usando el atributo "tipo" podemos redefinir los marcadores (es mejor configurar ). Pero podemos unirnos

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<Ya conoces los valores de los atributos, pero ahora veamos cómo crear una lista con viñetas HTML en código. De la tabla anterior, elegimos el segundo valor "círculo" para el atributo de tipo y lo configuramos en nuestra lista con viñetas: <HTML > <cabeza > listas multinivel<Ejemplo de una lista con viñetas con un marcador circular vacío </título> </cabeza> <Lista de viñetas anidadas HTML <tipo ul = "círculo" > numerados y marcados de la siguiente manera:<Ejemplo de una lista numerada: <tipo ul = "círculo" > Listas numeradas, con viñetas y multinivel en HTML<Lista de viñetas anidadas HTML <tipo ul = "círculo" > Primer grupo de tulipanes<Sirio <Sol <Sirio <tipo ul = "círculo" > Clase primera<Lista de viñetas anidadas HTML <tipo ul = "círculo" > Tulipanes tempranos simples<Sirio <Sol <Sirio <Tercero <Sirio <Sol </cuerpo> </html>

segunda clase

tulipanes de felpa

Veamos cómo se ve en el navegador:

Arroz. 3.2. Ejemplo de una lista numerada de varios niveles a una lista con viñetas en el navegador y se dividen en pestañas HTML (estructura), CSS (estilos) y Resultado (resultado).

4.1 Cómo convertir una lista HTML en una cadena

Puede ser necesario convertir una lista HTML en una cadena al crear un menú horizontal. Es muy fácil de hacer:

4.2 Cómo hacer una lista HTML sin icono

La propiedad list-style-type en CSS es responsable de esto (más detalles):

4.3 Cómo centrar una lista en HTML

El elemento de la lista es un elemento de bloque, por lo que debe centrarse utilizando márgenes. Pero hay uno punto importante— debemos especificar explícitamente el ancho para que funcione la alineación:

4.4 Cómo hacer una lista en HTML con imágenes

Una sola propiedad es suficiente Imagen-estilo-lista CSS. Dentro de la URL, especifique la dirección antes del icono. Solo quiero señalar que es mejor seleccionar inmediatamente una imagen pequeña, porque la altura de la línea de la lista depende de ello:

4.5 Lista con viñetas HTML tu viñeta

En este caso, debes conectarte con antelación. iconos de fuentes(por ejemplo, FontAwesome). Luego puedes crear cualquier ícono en lugar de un marcador estándar:

4.6 Cómo hacer una lista en HTML en varias columnas

Para hacer una lista en varias columnas usaremos propiedad CSS recuento de columnas (la propiedad solo se admite en los siguientes navegadores: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). También debe establecer la altura de la lista para ver la división en varias columnas:

5. Practica trabajar con listas.

En el siguiente vídeo podéis ver todo el trabajo con listas HTML en la práctica:

23.02.2017

Aún no

¡Hola a todos!
En el tutorial de hoy, hablaré sobre cómo puede controlar la apariencia en CSS, es decir, crear listas numeradas y con viñetas, diseñar listas con viñetas con una imagen y también, si es necesario, eliminar por completo cualquier designación de lista con viñetas.
Intentaré no alargar esta lección y no escribir mucha información. Pero lo intentaré y veré cómo va.

Tipo de marcador en la lista

Propiedad "LISTA-ESTILO-TIPO"
Usando la regla "tipo de estilo de lista", puede establecer el tipo de marcador, por ejemplo, para mostrar números, letras, cuadrados, círculos, etc.

Propiedad:

ninguno – sin marcador

- listas con viñetas:

disco– un marcador en forma de círculo relleno;
círculo– un marcador en forma de círculo abierto;
cuadrado– un marcador en forma de cuadrado relleno;

- listas numeradas:

decimal- común numeros decimales(1,2,3,4,5, etc.);
romano superior– números romanos grandes (I, II, III, IV, V, etc.);
bajo romano– números romanos pequeños (i, ii, iii, iv, v, etc.);
alfa superior – letras mayúsculas(A, B, C, D, E, etc.);
alfa inferior– letras minúsculas (a,b,c,d,e, etc.)

Li ( lista-estilo-tipo: círculo; /* Marcadores en forma de círculo abierto */ )

Ejemplo completo:

Conceptos básicos de CSS

texto número 1
texto número 2

Resultado:

Si necesita eliminar un marcador de la lista, utilice la propiedad "ninguno":

Li (tipo-estilo-lista: ninguno; /* Eliminar marcadores */ )

Resultado:

Posición del marcador en la lista

Propiedad "LISTA-ESTILO-POSICIÓN »
La regla "posición-estilo-lista" se puede utilizar para especificar la posición del marcador.

Propiedad:

afuera– fuera del bloque principal de la lista;
adentro– dentro del bloque principal de la lista.

Li ( posición-estilo-lista: interior; /* posición del marcador */ )

Color del marcador de lista

Propiedad "COLOR »
Ya conoces la regla del “color”, con la que no sólo puedes cambiar el color del texto, sino también el color del marcador. Échale un vistazo.

Listar propiedades en CSS

Texto nº 1
Texto nº 2

Resultado:

Imagen en lugar de un marcador en la lista.

Propiedad "LISTA-ESTILO-IMAGEN »
Si no te gusta vista estándar Para listas numeradas o con viñetas, puede utilizar la regla “lista-estilo-imagen” y colocar viñetas con imágenes en lugar de viñetas normales.

Sintaxis:

Imagen-estilo-lista: url(imagen.png);

LI ( lista-estilo-imagen: url("marker1.png"); /* imagen del marcador */ )

“marker1.png” es la imagen del marcador.

Resultado:

Sangría del marcador de lista

Propiedad "PADDING-LEFT"
Si necesita sangrar desde la viñeta hasta el texto, utilice la regla de "relleno hacia la izquierda".

Li ( padding-left: 30px; /* Sangría del marcador al texto */ )

Resultado:

UN REGALO PARA LOS QUE LEYERON HASTA EL FINAL

Numerar la lista desde cualquier número.
No es necesario que lo sepas, pero decidí hacer un regalo para quienes leyeron hasta aquí. Si necesita numerar la lista no desde 1, sino, por ejemplo, desde 6, puede hacer lo siguiente:

Li ( list-style-type: none; /* Elimina la numeración inicial de la lista */ ) ul ( counter-reset: list 5; /* Inicia el contador */ ) ul li:before ( counter-increment: list; /* Aumentar el valor del contador */ content: counter(list) "." /* Genera el número */ )

Resultado:

¡Espero verte en las próximas lecciones! ¡No olvides suscribirte!

Publicación anterior
Próxima entrada

listas CSS— un conjunto de propiedades responsables del diseño de listas. El uso de listas HTML es muy común al crear barras de navegación de sitios web. Los elementos de la lista representan un conjunto elementos de bloque.

Usando propiedades CSS estándar puedes cambiar apariencia marcador de lista, agregar una imagen para el marcador, y también cambiar la ubicación del marcador. La altura del bloque marcador se puede configurar. propiedad de altura de línea.

Diseñar listas usando estilos CSS

1. Tipo de marcador de lista tipo-estilo-lista

La propiedad cambia el tipo de marcador o quita el marcador para listas con viñetas y numeradas. Heredado.

tipo de estilo de lista
Valores:
desct	Valor predeterminado. Un círculo relleno actúa como marcador para los elementos de la lista.
armenio	Numeración tradicional armenia.
círculo	Un círculo abierto actúa como marcador.
cjk-ideográfico	Numeración ideográfica.
decimal	1, 2, 3, 4, 5, …
cero decimal	01, 02, 03, 04, 05, …
georgiano	Numeración tradicional georgiana.
hebreo	Numeración hebrea tradicional.
hiragana	Numeración japonesa: a, i, u, e, o,…
hiragana-iroha	Numeración japonesa: i, ro, ha, ni, ho,…
katakana	Numeración japonesa: A, I, U, E, O,…
katakana-iroha	Numeración japonesa: I, RO, HA, NI, HO,…
alfa inferior	a, b, c, d, e,…
griego inferior	Caracteres minúsculas del alfabeto griego.
latín bajo	a, b, c, d, e,…
bajo romano	yo, ii, iii, iv, v,…
ninguno	No hay ningún marcador.
cuadrado	Un cuadrado lleno o vacío actúa como marcador.
alfa superior	A, B, C, D, E...
latino superior	A, B, C, D, E...
romano superior	I, II, III, IV, V,…
inicial	Establece el valor de la propiedad en el valor predeterminado.
heredar	Hereda el valor de la propiedad del elemento padre.

Sintaxis

Ul (tipo-estilo-lista: ninguno;) ul (tipo-estilo-lista: cuadrado;) ol (tipo-estilo-lista: ninguno;) ol (tipo-estilo-lista: alfa inferior;)
Arroz. 1. Ejemplo de diseño de listas numeradas y con viñetas

2. Imágenes para elementos de lista estilo-lista-imagen

Puede utilizar imágenes y rellenos degradados como marcadores de elementos de lista. Heredado.

Sintaxis

Ul (imagen-estilo-lista: url("images/romb.png");) ul (imagen-estilo-lista: gradiente lineal(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Arroz. 2. Diseña una lista con viñetas usando una imagen. Arroz. 3. Diseña una lista con viñetas usando un degradado.