Personalizar listas HTML en los posts de tu blog

¿Has intentado personalizar listas en páginas y artículos de tu web, y lo único que consigues es cambiar el estilo del texto (los elementos de la lista) pero no el de las viñetas o los números que las preceden?

Últimamente se ha puesto de muy moda escribir los post en formato lista, tipo: los mejores generadores CSS y cosas así, porque son fáciles de escribir y de leer. Apenas hay en presentar diferentes elementos sin demasiada literatura, y a cambio generan bastante tráfico, sobre todo desde redes sociales.

El problema viene cuando quieres aportar tu propio estilo a las listas, pero no lo consigues porque no encuentras la forma de personalizar listas más allá de poner negritas o cambiar el color del texto.

¡Pues eso se acabó! 🙂

Tipos de listas HTML y cuándo usarlas

Las listas facilitan la lectura y la organización del contenido. Lo hacen hasta el punto de que con una lista es posible añadir mucha información sin tener que redactar el texto que la encadene. Por lo que uno de sus beneficios es que las listas ahorran tiempo de escritura.

Estarás familiarizado/a con dos de sus tipos, que son las listas que se usan en WordPress, pero lo cierto es que en HTML existen 3 tipos de listas diferentes con distintas utilidades.

Listas desordenadas

Las listas desordenadas o unordened list vienen definidas con la etiqueta <ul> y cada elemento que la forma con la etiqueta <li>.

Sirven para enumerar elementos en los que el orden no es importante. Por ejemplo para presentar todas las listas personalizables que hay en HTML:

➡ La representación en lenguaje de marcado de una lista desordenada es:

<ul>
  <li>Desordenadas</li>
  <li>Descriptiva</li>
  <li>Ordenada</li>
</ul>

Por defecto, su viñeta o marcador es del tipo bullet; el punto de toda la vida. Que podremos sustituir por un cuadrado, un círculo o incluso quitarlo con la propiedad «list-style-type» de la que ya hemos hablado y que usaremos en los ejemplos de este artículo.

Listas ordenadas

Las listas ordenadas u ordened list comienzan por <ol> y de igual forma que las anteriores, sus elementos se definen con <li>.

En este caso se enumeran los elementos (con números decimales, romanos o letras) para indicar su importancia, posición en un «Top Ten» o para establecer un orden.

Nos valdrían para hacer un ranking con las listas HTML de más a menos utilizadas:

➡ La representación en HTML de una lista ordenada es:

<ol>
  <li>Desordenadas</li>
  <li>Ordenadas</li>
  <li>Descriptivas</li>
</ol>

Aquí la jerarquía la establecen números, aunque se pueden cambiar por letras o números romanos con el atributo «type», como ya sabes. Y si no, ahora lo descubrirás 😉

Listas descriptivas

Las listas de descripción o description list son las grandes desconocidas, y por ello las listas menos usadas. Comienzan con <dl> y sus elementos se definen con <dt> y <dd>, según si hablamos del termino o de su definición.

La variedad que podríamos utilizar para nombrar y definir los diferentes tipos de listas HTML:

➡ La representación en código de una lista de descripción es:

<dl>
  <dt>Lista ordenada</dt> /* Término */ 
    <dd>Con elementos ordenados por algún motivo</dd> /* Definición */ 
  <dt>Lista desordenada</dt> /* Término */ 
    <dd>Con elementos sin orden alguno</dd> /* Definición */ 
  <dt>Lista de definición</dt> /* Término */ 
    <dd>Establece un término y una definición</dd> /* Definición */ 
</dl>

Las listas de definición no llevan marcadores por defecto porque no contienen ningún <li>.

➡ Hasta aquí lo más básico.

Así que vamos a aprender cómo personalizar listas HTML para darles un poco de vidilla 😉

Personalizar listas HTML

Podríamos personalizar las listas de una web hasta aburrirnos cambiando los puntitos, los colores de los números, coloreando el fondo, poniendo un borde… No siempre es una tarea fácil en cuanto a CSS, pero depende en gran parte de la creatividad de cada uno.

Nosotros vamos a cambiar el color y el tamaño de las viñetas, los números y las letras, a sustituir los marcadores por imágenes, a cambiar los números por letras o números romanos, a empezar una lista por el número que nos de la gana, a alternar los colores de fondo en cada fila de una lista…

Personalizar el color de las viñetas de una lista desordenada

Un método simple para personalizar listas desordenadas es cambiar el color del bullet o cualquier marcador que tenga por defecto.

