16. Listas

list-style-type

Puedes usar los estilos predifinidos.

ul {
  list-style-type: disc;
  list-style-type: circle;
  list-style-type: square;
  list-style-type: decimal;
}

Usar un texto o emoji.

ul {
  list-style-type: '👍';
}

Predefinirlos con @counter-style.

@counter-style lista-de-ganadores {
  system: fixed;
  symbols: url(oro.png) url(plata.png) url(bronce.png);
  suffix: " ";
}

ul {
  list-style-type: lista-de-ganadores;
}

O quitarlos.

ul {
  list-style-type: none;
}

Más información

image

Usa una imagen como marcador en una lista desordenada.

ul {
  list-style-image: url('oro.png');
}

Más información

position

Indicas donde quieres que se sitúe el marcador.

Dentro del <ul>.

ul {
  list-style-position: inside;
}

Fuera del <ul>.

ul {
  list-style-position: outside;
}

Más información

Actividad 1

Implementa en HTML la siguiente lista con los marcadores cuadrados.

Actividad 2

Implementa en HTML la siguiente lista con los nombres de tus mascotas o hijos. Si no tienes, puedes inventártelos.

Actividad 3

Implementa en HTML la siguiente lista equivalente a un navegador real para una web. No olvides añadir un cambio de estado cuando el cursor esté por encima.

Actividad 4

Implementa en HTML la siguiente lista.