Personalizar listas HTML en los posts de tu blog

Tutorial para personalizar listas HTML y hacer que sean diferentes a las de los demás

Ernesto BarrachinaDiseño webDeja tu comentario

¿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ó! 🙂

Si quieres aprender a cambiar el estilo de tus listas y personalizar las viñetas, puntos, marcadores (o como sea que los llames) y números de listas ordenadas, desordenadas y descriptivas, te invito a que leas este artículo.

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:

  • Unordened list o lista desordenada.
  • Description list o lista descriptiva.
  • Ordened list o lista ordenada.

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:

  1. Desordenadas
  2. Ordenadas
  3. Descriptivas

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:

Lista ordenada
Esta lista tiene sus elementos ordenados por algún motivo.
Lista desordenada
Esta lista contiene elementos sin orden alguno.
Lista de definición
Este listado establece un término y una definición.

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.

Pero todo hay que decirlo: ¿hay algo más soso que una lista sin un estilo que la diferencie del resto del contenido? 🙁

Las listas sin personalizar no se diferencian bien del contenido

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

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

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…

Lo importante es que te servirá de inspiración para personalizar listas de otras formas que seguramente se te irán ocurriendo por el camino.

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:

  1. Primero tocará quitar el estilo de la lista con «list-style: none;» (que quitará el puntito).
  2. El segundo paso es añadir el mismo marcador o uno similar a los elementos de lista, pero en este caso personalizado.
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:

  • Elemento de lista con el marcador de otro color

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.

La tabla ASCII contienen los números que corresponden a caracteres especiales HTML

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;
}
  • Y tendremos un list item con el marcador en grande.

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!

Puedes personalizar listas con los símbolos de esta lista UTF-8

No obstante, que se muestren en color o no dependerá del navegador y del dispositivo.

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;
}
  • Item de lista.

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.

  • Item de lista.

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

¡No puedes perderte este tutorial con el que personalizar las listas HTML de tu página web o blog! Cuéntalo en las redes

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>
  1. Primer elemento de lista
  2. 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>
  1. Primer elemento de lista
  2. Segundo elemento de lista

La listas con estilo personalizado mejoran la comprensión

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;
}
  1. Lista personalizada con número y separador coloreados

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.
Te dejo la configuración que he usado, pero piensa que si usas una plantilla te tocará sobrescribir los estilos asignados y ajustar un poquito el CSS.
.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 😉

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

¿Necesitas un Diseño Web Valencia?

Anterior »

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado.

Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de EBWEB) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.