28-Listas en CSS: Organiza Contenido con Estilo 📋

---

Listas en CSS

• Listas No Ordenadas
• Listas Ordenadas
• Listas HTML y Propiedades de la Lista en CSS
• Diferentes Marcadores de Artículos
• Una Imagen como Marcador de Artículo de la Lista
• Posición de una Lista
• Eliminar Ajustes por Defecto
• Lista - Propiedad de Mano
• Lista de Estilo con Colores
• Todas las Propiedades de la Lista en CSS

---

Listas No Ordenadas

En HTML, una lista no ordenada se utiliza para mostrar elementos en un formato de lista que no sigue ningún orden específico. Los elementos de esta lista están precedidos por un marcador o viñeta, en lugar de números o letras. Esta lista se define utilizando la etiqueta <ul> (unordered list) y cada elemento de la lista se incluye dentro de una etiqueta <li> (list item).

Ejemplo básico de una lista no ordenada:

Para crear una lista no ordenada básica en HTML, usa el siguiente código:

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>
        

En este ejemplo, <ul> inicia la lista no ordenada, y cada elemento individual de la lista está rodeado por <li>. Este formato puede aplicarse para enumerar cualquier conjunto de elementos sin jerarquía o importancia relativa entre ellos.

Propiedades CSS para Listas No Ordenadas:

Usando CSS, se pueden personalizar los marcadores de la lista con la propiedad list-style-type. Aquí algunos valores comunes:

• disc: Marcador circular (predeterminado).
• circle: Marcador de círculo vacío.
• square: Marcador cuadrado.
• none: Sin marcador.

Para cambiar el estilo de la lista no ordenada:

<ul style="list-style-type: square;">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>
        

Este ejemplo establece un marcador cuadrado para cada elemento de la lista.

Ejemplos Visuales

Ejemplo de Lista No Ordenada Predeterminada

• Elemento 1
• Elemento 2
• Elemento 3

Ejemplo de Lista No Ordenada con Marcadores Cuadrados

• Elemento 1
• Elemento 2
• Elemento 3

Ejemplo de Lista No Ordenada Sin Marcadores

• Elemento 1
• Elemento 2
• Elemento 3

---

Listas Ordenadas

En HTML, una lista ordenada se utiliza para mostrar elementos de una lista en un orden específico, numerados automáticamente. Este tipo de lista es ideal cuando el orden o la secuencia de los elementos tiene relevancia. Para crear una lista ordenada, se emplea la etiqueta <ol> (ordered list), y cada elemento de la lista se incluye dentro de la etiqueta <li> (list item).

Ejemplo básico de una lista ordenada:

El siguiente código HTML muestra cómo crear una lista ordenada:

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
</ol>
        

En este ejemplo, la lista se inicia con la etiqueta <ol>, que genera automáticamente los números para cada <li>. Esto es útil para pasos en secuencia o cuando el orden de los elementos tiene importancia.

Propiedades CSS para Listas Ordenadas:

Con CSS, podemos personalizar el tipo de numeración en la lista ordenada utilizando la propiedad list-style-type. Algunos valores comunes incluyen:

• decimal: Números (predeterminado).
• lower-alpha: Letras minúsculas (a, b, c).
• upper-alpha: Letras mayúsculas (A, B, C).
• lower-roman: Números romanos en minúscula (i, ii, iii).
• upper-roman: Números romanos en mayúscula (I, II, III).

Ejemplo de cómo aplicar un estilo de numeración alternativo:

<ol style="list-style-type: upper-alpha;">
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
</ol>
        

En este caso, la lista utiliza letras mayúsculas como estilo de numeración.

Ejemplos Visuales

Ejemplo de Lista Ordenada Predeterminada

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

Ejemplo de Lista Ordenada con Letras Mayúsculas

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

Ejemplo de Lista Ordenada con Números Romanos

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

---

Listas HTML y Propiedades de la Lista en CSS

Las listas en HTML se utilizan para organizar contenido en secuencias o grupos, y existen dos tipos principales: listas no ordenadas y listas ordenadas. Las listas se complementan en HTML mediante varias propiedades en CSS, que permiten personalizar su apariencia.

Tipos de Listas en HTML:

• Lista No Ordenada (<ul>): Muestra elementos con viñetas. Ideal para elementos sin jerarquía.
• Lista Ordenada (<ol>): Muestra elementos numerados. Útil cuando el orden es importante.
• Lista de Definición (<dl>): Utilizada para listas de términos y definiciones, con sus subelementos <dt> (término) y <dd> (definición).

Propiedades CSS para Personalizar Listas:

Las propiedades de CSS más comunes para ajustar las listas en HTML son:

• list-style-type: Define el tipo de marcador (círculos, números, letras, etc.) de los elementos de la lista.
• list-style-image: Permite usar una imagen como marcador para cada elemento de la lista.
• list-style-position: Establece la posición de los marcadores (inside o outside).
• list-style: Es una propiedad abreviada que permite aplicar varias configuraciones de lista en una sola línea.

A continuación se muestra un ejemplo de cómo aplicar estas propiedades en CSS:

ul.custom-list {
    list-style-type: square;
    list-style-image: url('marcador.png');
    list-style-position: inside;
}
        

En este ejemplo, se aplica una lista no ordenada con marcadores cuadrados, un marcador de imagen personalizado y los marcadores colocados dentro del contenido.

Ejemplos Visuales

Ejemplo de Lista No Ordenada con Marcadores Cuadrados

• Elemento 1
• Elemento 2
• Elemento 3

Ejemplo de Lista con Imagen como Marcador

• Elemento 1
• Elemento 2
• Elemento 3

Ejemplo de Lista con Marcadores en el Interior

• Elemento 1
• Elemento 2
• Elemento 3

---

Diferentes Marcadores de Artículos

Los marcadores de artículos en una lista no ordenada (<ul>) pueden personalizarse usando CSS para cambiar el estilo de las viñetas que preceden a cada elemento. HTML ofrece varios tipos de marcadores predeterminados y permite personalizarlos mediante la propiedad list-style-type.

Tipos Comunes de Marcadores:

• disc: Un marcador circular sólido, que es el estilo predeterminado en la mayoría de los navegadores.
• circle: Un marcador circular hueco.
• square: Un marcador cuadrado sólido.
• none: Sin marcador, útil cuando solo se desea una lista sin viñetas.

Aplicación de list-style-type en CSS:

Para cambiar el tipo de marcador de una lista, utiliza la propiedad list-style-type en el CSS de la lista:

ul.lista-circle {
    list-style-type: circle;
}

ul.lista-square {
    list-style-type: square;
}

ul.lista-none {
    list-style-type: none;
}
        

Este código CSS permite crear listas con diferentes estilos de marcador usando clases como lista-circle, lista-square, o lista-none.

Ejemplos Visuales

Ejemplo de Lista con Marcadores de Círculo Hueco

• Elemento 1
• Elemento 2
• Elemento 3

Ejemplo de Lista con Marcadores Cuadrados

• Elemento 1
• Elemento 2
• Elemento 3

Ejemplo de Lista Sin Marcadores

• Elemento 1
• Elemento 2
• Elemento 3

---

Una Imagen como Marcador de Artículo de la Lista

En CSS, es posible personalizar los marcadores de lista utilizando imágenes en lugar de los marcadores predeterminados. Esto permite agregar un estilo más visual y único a la lista, lo cual es ideal para ciertos tipos de contenido o diseño. Esta personalización se logra usando la propiedad list-style-image en la lista no ordenada (<ul>).

Cómo Usar list-style-image en CSS:

Para definir una imagen como marcador, añade la propiedad list-style-image y especifica la URL de la imagen. A continuación se muestra un ejemplo de cómo aplicar esto en CSS:

ul.lista-con-imagen {
    list-style-image: url('https://cdn.pixabay.com/photo/2021/03/04/10/11/asian-6067473_1280.jpg');
}
        

