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 o viñetas 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 las viñetas de las listas | url() | none |
list-style-position | Posición de las viñetas 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;}
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'); }
8.3. List-style-position
ul.a { list-style-position: outside; }
ul.b { list-style-position: inside; }
8.4. List-style
ul.a { list-style: square outside; }
ul.b { list-style: circle inside; }
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-stylepara eliminar los marcadores predeterminados de la lista (none) y el relleno predeterminado. - Luego, aplicamos un emoticono como marcador utilizando la pseudo-clase
::beforeen 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
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-stylepara eliminar los marcadores predeterminados de la lista (none) y el relleno predeterminado. - Luego, aplicamos una imagen como viñeta utilizando la pseudo-clase
::beforeen 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 (
widthyheight) y especificamos la ruta de la imagen de la viñeta enbackground-image. - Utilizamos
background-size: containpara 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
Comprueba tu apendizaje