Introducción
Las listas se comportan como cualquier otro texto en su mayor parte, pero hay algunas propiedades CSS específicas de las listas que debes conocer y algunas recomendaciones a tener en cuenta. Este artículo te lo explica.
Un ejemplo sencillo de lista
Para empezar, veamos un ejemplo sencillo de una lista. A lo largo de esta unidad veremos listas no ordenadas, listas ordenadas y listas de descripciones. Todas tienen características de estilo similares, pero algunas propiedades son particulares del tipo de lista.
Utilizaremos el siguiente código HTML:
<h2>Ingredienetes (lista no ordenada)</h2> <ul> <li>Hummus</li> <li>Pan pita</li> <li>Ensalada verde</li> <li>Queso halloumi</li> </ul> <h2>Ingredientes (lista descriptiva)</h2> <dl> <dt>Hummus</dt> <dd>Una salsa espesa hecha generalmente de garbanzos, tahini, jugo de limón, sal, ajo y otros ingredientes.</dd> <dt>Pan pita</dt> <dd>Un pan plano suave y ligeramente leudado.</dd> <dt>Queso halloumi</dt> <dd>Un queso semiduro, sin madurar, en salmuera con un punto de fusión superior al habitual, generalmente hecho de leche de cabra/oveja.</dd> <dt>Ensalada verde</dt> <dd>Esa cosa verde y saludable que muchos de nosotros solo usamos para adornar kebabs.</dd> </dl> <h2>Receta (lista ordenada)</h2> <ol> <li>Tostar el pan pita, dejar enfriar y cortar por el borde.</li> <li>Freír el queso halloumi en una sartén antiadherente poco profunda hasta que esté dorado por ambos lados.</li> <li>Lavar y picar la ensalada.</li> <li>Rellenar el pan pita con ensalada, hummus y queso halloumi frito.</li> </ol>
Los valores predeterminados son los siguientes:
- Los elementos
<ul>y<ol>tienen unmarginsuperior e inferior de16px(1em) y unpadding-leftde40px(2.5em.) - Los elementos de lista
<li>no tienen valores de espacio predeterminados. - El elemento
<dl>tiene unmarginsuperior e inferior de16px(1em), pero no tiene ningúnpaddingestablecido. - Los elementos
<dd>tienen unmargin-leftde40px(2.5em). - Los elementos de referencia
<p>que hemos incluido tienen unmarginsuperior e inferior de16px(1em), al igual que los diferentes tipos de lista.
Ejercicio propuesto: Listas con los estilos por defecto
Crea una página web con la lista del ejemplo anterior y observa el resultado en tu navegador. Se debería mostrar con los estilos por defecto, ya que no estamos utilizando CSS todavía.
Deberías obtener un resultado parecido al siguiente:
Estilos básicos de las listas
Al crear listas, es necesario ajustar el diseño para que mantengan los mismos espaciados verticales (a veces denominados ritmos verticales) que el resto de elementos circundantes, como párrafos e imágenes.
El CSS que vamos a utilizar para aplicar estilo al texto y al espaciado de texto es el siguiente:
/* Estilos generales */
html {
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
}
h2 {
font-size: 2rem;
}
ul, ol, dl, p {
font-size: 1.5rem;
}
li, p {
line-height: 1.5;
}
/* Estilos para las listas de descripciones */
dd, dt {
line-height: 1.5;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 1.5rem;
}
- La primera regla establece un tipo de letra y un tamaño de letra base de 10px. Estos valores se heredan para toda la página.
- Las reglas 2 y 3 establecen tamaños de letra relativos para los títulos, diferentes tipos de listas (que heredan los hijos de los elementos de listas), y párrafos. Esto significa que todos los párrafos y todas las listas tendrán el mismo tamaño de letra y el mismo espaciado superior e inferior, lo que ayudará a mantener el ritmo vertical constante.
- La regla 4 establece el mismo interlineado (
line-height) en los párrafos y los elementos de las listas, de modo que todos los párrafos y todos los elementos individuales de las listas tendrán el mismo espaciado entre las líneas. Esto también ayudará a mantener el ritmo vertical consistente. - Las reglas 5 y 6 se aplican a las listas de descripciones. Establecemos la misma altura de interlineado (
line-height) en los términos y las descripciones de la lista de descripciones, así como hicimos con los párrafos y los elementos de la lista. De esta forma mantenemos un estilo coherente. También establecemos que los términos de las descripciones tengan un estilo de negrita, para que destaquen visualmente.
Ejercicio propuesto: Listas con tus propios estilos
Crea una página web con las listas y estilos del ejemplo anterior, y cambia o añade los estilos que quieras. A continuación enlaza el fichero CSS desde el fichero HTML, y comprueba el resultado en tu navegador. No olvides validar tanto el código HTML como el CSS.
El resultado obtenido podría ser similar al siguiente:
Estilos específicos de listas
Ahora que hemos analizado el espaciado general de las listas, exploremos algunas propiedades específicas de las listas. Para empezar, debes conocer tres propiedades que pueden establecerse en los elementos <ul> o <ol>:
list-style-type: Establece el tipo de viñetas para la lista, por ejemplo, viñetas cuadradas o circulares para una lista no ordenada; números, letras, o números romanos para una lista ordenada.list-style-position: Establece si las viñetas aparecen dentro de los elementos de la lista o fuera de ellos, antes del inicio de cada elemento.list-style-image: Te permite usar una imagen personalizada para la viñeta, en lugar de un simple cuadrado o círculo.
El estilo de la viñeta
Como hemos comentado, la propiedad list-style-type te permite establecer qué tipo de viñeta usar. En nuestro ejemplo, hemos establecido que se usen números romanos en mayúsculas para la lista ordenada, con:
ol {
list-style-type: upper-roman;
}
Puedes encontrar más opciones si echas un vistazo a la página de referencia de list-style-type.
La posición de la viñeta
La propiedad list-style-position establece si las viñetas aparecen dentro de los elementos de la lista, o fuera de ellos antes del inicio de cada elemento. El valor por defecto es outside, que provoca que las viñetas se sitúen fuera de los elementos de lista, como se observa arriba.
Si estableces el valor en inside, las viñetas se ubican dentro de las líneas:
ol {
list-style-type: upper-roman;
list-style-position: inside;
}
Usando una imagen personalizada como viñeta
La propiedad list-style-image te permite usar una imagen personalizada para tu viñeta. La sintaxis es muy simple:
ul {
list-style-image: url("https://mdn.github.io/learning-area/css/styling-text/styling-lists/star.svg");
}
Sin embargo, esta propiedad es un poco limitada por lo que respecta al control de la posición, el tamaño, etc., de las viñetas. En algunos casos puede resultar más conveniente usar la propiedad background, tal como haremos nosotros. En nuestro ejemplo vamos a definir el estilo a la lista no ordenada utilizando esta última propiedad. Para ello añadiremos el siguiente código al que ya teníamos previamente:
ul {
padding-left: 2rem;
list-style-type: none;
}
ul li {
padding-left: 2rem;
background-image: url("https://mdn.github.io/learning-area/css/styling-text/styling-lists/star.svg");
background-position: 0 0;
background-size: 1.6rem 1.6rem;
background-repeat: no-repeat;
}
Aquí hemos hecho lo siguiente:
- Reducir el valor de la propiedad
padding-leftdel elemento<ul>desde su valor predeterminado de 40 px hasta 20 px. A continuación, establecer la misma cantidad para los elementos de la lista. De este modo, todos los elementos de la lista siguen alineados con los elementos de la lista ordenada y las descripciones, pero los elementos de lista tienen algo de relleno (padding) para poder insertar las imágenes de fondo. Si no hiciéramos esto, las imágenes de fondo se solaparían con el texto de los elementos de la lista y quedaría un aspecto desordenado. - Establecer la propiedad
list-style-typeennone, para que no aparezca la viñeta predeterminada. En lugar de ello, vamos a utilizar las propiedadesbackgroundpara cambiar las viñetas. - Insertar una viñeta en cada elemento de la lista no ordenada. Las propiedades relevantes son las siguientes:
background-image: Proporciona la ruta que apunta al archivo de imagen que quieres usar como viñeta.background-position: Define en qué lugar del elemento seleccionado va a aparecer la imagen; en este caso le decimos0 0, que significa que la viñeta va a aparecer en el extremo superior izquierdo de cada elemento de lista.background-size: Establece el tamaño de la imagen de fondo. En teoría queremos que las viñetas sean del mismo tamaño que los elementos de lista (o solo un poco menores o mayores). Utilizamos un tamaño de1.6rem(16px), que encaja muy bien con el área de relleno de20pxque hemos elegido para que quepa la viñeta; 16 px más 4 px de espacio entre la viñeta y el texto del elemento de lista funciona bien.background-repeat: Por defecto, las imágenes de fondo se repiten hasta rellenar todo el espacio de fondo disponible. En este caso solo queremos una copia de la imagen, de modo que establecemos el valor de esta propiedad enno-repeat.
Ejercicio propuesto: Juntándolo todo
Utilizando el código del ejercicio anterior, cambia las viñetas que aparecen por defecto para utilizar una imagen, y cambia también la numeración por defecto para utilizar cualquier otro estilo que te guste. Finalmente comprueba el resultado en tu navegador y valida el código HTML y CSS.
Un posible resultado podría ser el siguiente:
Propiedad abreviada list-style
Es importante mencionar la existencia de la propiedad abreviada list-style, que nos permite configurar las tres propiedades del ejemplo anterior en una sola línea. Por ejemplo, observa el CSS siguiente:
ul {
list-style-type: disc;
list-style-image: url(example.png);
list-style-position: inside;
}
Se podría reemplazarse por esto:
ul {
list-style: disc url(example.png) inside;
}
Los valores pueden escribirse en cualquier orden, y puedes usar uno, dos o los tres (los valores por defecto que se utilizan para las propiedades que no están incluidas son disc, none y outside). Si se especifican tanto type como image, el valor de type se usa como una segunda opción en el caso de que no sea posible cargar la imagen por cualquier motivo.
Test
Comprueba tus conocimientos con este test sobre estilos de listas.