Al crear listas HTML mediante las etiquetas <ol>
o <ul>
, dichas etiquetas poseen propiedades CSS específicas para alterar el estilo o características de las marcas o viñetas que se crean a la izquierda de los items de la lista, mediante la etiqueta HTML <li>
.
Por ejemplo, a continuación tenemos las propiedades principales de las listas:
Propiedad | Valor | Significado |
---|---|---|
list-style-image |
none | url( image.png) |
Indica una imagen para usar como viñeta de ítem. |
list-style-position |
inside | outside |
Establece o elimina indentación de ítems sobre la lista. |
list-style-type |
disc | decimal | type | none |
Establece el tipo de viñeta que se va a utilizar. |
list-style-image
A través de la propiedad list-style-image
podemos indicar la URL de una imagen para utilizarla a modo de icono o viñeta en cada ítem de la lista, es decir, en cada ítem <li>
. Esta propiedad, por defecto, tiene el valor none, o lo que es lo mismo, no establece ninguna imagen por cada ítem de la lista.
li {
list-style-image: url("https://manz.dev/assets/stickers/batmanz.png");
}
<ul>
<li>Primera opción</li>
<li>Segunda opción</li>
<li>Tercera opción</li>
</ul>
Un detalle a tener en cuenta, es que esta propiedad se puede usar tanto en los ítems
<li>
de cada punto de la lista, como en sus contenedores<ul>
o<ol>
.
list-style-position
Por otro lado, la propiedad list-style-position
permite establecer una indentación a todos los ítems de la lista, estableciendolos desplazados a la derecha (inside), el lado interior de la lista, o sin desplazar (outside), el lado exterior de la lista, opción por defecto.
ul {
list-style-image: url("https://manz.dev/assets/stickers/batmanz.png");
list-style-position: inside;
}
<ul>
<li>Primera opción</li>
<li>Segunda opción</li>
<li>Tercera opción</li>
</ul>
list-style-type
La tercera propiedad, list-style-type
nos permite indicar que tipo de viñetas tendrán las listas (en el caso de no estar utilizando ningun imagen).
Se establecen varios grupos que veremos en el siguiente apartado. Cada uno de ellos se puede utilizar con cualquier tipo de lista, pero generalmente, se recomienda tener en cuenta el tipo de lista. Por ejemplo, si tenemos una lista <ul>
(no ordenada), aunque es posible, quizás una viñeta numerada no tenga mucho sentido.
Por defecto, las listas <ul>
(no numeradas) utilizan la opción disc
por defecto, mientras que las listas <ol>
(numeradas) utilizan la opción decimal
por defecto, mostrando una lista numérica decimal.
A través de la propiedad list-style-type
que hemos mencionado podemos cambiar el tipo de viñeta que utilizaremos en una lista a nuestro antojo. Conviene conocer todos los tipos que existen, que aunque algunos son muy sencillos, tenemos muchos otros que dependen de los idiomas, sistemas numéricos u otros aspectos.
Este primer grupo, especialmente indicado para listas sin orden <ul>
, por ejemplo, donde se utilizará un símbolo como viñeta que no representa ningún orden específico:
Si lo que queremos es establecer una lista numerada <ol>
, los valores recomendados deberían ser uno de los siguientes:
Ten en cuenta que en algunos navegadores o sistemas operativos puede que los apartados anteriores no se muestren correctamente, ya que los está generando a partir de la compatibilidad del navegador utilizado.
En el caso de querer utilizar una lista numerada <ol>
, pero querer "numerarla" con letras, es posible con alguna de estas posibilidades:
Dentro de las listas complejas podemos encontrar un primer grupo japonés, un segundo grupo coreano y un tercer grupo chino:
::marker
Al utilizar listas, puedes utilizar el pseudoelemento ::marker
para hacer referencia a la viñeta en cuestión. De esta forma, podrás cambiar los estilos de dicha viñeta o retocarlos. Observa el siguiente ejemplo:
ul {
list-style-type: upper-roman;
}
li::marker {
color: red;
}
<ul>
<li>Primera opción</li>
<li>Segunda opción</li>
<li>Tercera opción</li>
</ul>
Ten en cuenta que no es posible utilizar cualquier propiedad en este pseudoelemento, y solo es posible utilizar algunas propiedades como
color
,content
u otras.
list-style
Como en la mayoría de propiedades de CSS, existe una propiedad "shorthand" de atajo que nos permite indicar los valores anteriores en una sola propiedad. Para ello, utilizaremos list-style
con el orden aconsejado siguiente:
li {
/* list-style: <type> <position> <image> */
list-style: circle inside none;
}
<ul>
<li>Primera opción</li>
<li>Segunda opción</li>
<li>Tercera opción</li>
</ul>
Observa que en primer lugar utilizaremos el valor de la propiedad list-style-type
, en segundo lugar el valor de la propiedad list-style-position
y en tercer y último lugar, el valor de la propiedad list-style-image
. En caso de no necesitar indicar alguno de ellos, simplemente podemos omitirlo.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev