Listas de CSS (Listas)

Las propiedades de lista se utilizan para controlar la visualización de los marcadores de lista de los elementos de lista.

Tipos de lista HTML

Hay tres tipos diferentes de listas en HTML:

• Lista sin orden — lista de elementos, donde cada elemento de lista está marcado con un punto.

• Lista ordenada — lista de elementos, donde cada elemento de lista está numerado.

• Lista definida -lista de elementos, que contiene una descripción de cada elemento.

Para obtener más información sobre las listas, consulteLista HTMLla guía.

Estilo de lista CSS

CSS proporciona varias propiedades para estilizar las listas sin orden y ordenadas más comunes. Estas propiedades de lista de CSS suelen permitirle:

• Controlar la forma o el aspecto del marcador.

• Especificar la imagen del marcador en lugar de los puntos de lista o números.

• Establecer la distancia entre el marcador y el texto de la lista.

• Especifica si el marcador o el punto de lista debe aparecer dentro o fuera del cuadro que contiene la lista sin orden o ordenada.

Tipo de estilo de lista

Por defecto,Lista ordenadalas listas ordenadas utilizan números árabes (1、2、3y otros) numerados, mientras que enEn la lista sin orden，marcador de lista circular. Pero, puede usar la lista-style-La propiedad type cambia este tipo de marcador de lista predeterminado a cualquier otro tipo, como circular, cuadrado, números romanos, letras latinas, etc.

ul {
　　　　list-style-type: square;
}
ol {
　　　　list-style-type: upper-roman;
}

Cambiar la posición del marcador de lista

Por defecto, los marcadores de lista están ubicados en el exterior del cuadro del elemento de lista. Pero, puede usar la lista-style-La propiedad position se utiliza para especificar si el marcador o el punto de lista debe aparecer dentro o fuera del borde del elemento de lista.

Esta propiedad toma los valores inside o outside, y outside es el valor predeterminado. Si se usa el valor inside, estas líneas se alinearán debajo del marcador en lugar de estar sangradas.

ul.in li {
　　　　list-style-position: inside;
}
ul.out li {
　　　　list-style-position: outside;
}

Usar la imagen como marcador de lista

También puede usar list-style-La propiedad image establece la imagen como marcador de lista.

Las reglas de estilo en los ejemplos siguientes asignan una imagen PNG transparente llamada “arrow.png” como marcador de lista a todos los elementos de lista sin orden.

ul li {
　　　　list-style-image: url("arrow.png");
}

El ejemplo anterior no produce la misma salida en todos los navegadores. Internet Explorer y Opera mostrarán marcadores de imagen ligeramente más altos que Firefox, Chrome y Safari.

Solución de compatibilidad de marcadores de imagen en navegadores

Cuando se utiliza el list-style-Cuando se utiliza la propiedad image, los íconos de lista no se pueden alinear de manera precisa en el navegador. La solución es utilizar background-image La propiedad de CSS alinea correctamente la imagen del ícono del proyecto.

El siguiente ejemplo muestra la imagen de marcador en todos los navegadores de manera uniforme:

ul {
　　　　list-style-type: none;
}
ul li {
　　　　background-image: url("arrow.png");
　　　　background-position: 0px　5px;　　　　/*　X-pos Y-pos (from top-left)　*/
　　　　background-repeat: no-repeat;
　　　　padding-left:　20px;
}

Atributo abreviado de estilo de lista

El list-La propiedad style es un atajo para definir todos los tres atributos list-style-type, list-style-image y list-style-position en una lista en un lugar.

Esta regla de estilo configura la marca de lista de elementos de lista ordenada en mayúsculas latinas, que aparecen al principio de los elementos de lista:

ol {
　　　　list-style: upper-latin inside;
}