Como en el resto de personalizaciones que veremos, el truco consiste en quitar las viñetas asignadas por defecto y poner las nuestras propias, aplicándoles el estilo que nos apetezca.

De forma muy resumida, estos son los pasos a seguir:

ul {
list-style: none; /* Quitamos los marcadores */
padding: 0; /* Quitamos el padding por defecto de la lista */
margin-left: 10px; /* Separamos la lista de la izquierda */
}

li::before { /* Añadimos contenido antes de cada elemento de la lista */
content: "\2022"; /* Insertamos el marcador */
padding-right: 8px; /* Establecemos el espacio entre las viñetas y el list item */
color: red; /* Coloreamos la viñeta */
}

Y tendremos los elementos de lista con este estilo de personalización:

Si te preguntas de dónde he sacado el número que representa el símbolo de nuestro marcador, tienes una lista aquí de la que debes utilizar los elementos en su versión hexadecimal.

Modificar el tamaño del marcador de una lista

La cosa no termina con el color, puesto que también se puede cambiar el tamaño de la viñeta. Y aunque este caso es similar, deberemos trabajar un poco más el CSS para centrar el bullet verticalmente.

ul {
list-style: none;
padding: 0px;
margin-left: 10px;
}

ul li::before {
content: "\2022";  
color: red; 
display: inline-block; 
padding-right: 10px;
font-size: 50px;
line-height: 25px;
vertical-align: -11px;
width: 15px;
}

Cambiar la viñeta de una lista desordenada

Si has echado un ojo a la tabla de códigos ASCII que he enlazado hace un momento, verás que puedes cambiar los marcadores redondos por otros diferentes. Pero también se puede reemplazar las viñetas de las listas por otras, como las incluidas en esta tabla de símbolos UTF-8.

➡ ¡Hay algunos símbolos de colores para tus listas personalizadas!

Imagen como viñeta de una lista desordenada

Algunas veces, sea por necesidad o capricho, querremos utilizar imágenes o iconos en vez de los marcadores de lista que hemos visto hasta ahora. En ese caso necesitaremos preparar una imagen previamente para que haga la vez de bullet.

➡ Hay otros métodos pero este podría ser uno de ellos.

ul {
list-style-type: none;
padding: 0;
margin: 0;
}

li {
background: url('tu-imagen.png') no-repeat left center;
height: 30px;
padding-left: 25px;
}

Que igual que antes, puede que tengas que jugar un poco con los valores de las propiedades CSS o añadir otras nuevas, en función del tamaño de tu imagen o de la fuente de texto.

Si te decides por este sistema, recuerda utilizar sprites para ahorrar peticiones al servidor y mejorar el WPO de tu página web.

Cambiar números por letras en lista ordenada

Las lista ordenadas vienen por defecto ordenadas por números, pero pueden cambiarse por letras y números romanos, tanto en mayúsculas como minúsculas, con el atributo de lista «type».

• Números decimales por defecto: type="1".
• Letras en minúscula: type="a".
• Letras en mayúscula: type="A".
• Números romanos en minúscula: type="i".
• Números romanos en mayúscula: type="I".

Que tendremos que aplicar con la siguiente nomenclatura:

<ol type="I">
  <li>Primer elemento de lista</li>
  <li>Segundo elemento de lista</li>
</ol>

Empezar una lista ordenada por un número distinto de 1 o una letra que no sea la A

Alguna vez tendremos la necesidad de introducir mucho contenido entre cada elemento de una lista o quizás la lista continúe en otro post.

Pues en esos casos y para hacernos la vida más cómoda, las listan disponen del atributo «start», con el que podemos empezar una lista con el número que nos apetezca.

<ol start="1000">
  <li>Primer elemento de lista</li>
  <li>Segundo elemento de lista</li>
</ol>

1000. Primer elemento de lista
1001. Segundo elemento de lista

Y no se reduce a los números decimales. Se puede combinar los atributos type y start para comenzar una lista por ejemplo con la letra M.

<ol type="A" start="13">
  <li>Primer elemento de lista</li>
  <li>Segundo elemento de lista</li>
</ol>

13. Primer elemento de lista
14. Segundo elemento de lista

Cambiar el color de los números, las letras y sus separadores en listas ordenadas

Para cambiar el color de los números que anteceden a los elementos de lista, hay que hacer como con las viñetas. Primero quitarlos y luego añadirlos coloreados.

La cosa se complica un poco, porque debemos indicar a qué elemento se le aplica el estilo y qué tipo de separador queremos: counter-increment: lista; y content: counter(lista) "-";.

