Ejemplos de Listas Numeradas En HTML
Las listas numeradas, también conocidas como listas ordenadas, son una parte fundamental de la estructura de una página web cuando se desea presentar una serie de elementos en un orden específico. En este artículo, aprenderás cómo crear listas numeradas en HTML y cómo personalizarlas.
Contenido del artículo
- • ¿Qué es una lista numerada en HTML?
- • Crear una lista numerada en HTML
- • Personalizar una lista numerada en HTML
- • Aplicar estilos CSS a listas numeradas
- • Cambiar el tamaño y color de fuente
- • Poner un ícono a una lista en HTML
- • Crear una lista horizontal
- • Cambiar el estilo de los números en una lista
¿Qué es una lista numerada en HTML?
Una lista numerada en HTML es una lista ordenada en la que cada elemento está numerado automáticamente según el orden en el que aparece en la lista. Se utiliza la etiqueta <ol> para crear una lista numerada y la etiqueta <li> para agregar elementos a la lista.
Crear una lista numerada en HTML
Aquí tienes un ejemplo básico de cómo crear una lista numerada en HTML. Para ello utilizaremos las etiquetas <ol><li></li></ol>:
<html><head><title>Listas numeradas en HTML</title></head><body><h1>Ejemplo de lista numerada</h1><ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li></ol></body></html>
Personalizar una lista numerada en HTML
Puedes personalizar la numeración de la lista utilizando el atributo type en la etiqueta <ol>. Los valores posibles para el atributo type incluyen:
1(números arábigos, por defecto)A(letras mayúsculas)a(letras minúsculas)I(números romanos en mayúsculas)i(números romanos en minúsculas)
Aquí tienes un ejemplo de cómo personalizar la numeración de una lista:
<html><head><title>Listas numeradas en HTML</title></head><body><h1>Ejemplo de lista numerada con letras mayúsculas</h1><ol type="A"> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li></ol></body></html>
Aplicar estilos CSS a listas numeradas
Para mejorar aún más la apariencia de tus listas numeradas, puedes utilizar CSS. Con CSS, puedes modificar el estilo, color, tamaño y otros aspectos de la lista y sus elementos. A continuación, te mostramos ejemplos de cómo aplicar estilos a las listas numeradas en HTML.
Cambiar el tamaño y color de fuente
En este ejemplo cambiamos el color de fuente a rojo y el tamaño a 24 pixeles:
<html><head><title>Listas numeradas en HTML</title><style> ol.custom-list { font-size: 24px; color: red; }</style></head><body><h2>Ejemplo de lista numerada con estilos </h2><ol class="custom-list"> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li></ol></body></html>
Poner un ícono a una lista en HTML
En este ejemplo se quita el estilo de lista predeterminado (viñetas) y se agrega un ícono utilizando CSS. La imagen se establece como fondo y se posiciona a la izquierda de cada elemento de la lista. No olvides guardar "icono.png" en la misma carpeta que el HTML.
<html><head><style>/* Estilo personalizado para la lista */ul.custom-bullet { list-style-type: none; /* Quitar las viñetas predeterminadas */ padding: 0; margin: 0;}/* Estilo personalizado para los elementos de la lista */ul.custom-bullet li { padding-left: 30px; /* Espacio para la viñeta personalizada */ background-image: url('icono.png'); /* Ícono como viñeta */ background-repeat: no-repeat; /* Evitar que la imagen se repita */ background-position: 0 5px; /* Posición de la imagen en el elemento */}</style></head><body><h2>Lista personalizada con ícono como viñeta</h2><ul class="custom-bullet"> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li></ul></body></html>
Crear una lista horizontal
Se puede crear listas horizontales con HTML. Para ello se cambia la propiedad de visualización de los elementos de la lista a "inline". Esto hace que los elementos de la lista se muestren uno al lado del otro, en lugar de uno debajo del otro. Aquí el ejemplo:
<html><head><style>/* Estilo personalizado para la lista */ul.horizontal-list { list-style-type: none; /* Quitar las viñetas predeterminadas */ padding: 0; margin: 0;}/* Estilo personalizado para los elementos de la lista */ul.horizontal-list li { display: inline; /* Mostrar elementos en línea (uno al lado del otro) */ margin-right: 15px; /* Espacio a la derecha de cada elemento */}</style></head><body><h2>Lista horizontal</h2><ul class="horizontal-list"> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li></ul></body></html>
Cambiar el estilo de los números en una lista
Para cambiar el estilo de los números en una lista en el siguiente ejemplo se establece un contador personalizado llamado "list-counter" y se modifica su estilo para cambiar el tamaño de fuente, el peso y el color de los números.
<html><head><style>/* Estilo personalizado para la lista numerada */ol.custom-numbering { counter-reset: list-counter; /* Iniciar contador personalizado */}/* Estilo personalizado para los elementos de la lista */ol.custom-numbering li { list-style-type: none; /* Quitar los números predeterminados */ position: relative; /* Establecer posición relativa para posicionar números personalizados */ padding-left: 30px; /* Espacio para los números personalizados */}/* Estilo personalizado para los números */ol.custom-numbering li:before { counter-increment: list-counter; /* Incrementar contador personalizado */ content: counter(list-counter) '.'; /* Mostrar contador personalizado seguido de un punto */ position: absolute; /* Posicionar números absolutamente */ left: 0; /* Alinear números a la izquierda */ font-size: 18px; /* Tamaño de fuente de los números */ font-weight: bold; /* Peso de fuente de los números */ color: blue; /* Color de los números */}</style></head><body><h2>Lista numerada personalizada</h2><ol class="custom-numbering"> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li></ol></body></html>
¿Cómo citar? Pichardo, A. & Del Moral, M. (s.f.). Ejemplos de Listas Numeradas En HTML.Ejemplo de. Recuperado el 13 de Junio de 2024 de https://www.ejemplode.com/17-html/31-ejemplo_de_listas_numeradas_en_html.html
Últimos 10 comentarios