En este ejemplo, cada elemento de la lista usará la imagen 'https://cdn.pixabay.com/photo/2021/03/04/10/11/asian-6067473_1280.jpg' como marcador en lugar de los estilos predeterminados.

Importante:

Para que la imagen funcione como marcador, es preferible que sea pequeña y tenga un diseño simple, de lo contrario, podría hacer que la lista se vea desordenada. Además, la URL de la imagen debe estar correctamente configurada para mostrarse correctamente en el navegador.

Ejemplos Visuales

Ejemplo de Lista con Imagen como Marcador

En el siguiente ejemplo, se muestra una lista donde cada elemento tiene una imagen personalizada como marcador.

• Elemento 1
• Elemento 2
• Elemento 3

Alternativa para Navegadores sin Soporte

Si algunos navegadores no muestran correctamente la imagen como marcador, puedes definir una imagen como fondo de cada elemento de lista <li> usando background-image y ajustando background-position:

ul.lista-con-imagen li {
    background-image: url('https://via.placeholder.com/20');
    background-repeat: no-repeat;
    background-position: 0 5px; /* Ajusta la posición de la imagen */
    padding-left: 25px; /* Espacio para la imagen */
    background-size: 20px 20px; /* Ajusta el tamaño de la imagen a 20px */
}
        

---

Posición de una Lista

En CSS, se puede ajustar la posición de los marcadores de una lista mediante la propiedad list-style-position. Esta propiedad determina si el marcador (ya sea viñeta o número) se coloca dentro o fuera del bloque de contenido del elemento de lista.

Valores de list-style-position:

Existen dos valores principales para esta propiedad:

• outside: El marcador se coloca fuera del bloque de contenido. Este es el valor predeterminado, y la viñeta o número aparece alineado al borde izquierdo de la lista.
• inside: El marcador se coloca dentro del bloque de contenido, lo que hace que se alinee con el texto. Este valor puede ser útil cuando se desea que el marcador esté alineado con el contenido de la lista.

Ejemplo de Uso:

En el siguiente código, se muestran ejemplos de listas con los valores inside y outside aplicados:

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

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

En este ejemplo, las listas se muestran con los dos estilos de posición. Observa cómo el marcador cambia de lugar respecto al contenido del elemento de lista dependiendo del valor aplicado.

Ejemplos Visuales

Ejemplo de Lista con Posición outside (Predeterminado)

• Elemento 1
• Elemento 2
• Elemento 3

Ejemplo de Lista con Posición inside

• Elemento 1
• Elemento 2
• Elemento 3

---

Eliminar Ajustes por Defecto

Al trabajar con listas en HTML, es posible que los estilos predeterminados no se ajusten al diseño que necesitas. En este caso, puedes **eliminar los ajustes de estilo por defecto** aplicando CSS para crear un aspecto más personalizado.

Propiedades para Eliminar Estilos de Lista

Para **quitar los estilos predeterminados** de una lista en HTML, utiliza las siguientes propiedades:

• list-style-type: none; – Elimina los marcadores de la lista (viñetas o números).
• padding: 0; – Remueve el espacio de relleno que aparece de forma predeterminada a la izquierda de la lista.
• margin: 0; – Remueve el margen de la lista para que se alinee con el contenido circundante.

Ejemplo de Eliminación de Estilos

En el siguiente ejemplo, se muestra cómo **eliminar los estilos predeterminados** para una lista no ordenada:

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

Este estilo es útil cuando necesitas integrar listas en diseños personalizados, como en barras de navegación o menús, eliminando los elementos visuales predeterminados de HTML.

Ejemplos Visuales

Ejemplo de Lista Sin Estilos Predeterminados

• Elemento 1
• Elemento 2
• Elemento 3

---

Lista - Propiedad de Mano

La propiedad list-style-position en CSS controla la posición de los marcadores de una lista en relación con el contenido de los elementos de lista (<li>). Esto es útil cuando deseas **ajustar el espacio entre los marcadores y el texto** de la lista para mejorar la legibilidad o personalizar el diseño.

Valores de list-style-position:

Existen dos valores principales para esta propiedad:

• outside: Coloca el marcador fuera del contenido del elemento. Este es el valor predeterminado.
• inside: Coloca el marcador dentro del área del contenido, alineado con el texto de la lista.

Ejemplo de Uso de list-style-position:

En el siguiente ejemplo, se utiliza la propiedad list-style-position para mostrar cómo cambia la posición del marcador:

ul.posicion-externa {
    list-style-position: outside;
}

ul.posicion-interna {
    list-style-position: inside;
}
        

En el ejemplo anterior, las clases .posicion-externa y .posicion-interna definen la posición del marcador en relación con el contenido de la lista.

Ejemplos Visuales

Ejemplo de Lista con Marcadores Externos (Outside)

• Elemento 1
• Elemento 2
• Elemento 3

Ejemplo de Lista con Marcadores Internos (Inside)

• Elemento 1
• Elemento 2
• Elemento 3

---

Lista de Estilo con Colores

En HTML y CSS, puedes aplicar colores personalizados a los marcadores de las listas para mejorar el diseño visual y destacar información específica. Esto se hace mediante la propiedad CSS color, que afecta tanto al texto como al marcador de lista.

Ejemplo Básico de Colores en Listas:

Para aplicar color a los elementos de una lista no ordenada:

ul.lista-color {
    color: #2a9d8f; /* Color personalizado para texto y marcadores */
}
        

En este ejemplo, la clase .lista-color aplica un color verde azulado a los elementos de lista, incluyendo tanto el marcador como el texto.

Uso de Colores Diferentes para Cada Elemento:

Si quieres aplicar un color específico a cada elemento de la lista, puedes hacerlo con la propiedad color en cada elemento <li>:

ul.lista-multicolor li:nth-child(1) {
    color: #e63946;
}

ul.lista-multicolor li:nth-child(2) {
    color: #457b9d;
}

ul.lista-multicolor li:nth-child(3) {
    color: #f4a261;
}
        

Con este método, cada elemento de la lista tiene un color distinto, lo que permite personalizar cada ítem según tus necesidades.

Ejemplos Visuales

Lista con Color Personalizado

• Elemento 1
• Elemento 2
• Elemento 3

Lista Multicolor

• Elemento 1
• Elemento 2
• Elemento 3

---

Todas las Propiedades de la Lista en CSS

CSS permite personalizar diversos aspectos de las listas, incluyendo su estilo, posición, y marcador. A continuación se describen las principales propiedades que puedes aplicar a una lista:

• list-style-type: Define el tipo de marcador (disc, circle, square, decimal, etc.).
• list-style-image: Permite utilizar una imagen personalizada como marcador en lugar de los estilos predeterminados.
• list-style-position: Controla la posición del marcador con valores como inside o outside, afectando si el marcador está alineado con el texto o al margen izquierdo.
• list-style: Una propiedad abreviada que permite definir list-style-type, list-style-image y list-style-position en una sola línea.

Ejemplo Combinado de Propiedades CSS para Listas:

Este ejemplo aplica múltiples propiedades de lista a la vez para lograr un estilo personalizado:

ul.lista-combinada {
    list-style-type: square; /* Marcador en forma de cuadrado */
    list-style-image: url('icono.png'); /* Imagen como marcador */
    list-style-position: inside; /* Marcador alineado con el texto */
}
        

Al utilizar estas propiedades, puedes crear listas visualmente atractivas y acordes al diseño de tu sitio web.

Ejemplos Visuales de Propiedades de Lista en CSS

Propiedad CSS	Descripción	Ejemplo de Uso
list-style-type	Define el tipo de marcador en la lista (disc, circle, square, decimal, etc.).	list-style-type: square;
list-style-image	Permite usar una imagen como marcador de la lista en lugar del estilo predeterminado.	list-style-image: url('icono.png');
list-style-position	Determina si el marcador está alineado con el texto (inside) o fuera (outside).	list-style-position: inside;
list-style	Una propiedad abreviada que permite definir list-style-type, list-style-image, y list-style-position en una sola línea.	list-style: square url('icono.png') inside;

---

Ir al índice

---