Listas en CSS
HTML te da ul y ol. CSS decide cómo se ven esas listas — viñetas redondas, cuadrados, números, letras, o sin marcador cuando construyes un menú de navegación.
Un kit de list-style
📊 Estilos de lista de un vistazo
| Propiedad | Trabajo cotidiano |
|---|---|
list-style-type |
Forma del marcador o estilo de numeración (disc, square, decimal…) |
list-style-position |
Marcador dentro o fuera de la caja de contenido |
list-style-image |
Usar una imagen como marcador |
list-style |
Atajo de tipo, posición e imagen |
list-style: none |
Quitar marcadores (común en menús de nav) |
Los marcadores pertenecen al ítem, pero sueles poner los estilos de lista en ul u ol para que cada li herede el mismo aspecto.
Tipos de viñeta
Las listas desordenadas suelen empezar con disc. Pasa a circle o square cuando el diseño necesita una marca más suave o más nítida.
Tipos de marcador de viñeta
cssul.features {
list-style-type: square;
}
ul.notes {
list-style-type: circle;
}Listas numeradas y con letras
Las listas ordenadas usan estilos de numeración. decimal es la opción cotidiana; lower-alpha o upper-roman encajan en esquemas y pasos formales.
Tipos de lista ordenada
cssol.steps {
list-style-type: decimal;
}
ol.outline {
list-style-type: lower-alpha;
}Posición del marcador — dentro o fuera
list-style-position: outside (el valor habitual) deja el marcador en el margen. inside lo mete en el flujo del texto — útil en tarjetas estrechas.
Marcadores dentro del flujo
cssul.card-list {
list-style-position: inside;
padding-left: 0;
}Quitar marcadores para menús
Las listas de navegación rara vez quieren viñetas. list-style: none las limpia — luego añade tu propio espacio con padding/margin.
Lista de nav limpia
cssnav ul {
list-style: none;
margin: 0;
padding: 0;
}Marcadores de imagen y atajo
Una imagen pequeña puede sustituir la viñeta. Prefiere recursos diminutos. El atajo list-style puede fijar tipo, posición e imagen en una línea.
Marcador de imagen + atajo
cssul.custom {
list-style: square outside none;
}
ul.icons {
list-style-image: url("/icons/check.svg");
}Un hábito calmado de listas
Elige un estilo de marcador claro por lista, mantén las imágenes pequeñas y, tras none en menús, restablece el padding para alinear limpio.
Lista de artículo legible
cssarticle ul {
list-style-type: disc;
list-style-position: outside;
padding-left: 1.25rem;
line-height: 1.6;
}Pruébalo tú
- Cambia un
ulalist-style-type: square. - Estiliza un
olconlower-alpha. - Pon
list-style-position: insideen una lista corta de tarjeta. - Quita viñetas de un
nav ulconlist-style: noney padding cero. - Prueba un
list-style-imagediminuto; vuelve al type si falla la imagen.
Errores comunes
- Esperar que
colorenlisolo restilice marcadores personalizados en todas partes - Usar
list-style: nonepero dejar un padding por defecto grande que se ve roto - Archivos enormes de
list-style-imageque dominan la línea - Numerar un
ulcon CSS en lugar de unolsemántico cuando el orden importa - Mezclar esta lección con estados hover/visited de enlaces (sesión anterior)
Resumen
list-style-typeelige viñetas o estilos de numeraciónlist-style-positioncoloca marcadores dentro o fueralist-style: nonelimpia marcadores para menúslist-style-imagey el atajolist-styleañaden extras- Mantén marcadores calmados y padding intencional tras quitar viñetas
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior