Tipos de Viñetas en Listas con CSS

En entradas anteriores publicamos el concepto y la creación de Listas Ordenadas y desordenadas en HTML, ademas de eso vimos como dar diferentes estilos a las viñetas, vimos las viñetas cuadradas y circulares en listas desordenadas, en cambio en las listas Ordenadas, las viñetas se caracterizan por variar entre números y letras. 

En esta entrada aprenderemos a cambiar las viñetas de nuestras Listas, pero no las cambiaremos con atributos HTML, usaremos los estilos CSS para hacer estos cambios.

Tipos de Viñetas en Listas Ordenadas:

Código HTML de la lista:
<ol> <li>primer elemento</li> <li>segundo elemento</li> <li>tercer elemento</li> <li>cuarto elemento</li> <li>quinto elemento</li> </ol>

El resultado que este código tendrá es el siguiente:

1. primer elemento
2. segundo elemento
3. tercer elemento
4. cuarto elemento
5. quinto elemento

Ahora aplicando CSS, cambiaremos las viñetas numéricas por otros estilos, para hacer esto aplicaremos la propiedad: list-style-type

Viñetas de Números Decimales:

Estas viñetas se consiguen aplicando:

list-style-type:decimal;

1. primer elemento
2. segundo elemento
3. tercer elemento
4. cuarto elemento
5. quinto elemento

Como notamos al aplicar el estilo, list-style-type:decimal; es igual al valor por defecto de las listas Ordenadas como podemos apreciar, existe otro viñeta con números decimales, en las cuales se contabiliza el numero cero, esto lo podemos hacer aplicando:

list-style-type:decimal-leading-zero;

1. primer elemento
2. segundo elemento
3. tercer elemento
4. cuarto elemento
5. quinto elemento

Viñetas de Números Romanos:

Estas viñetas se consiguen aplicando:

list-style-type:upper-roman;

1. primer elemento
2. segundo elemento
3. tercer elemento
4. cuarto elemento
5. quinto elemento

Además de estos, podemos poner los números Romanos en minúscula esto lo obtenemos aplicando:

list-style-type:lower-roman;

1. primer elemento
2. segundo elemento
3. tercer elemento
4. cuarto elemento
5. quinto elemento

Viñetas de Números Armenios:

Aunque este tipo de viñetas no es muy usado, es importante tenerlo en cuenta, las viñetas están dadas por los números armenios, para obtener esto se aplica:

list-style-type:armenian;

1. primer elemento
2. segundo elemento
3. tercer elemento
4. cuarto elemento
5. quinto elemento

Viñetas de Números Georgianos:

Al igual que los Números Armenios, Los números georgianos también se pueden usar como viñetas en nuestras Listas, esto lo podemos hacer mediante:

list-style-type:georgian;

1. primer elemento
2. segundo elemento
3. tercer elemento
4. cuarto elemento
5. quinto elemento

Viñetas Alfabéticas:

Como ya venimos viendo en nuestras Listas Ordenadas podemos aplicar un orden en nuestras viñetas en números, pero también podemos aplicar un orden alfabético. Esto lo hacemos aplicando:

list-style-type:upper-latin; 

1. primer elemento
2. segundo elemento
3. tercer elemento
4. cuarto elemento
5. quinto elemento

Con upper-latin, las Viñetas alfabéticas se muestran en letras mayúsculas, para que estos sean minúsculas aplicamos:

list-style-type:lower-latin; 

1. primer elemento
2. segundo elemento
3. tercer elemento
4. cuarto elemento
5. quinto elemento

Viñetas con el Alfabeto griego:

El alfabeto griego también puede estar presenta en las Viñetas que podemos colocar a nuestras Listas, esto lo obtenemos mediante:

list-style-type: lower-greek; 

1. primer elemento
2. segundo elemento
3. tercer elemento
4. cuarto elemento
5. quinto elemento

Tipos de viñetas en Listas Desordenadas:

Código HTML de la lista:

<ul> <li>primer elemento</li> <li>segundo elemento</li> <li>tercer elemento</li> <li>cuarto elemento</li> <li>quinto elemento</li> </ul>

El resultado que este código tendrá sera el siguiente:

• primer elemento
• segundo elemento
• tercer elemento
• cuarto elemento
• quinto elemento

Como es notable las listas desordenadas se caracterizan por no contener un orden entre sus elementos, como vemos en el resultado. La viñeta por defecto que se genera es la de un circulo relleno de color negro ahora para cambiar el estilo de viñeta también aplicamos la propiedad: list-style-type

Viñetas Circulares en Listas Desordenadas:

Para que nuestras viñetas tengan un estilo circular debemos aplicar:

list-style-type: disc;

• primer elemento
• segundo elemento
• tercer elemento
• cuarto elemento
• quinto elemento

Al aplicar list-style-type: disc; es notorio que nos da el mismo resultado que las viñetas por defecto de la lista, pero podemos obtner otro tipo de viñeta circular, esto mediante:

list-style-type: circle;

• primer elemento
• segundo elemento
• tercer elemento
• cuarto elemento
• quinto elemento

El resultado al aplicar list-style-type: circle; son círculos vacíos como vemos en el ejemplo.

Viñetas Cuadradas en Listas Desordenadas:

Otra viñeta muy peculiar en las Listas desordenadas son las viñetas cuadradas, las cuales podemos obtener mediante:

list-style-type: square;

• primer elemento
• segundo elemento
• tercer elemento
• cuarto elemento
• quinto elemento

OJO: Tener en cuenta que Los estilos de Viñetas que Vimos en las Listas ordenadas también pueden ser usados en las Listas desordenadas o Viceversa, sin ninguna complicación, el problema es que a la hora de trabajar con listas es bueno recordar el propósito de cada una de estas, es por eso que separamos los estilos por definiciones teóricas de las Listas. Espero Comprendan la idea.

Espero que les aya servido esta recopilación de los Tipos de Viñetas que podemos Aplicar a nuestras listas por medio de CSS.

Cualquier duda o Aporte hacerlo por comentarios. Gracias por su Tiempo!