Propiedades de las listas en CSS

8. Propiedades de las listas
Las propiedades CSS de las listas son las que nos permiten controlar los estilos de los marcadores y la posición de los elementos dentro de las listas. En la tabla 8.1 se muestran las propiedades de las listas más utilizadas.
Propiedad | Descripción | Valores |
---|---|---|
list-style-type | Estilo aplicable a los marcadores visuales de las listas | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none |
list-style-image | Imagen aplicable a los elementos de las listas | url() | none |
list-style-position | Posición del marcador dentro de la lista | inside | outside |
list-style | Permite establecer varios estilos de la lista en una sola propiedad | list-style-type | list-style-position | list-style-image |
8.1. List-style-type
.a {list-style-type: circle;} .b {list-style-type: square;} .c {list-style-type: upper-roman;} .d {list-style-type: lower-alpha;}
0
8.2. List-style-image
ul.a { list-style-image: url('https://i.racjonalista.pl/img/em/lol.gif'); } ul.b { list-style-image: url('https://media.giphy.com/media/tBik70kZOJKOk/giphy.gif'); }
0
8.3. List-style-position
ul.a { list-style-position: outside; } ul.b { list-style-position: inside; }
0
8.4. List-style
ul.a { list-style: square outside; } ul.b { list-style: circle inside; }
0
8.5. Personalizar listas con emoticonos
Puedes personalizar tus listas utilizando emoticonos como marcadores. Para hacerlo, puedes utilizar la propiedad list-style-image
en combinación con algunos emoticonos o iconos que desees utilizar. Además necesitarás usar el pseudo-elemento ::before
que estudiaremos en secciones más avanzadas.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Listas con Emoticonos</title> <style> ul { list-style: none; /* Eliminamos los marcadores predeterminados */ padding: 0; /* Eliminamos el relleno predeterminado */ } li::before { content: '😊'; /* Emoticono como marcador */ margin-right: 10px; /* Espacio entre el emoticono y el texto del elemento */ } </style> </head> <body> <h1>Listas con Emoticonos</h1> <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <li>Elemento 4</li> <li>Elemento 5</li> </ul> </body> </html>
En el ejemplo anterior:
- Usamos la propiedad
list-style
para eliminar los marcadores predeterminados de la lista (none
) y el relleno predeterminado. - Luego, aplicamos un emoticono como marcador utilizando la pseudo-clase
::before
en cada elemento de la lista. El emoticono se establece en el contenido del elemento y se agrega un margen derecho para separar el emoticono del texto del elemento.
Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones
0
8.6. Usar una imagen con background-image
En el punto 8.2 hemos visto cómo agregar una imagen en la viñeta usando la propiedad list-style-image
. Sin embargo, este método es muy limitado en lo que respecta al control del tamaño y posición de la viñeta. Para este caso, es más apropiado usar la propiedad background-image
.
Supongamos que tienes una imagen llamada «viñeta.png» que deseas utilizar como marcador en tu lista:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lista con Imagen de Viñeta</title> <style> ul { list-style: none; /* Eliminamos los marcadores predeterminados */ padding: 0; /* Eliminamos el relleno predeterminado */ } li::before { content: ""; /* Dejamos el contenido en blanco */ display: inline-block; width: 20px; /* Ancho de la imagen de la viñeta */ height: 20px; /* Alto de la imagen de la viñeta */ background-image: url('viñeta.png'); /* Ruta de la imagen de la viñeta */ background-size: contain; /* Ajustar la imagen al contenedor */ margin-right: 10px; /* Espacio entre la viñeta y el texto del elemento */ } </style> </head> <body> <h1>Lista con Imagen de Viñeta</h1> <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <li>Elemento 4</li> <li>Elemento 5</li> </ul> </body> </html>
En este ejemplo:
- Utilizamos la propiedad
list-style
para eliminar los marcadores predeterminados de la lista (none
) y el relleno predeterminado. - Luego, aplicamos una imagen como viñeta utilizando la pseudo-clase
::before
en cada elemento de la lista. Configuramos el contenido en blanco (content: ""
) para ocultar cualquier contenido predeterminado del marcador. - Definimos el ancho y alto de la imagen de la viñeta (
width
yheight
) y especificamos la ruta de la imagen de la viñeta enbackground-image
. - Utilizamos
background-size: contain
para asegurarnos de que la imagen se ajuste al contenedor y no se distorsione. - Agregamos un margen derecho para separar la imagen de la viñeta del texto del elemento.
Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones
0
Test