Apuntes sobre Css

¿Para qué quieres herencias cuando tienes !important?

Listas en CSS

Las listas son una forma práctica de organizar contenido en HTML, ya sea para menús, instrucciones, o simplemente viñetas. Con CSS, puedes personalizarlas: desde el tipo de marcador (círculos, números, letras) hasta imágenes propias. En esta lección veremos cómo usar list-style-type, list-style-image, list-style-position y list-style para adaptar tus listas al diseño deseado.

list-style-type

Define el estilo del marcador de los elementos <li>. Aunque puedes usar cualquier valor en listas ordenadas (<ol>) o desordenadas (<ul>), algunos tipos se asocian comúnmente a cada una:

Valores comunes:

  • disc: Círculo lleno (por defecto en <ul>)
  • circle: Círculo hueco
  • square: Cuadrado
  • decimal: Números (por defecto en <ol>)
  • lower-roman, upper-roman
  • lower-alpha, upper-alpha
  • none: Sin marcador

Valores modernos (CSS3): decimal-leading-zero, lower-greek, upper-latin. También cadenas personalizadas (experimental):

ul {
    list-style-type: square;
}
ol {
    list-style-type: lower-roman;
}

list-style-image

Permite usar una imagen como marcador.

Valores: none, url("/ruta/imagen.png")

ul {
    list-style-image: url("/images/star.png");
    list-style-type: circle; /* respaldo */
}

Consejo: Usa imágenes pequeñas (ej. 16x16 px), y siempre incluye un respaldo con list-style-type.

Alternativa moderna: Puedes usar caracteres Unicode o emojis directamente:

ul {
    list-style-type: "⭐ ";
}

list-style-position

Define si el marcador se muestra fuera (outside) o dentro (inside) del contenido de la lista.

Valores: outside (por defecto), inside

ul.outside {
    list-style-position: outside;
}
ul.inside {
    list-style-position: inside;
}

Nota: inside puede afectar la alineación de líneas largas o párrafos dentro de listas.

list-style (abreviada)

Combina list-style-type, list-style-position y list-style-image en una sola propiedad.

ul {
    list-style: square inside url("/images/star.png");
}

El orden no es obligatorio, pero se recomienda: tipo, posición e imagen.

Ejemplo completo

<ul class="custom">
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
</ul>

<style>
.custom {
    list-style: url("/images/star.png") square inside;
}
</style>

Buenas prácticas

Valores universales: Puedes usar initial, inherit y unset en todas estas propiedades:

  • initial: restaura el valor por defecto del navegador.
  • inherit: hereda del contenedor padre.
  • unset: aplica inherit si es heredable, o initial si no lo es.

Accesibilidad: Asegúrate de que los marcadores sean visuales y tengan buen contraste. Si usas list-style: none, considera añadir íconos personalizados con ::before.

Diseño adaptable: Usa em o rem para márgenes y paddings, y prueba con list-style-position: outside para mantener estructura clara.

Rendimiento: Optimiza las imágenes usadas como marcadores, usa .svg si es posible.

Compatibilidad: Algunos valores modernos tienen soporte limitado. Siempre proporciona alternativas o respaldos (ej. usar list-style-type junto a list-style-image).

Pruebas: Verifica el diseño en pantallas pequeñas y distintos navegadores.

TOP