ol li {
list-style-type: none;
counter-increment: lista; /* Un nombre identificativo que te guste */
position: relative;
}

ol li::before {
color: red;
content: counter(lista) "-"; /* Indica el separador para tu contenido */
left: -32px;
position: absolute;
text-align: right;
width: 26px;
}

Si quisiéramos cambiar el color de las letras o de los números romanos de una lista (en mayúscula o minúscula), usaríamos en lugar de content: counter(lista) "-"; estos otros argumentos:

• Mayúsculas: content: counter(lista, upper-alpha) ".";
• Minúsculas: content: counter(lista, lower-alpha) ".";
• Números romanos en mayúscula: counter(lista, upper-roman) ".";
• Números romanos en minúscula: counter(lista, lower-roman) ".";

Personalizar el tamaño de los números de una lista ordenada

Es cierto que ajustar los marcadores de una lista HTML no es fácil, pero con un poco de prueba y error encontrarás los valores adecuados para las propiedades, y podrás darle a tus listas un estilo molón.

1. Marcador en color
2. Viñeta personalizada
3. Hasta el infinito y más allá

ol {
list-style-type: none;
counter-reset: lista-personalizada;
margin: 0;
}

ol li {
position: relative;
font-weight: bold;
font-size: 20px;
line-height: 30px;
padding: 4px 0 10px 50px;
margin-bottom: 10px;
background:#f5f5f5;
}

ol li:before {
content: counter(lista-personalizada);
counter-increment: lista-personalizada;
position: absolute;
left: 0;
top: 0;
font-weight: bold;
font-size: 40px;
padding: 8px 8px 8px 5px;
background: orangered;
color: white;
height: 45px;
}

A estas alturas seguro que ya sabrás cómo cambiar los números por letras por tu cuenta.

Una fila de cada color o cómo alternar el color de fondo en los elementos de una lista

Seguro que alguna vez has echado de menos saber cómo se hace para que las filas pares tengan un color de fondo y las filas impares otro.

• Primera fila impar de la lista con un color de fondo
• Segunda fila par con otro fondo
• Tercera fila impar con fondo de filas impares
• Cuarta fila par con el fondo para filas pares

Para ello haremos uso de un nuevo concepto: las Pseudo-classes CSS, que habrás utilizado sin conocer su nombre al aplicar un selector :hover.

ul {
list-style: none;
}
ul li {
padding: 8px 10px;
color: #111;
}		
ul li:nth-child(odd) { /* filas pares */
background-color: #f5f5f5;
}
ul li:nth-child(even) { /* filas impares */
background-color: #e5e5e5;
}

Personalizar una lista de descripción

Para finalizar vamos a personalizar una lista descriptiva, la gran olvidada.

Imagina que quieres ofrecer una serie de información a tus usuarios con un formato de preguntas y respuestas. Ahora que ya sabes de su existencia, verás que este tipo de lista es el más adecuado.

¿Cuántos tipos de listas HTML hay?

3 tipos de listas.

¿Cuántas se pueden personalizar?

Los 3 tipos.

¿Cómo personalizar listas HTML?

Te lo explico en este artículo.

.preg-resp {
counter-reset: pregunta-respuesta;
}
.preg-resp dt {
position: relative;
font-size:20px;
font-weight:bold;
padding: 4px 0 10px 0;
}
.preg-resp dt:before {
content: counter(pregunta-respuesta)"\BB";
counter-increment: pregunta-respuesta;
position: absolute;
left: 0;
top: 0;
color:white;
background:orangered;
font-size:50px;
line-height:50px;
font-weight:bold;
padding:5px 10px;
}
.preg-resp dd {
font-size:16px;
margin: 0 0 25px 0;	
}	
.preg-resp dt, .preg-resp dd {
padding-left: 80px;
line-height: 20px;	
}

Como habrás comprobado, personalizar listas HTML con CSS no requiere demasiados conocimientos de programación, ni que te dediques al diseño web profesional. Solo es una forma más de personalizar tu página web conociendo unos pocos conceptos.

Gracias por leer hasta aquí, y recuerda que si te ha resultado útil este tutorial para personalizar listas HTML, compártelo en las redes sociales para motivarme a escribir alguno más 😉

About the Author

Ernesto Barrachina

Facebook Twitter Google+

Me dedico al diseño web Valencia y tengo pasión por las herramientas de diseño gráfico, así como por compartir tips de diseño web en forma de consejos y tutoriales "para todos los públicos".