Podemos distinguir tres tipos de listas HTML:
Cada una de las cuales tiene sus propias características y limitaciones que podemos cambiar gracias a la magia del CSS.
Centrar una lista por CSS no es tan fácil como parece.
Si intentas aplicar lo obvio, (centrar el texto con text-align: center;
) verás que los puntos de las listas desordenadas o los números de las ordenadas quedan separados y el texto centrado.
Tal que así:
Desde luego no es el resultado que buscamos, así que vamos a usar unas líneas de CSS para arreglarlo.
Crea una clase llamada, por ejemplo, centrar-listas
y aplica en ella el centrado del texto.
Después aplica al elemento <ol>
o <ul>
con dicha clase alineamiento a la izquierda y display: inline-block;
.
<div class="centrar-listas">
<ul>
<li>En un lugar de la Mancha,</li>
<li>de cuyo nombre no quiero acordarme,</li>
<li>no ha mucho tiempo que vivía un hidalgo</li>
<li>de los de lanza en astillero,</li>
<li>adarga antigua,</li>
<li>rocín flaco y galgo corredor.</li>
</ul>
</div>
<div class="centrar-listas">
<ol>
<li>Una olla de algo más vaca que carnero,</li>
<li>salpicón las más noches,</li>
<li>duelos y quebrantos los sábados,</li>
<li>lantejas los viernes,</li>
<li>algún palomino de añadidura los domingos,</li>
<li>consumían las tres partes de su hacienda.</li>
</ol>
</div>
Lenguaje del código: HTML, XML (xml)
.centrar-listas {
text-align: center;
}
.centrar-listas ul,
.centrar-listas ol {
text-align: left;
display: inline-block;
}
Lenguaje del código: CSS (css)
Las listas desordenadas en HTML son aquellas que muestran sus elementos precedidos de un símbolo, conocido como viñeta.
Podemos definir el tipo de viñeta empleada para cada elemento.
Para ello debemos especificarlo por medio del atributo type
dentro de la etiqueta de <ul>
, si queremos que el estilo sea válido para toda la lista, o dentro le la etiqueta <li>
si queremos hacerlo específico de un solo elemento.
Por ejemplo:
Cuyo código sería:
<ul type="square">
<li>Elemento 1 </li>
<li type="disc">Elemento 2 </li>
<li>Elemento 3 </li>
<li type="circle">Elemento 4 </li>
</ul>
Lenguaje del código: HTML, XML (xml)
Por defecto, podemos elegir entre tres tipos de viñeta para las listas desordenadas en HTML:
Pero, a través de CSS, podemos modificar las viñetas que preceden a cada elemento de la lista, cambiando su color, el símbolo o ambas cosas.
Para ello, lo que haremos es desactivar las viñetas por defecto y definir después qué símbolo vamos a utilizar.
div.lista-azul li {
list-style: none;
}
div.lista-azul li::before {
content: "►";
color: blue;
display: inline-block;
width: 1em;
margin-left: -1em
}
Lenguaje del código: CSS (css)
Por supuesto, queremos que los cambios se apliquen solo donde nos interese y no a todas las listas que podamos utilizar en nuestro sitio web.
Por lo tanto, creamos la correspondiente clase, en este caso lista-azul
, desactivamos el estilo de lista por defecto con list-style: none
y aplicamos la nueva viñeta, con sus características, mediante el pseudoelemento ::before
del selector li
.
Los emojis que usamos en redes sociales, mensajes, etc. son códigos UNICODE, así que podemos usarlos para personalizar las viñetas de las listas HTML de nuestro sitio web.
Para ello usaremos el atributo content
del pseudoelemento ::before
.
ul li::before {
content: "😁 "
}
.lista-ok li::before {
content: "👍 ";
}
.lista-corazon li::before {
content: "❤ ";
}
Lenguaje del código: CSS (css)
Al igual que con las listas desordenadas, también podemos personalizar los numeradores de las listas numeradas con CSS.
Para ello usaremos los contadores CSS, que son variables cuyos valores se pueden incrementar mediante reglas CSS.
Para trabajar con contadores CSS usaremos las siguientes propiedades:
counter-reset
- Crea o reinicia un contadorcounter-increment
- Incrementa un valor de contadorcontent
- Inserta contenido generadocounter()
o counters()
: Función que agrega el valor de un contador a un elementoDigamos que queremos crear la siguiente lista numerada personalizada:
Creamos dos <div>
en cada uno de los cuales incluimos una lista numerada, asignándoles a cada cual una clase:
<div class="lista-numerada-1">
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ol>
</div>
<div class="lista-numerada-2">
<ol>
<li>Elemento 6</li>
<li>Elemento 8</li>
<li>Elemento 10</li>
<li>Elemento 12</li>
</ol>
</div>
Lenguaje del código: HTML, XML (xml)
Para cada una de las listas ordenadas definimos un contados con counter-reset
y establecemos el incremento a aplicar con counter-increment
.
Anulamos el numerador por defecto con list-style: none;
e indicamos el contenido y propiedades de las nuevas viñetas con el pseudoelemento ::before
de los elementos de lista.
.lista-numerada-1 ol {
list-style: none;
counter-reset: contador1;
}
.lista-numerada-1 ol li {
counter-increment: contador1;
}
.lista-numerada-1 ol li::before {
content: counter(contador1) ". ";
color: red;
font-weight: bold;
}
.lista-numerada-2 ol {
list-style: none;
counter-reset: contador2 4;
}
.lista-numerada-2 ol li {
counter-increment: contador2 2;
}
.lista-numerada-2 ol li::before {
content: counter(contador2) ") ";
color: blue;
font-weight: bold;
}
Lenguaje del código: CSS (css)
Al crear un contador con counter-reset
podemos indicar el valor inicial, que será 0 de no hacerlo.
También podemos establecer el valor del incremento de counter-increment
con un número. Si no indicamos nada , el incremento será 1.
Las etiquetas de lista se pueden anidar para conseguir listas mixtas combinando diferentes estilos.
Por ejemplo:
<style type="text/css">
.lista-azul li {
list-style: none;
}
.lista-azul li::before {
content: "►";
color: blue;
display: inline-block;
width: 1em;
margin-left: -1em
}
</style>
<div><strong>Párrafos famosos</strong>
<ul>
<li type="square"><em>Quijote</em>
<ol>
<li>En un lugar de la Mancha,</li>
<li>de cuyo nombre no quiero acordarme</li>
</ol>
</li>
<li><em>Chiquito</em>
<ul class="lista-azul">
<li>Por la gloria de mi madre,</li>
<li>está la cosa muy malar.</li>
</ul>
</li>
</ul>
</div>
Lenguaje del código: HTML, XML (xml)
Realmente, podemos personalizar las listas HTML usando cualquier cosa que se pueda incluir en el content
del pseudoelemento ::before
, como imágenes o textos.
Y, dependiendo del nivel al que apliquemos la personalización de la viñeta, podemos conseguir listas muy chulas para, por ejemplo, barras de navegación, tablas de contenido, listados, etc.
Si haces una búsqueda en Internet encontrarás cientos de páginas con códigos y símbolos para usar en tus listas.
Algunos de los enlaces de este artículo pueden corresponder a programas de afiliación de herramientas que uso, he probado o sé que son de utilidad.
El uso de mis enlaces de afiliado nunca aumenta el precio para ti, pero me dan una pequeña comisión que me permite seguir generando más y mejor contenido.
Por ejemplo, si compras en Amazon, puedes ayudarme haciéndolo con mi enlace de referencia:
https://academiaweb.online/amazon
¡Gracias de antemano por tu apoyo!