Listas y propiedades
En HTML, hay dos tipos principales de listas:
Listas desordenadas (
<ul>) - los elementos de la lista están marcados con viñetasListas ordenadas (
<ol>) - los elementos de la lista están marcados con números o letras
Las propiedades de la lista CSS le permiten:
Establecer diferentes marcadores de elementos de lista para listas ordenadas
Establezca diferentes marcadores de elementos de lista para listas desordenadas
Establecer una imagen como marcador de elemento de lista
Agregar colores de fondo a listas y elementos de lista
Diferentes marcadores
La propiedad list-style-type especifica el tipo de marcador de elemento de lista.
El siguiente ejemplo muestra algunos de los marcadores de elementos de lista disponibles:
Ejemplo:
Nota: Algunos de los valores son para listas desordenadas y otros para listas ordenadas.
Una imagen como marcador
La propiedad list-style-image especifica una imagen como marcador de elemento de lista:
Ejemplo:
Coloque los marcadores
La propiedad list-style-position especifica la posición de los marcadores de elementos de lista (viñetas).
list-style-position: outside; significa que las viñetas estarán fuera del elemento de la lista. El inicio de cada línea de un elemento de la lista se alineará verticalmente. Esto es predeterminado:
list-style-position: inside; significa que las viñetas estarán dentro del elemento de la lista. Como es parte del elemento de la lista, será parte del texto y empujará el texto al principio:
Ejemplo:
Elimine la configuración predeterminada
La propiedad list-style-type: none; también se puede utilizar para eliminar los marcadores/viñetas. Tenga en cuenta que la lista también tiene margen y relleno predeterminados. Para eliminar esto, agregue margin:0 y padding:0 a <ul> o <ol>:
Ejemplo:
Propiedad abreviada
La propiedad list-style es una propiedad abreviada. Se utiliza para establecer todas las propiedades de la lista en una sola declaración:
Ejemplo:
Cuando se usa la propiedad abreviada, el orden de los valores de propiedad es:
list-style-type(si se especifica la propiedadlist-style-image, el valor de esta propiedad se mostrará si la imagen por algún motivo no se puede mostrar)list-style-position(especifica si los marcadores de elementos de lista deben aparecer dentro o fuera del flujo de contenido)list-style-image(especifica una imagen como marcador de elemento de lista)
Si falta uno de los valores de propiedad anteriores, se insertará el valor predeterminado para la propiedad faltante, si corresponde.
Diseñando listas con colores
También podemos diseñar listas con colores, para que se vean un poco más interesantes.
Todo lo que se agregue a la etiqueta <ol> o <ul> afecta a toda la lista, mientras que las propiedades agregadas a la etiqueta <li> afectarán a los elementos individuales de la lista:
Ejemplo:
Todas las propiedades de lista
| Propiedad | Descripción |
list-style | Establece todas las propiedades de una lista en una sola declaración. |
list-style-image | Especifica una imagen como marcador de elemento de lista. |
list-style-position | Especifica la posición de los marcadores de elementos de lista (viñetas). |
list-style-type | Especifica el tipo de marcador de elemento de lista. |
Resumen
Este tutorial de CSS cubre las propiedades de las listas, incluyendo diferentes marcadores, imágenes como marcadores, la posición de los marcadores, cómo eliminar la configuración predeterminada y cómo diseñar listas con colores. También se proporciona una tabla de todas las propiedades de la lista.
Traducido con 💚 desde W3Schools.com