Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Listas se comportan como cualquier otro texto en su mayor parte, pero hay algunas propiedades CSS específicas de las listas que necesita conocer y algunas mejores prácticas a considerar. Este artículo explica todo.

Requisitos previos: Conocimientos de computación básica, conocimientos básicos de HTML (estudio introducción a HTML), conocimientos básicos de CSS (estudio introducción a CSS), Fundamentos de texto y fuentes CSS.
Objectivo: Familiarizarse con las mejores prácticas y propiedades relacionadas con el diseño de listas.

Un simple ejemplo de

Para empezar, veamos un ejemplo sencillo de listas. A lo largo de este artículo veremos listas desordenadas, ordenadas y listas de descripción — todas tienen características de estilos similares, y algunas que son particulas de el tipo de lista. El ejemplo sin estilo está disponible en Github (consulte también el código fuente.)

El HTML para nuestro ejemplo de lista se ve así:

<h2>Shopping (unordered) list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ul>
  <li>Humous</li>
  <li>Pitta</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

<h2>Recipe (ordered) list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference, 
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ol>
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

<h2>Ingredient description list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference, 
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<dl>
  <dt>Humous</dt>
  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
  <dt>Pitta</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>

Si accede ahora al ejemplo en vivo e investiga los elementos de la lista usando las herramientas de desarrollador del navegador, notará un par de valores predeterminados de estilo:

  • Los elementos <ul><ol> tienen un margin superior e inferior de 16px (1em)  y un padding-left de 40px (2.5em.)
  • Los elementos de lista (<li> elements) no tienen valores predeterminados para el espacio.
  • El elemento <dl> tiene un margin superior e inferior de 16px (1em), pero no tiene establecido padding.
  • Los elementos <dd> tienen margin-left de 40px (2.5em.)
  • Los elementos <p> que hemos incluido de referencia tienen margin superior e inferior de 16px (1em), al igual que los diferentes tipos de lista.

Manejando el espaciado de la lista

Al diseñar listas, es necesario ajustar su diseño para que mantenga el mismo espaciado vertical como su selementos circundantes (tales como párrafos e imágenes; a veces denominados ritmos verticales), y el mismo espaciado horizontal entre uno y otro (puede ver el ejemplo de diseño terminado en Github, y encontrar el código fuente también.)

El CSS utilizado para el estilo de texto y el 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 de listas de descripción */


dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}
  • La primera regla establece una fuente para todo el sitio, y un tamaño d efuente base de 10px. Estos son heredados para toda la página.
  • Las reglas 2 y 3 establecen tamaños de fuentes relativos para los títulos, diferentes tipos de listas (los hijos de los elementos de listas heredan estos), y párrafos. Esto significa que cada párrafo y lista tendrá el mismo tamaño de fuente y el mismo espaciado superior e inferior, lo que ayudará a mantener el ritmo vertical constante.
  • La regla 4 establece el mismo line-height en los párrafos y los elementos de las listas — de modo que los párrafos y cada elemento individual de la lista tendrán el mismo espaciado entre las líneas. Esto también ayudará a mantener el ritmo vertical constante.
  • Las reglas 5 y 6 se aplican a las listas de descripciones — establecemos el mismo 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 nuevo, la consistencia es buena! También hacemos que los términos tengan una fuente en negrita, por lo que visualmente se destacan más.

Estilos específicos de las listas

Ahora que hemos analizado el espaciado general de las listas, exploremos algunas propiedades específicas de las listas. Hay 3 propiedades que debe conocer para empezar, las cuales pueden ser establecidas en los elementos <ul><ol>:

  • list-style-type: Establece el tipo de viñetas para la lista, pro ejemplo, viñetas cuadradas o circulares para una lista desordenada; 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: Le permite usar una imagen personalizada para la viñeta, en lugar de un simple cuadrado o círculo.

Estilos de viñeta

Como se mencionó anteriormente, la propiedad list-style-type le permite establecer qué tipo de viñeta usar. En nuestro ejemplo, hemos establecido que para la lista ordenada se use números romanos en mayúsculas, con:

ol {
  list-style-type: upper-roman;
}

Esto nos da el siguiente aspecto:

an ordered list with the bullet points set to appear outside the list item text.

Puede encontrar muchas más opciones echando un vistazo a list-style-type en la página de referencia.

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, lo que provoca que las viñetas se situen fuera de los elementos de la lista, como se observa arriba.

Si establece el valor a inside, las viñetas se ubicarán dento de las líneas:

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

an ordered list with the bullet points set to appear inside the list item text.

Usando una imagen personalizada como viñeta

La propiedad list-style-image le permite usar una imagen personalizada para su viñeta. La sintaxis es muy simple:

ul {
  list-style-image: url(star.svg);
}

Sin embargo, esta propiedad es un poco limitada para controlar la posición, tamaño, etc. de las viñetas. Es más conveniente usar la familia de propiedades background, de la cual aprenderá muchi más en el módulo Diseñando cajas.

En nuestro ejemplo final, hemos diseñado la lista desordenada como tal (además de la que ya ha visto anteriormente):

ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

Aquí hemos hecho lo siguiente:

  • Set the padding-left of the <ul> down from the default 40px to 20px, then set the same amount on the list items. This is so that overall the list items are still lined up with the order list items and the description list descriptions, but the list items have some padding for the background images to sit inside. If we didn't do this, the background images would overlap with the list item text, which would look messy.
  • Set the list-style-type to none, so that no bullet appears by default. We're going to use background properties to handle the bullets instead.
  • Inserted a bullet onto each unordered list item. The relevant properties are as follows:
    • background-image: This references the path to the image file you want to use as the bullet.
    • background-position: This defines where in the background of the selected element the image will appear — in this case we are saying 0 0, which means the bullet will appear in the very top left of each list item.
    • background-size: This sets the size of the background image. We ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). We are using a size of 1.6rem (16px), which fits very nicely with the 20px padding we've allowed for the bullet to sit inside — 16px plus 4px of space between the bullet and the list item text works well.
    • background-repeat: By default, background images repeat until they fill up the available background space. We only want one copy of the image inserted in each case, so we set this to a value of no-repeat.

This gives us the following result:

an unordered list with the bullet points set as little star images

list-style shorthand

The three properties mentioned above can all be set using a single shorthand property, list-style. For example, the following CSS:

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

Could be replaced by this:

ul {
  list-style: square url(example.png) inside;
}

The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are disc, none, and outside). If both a type and an image are specified, the type is used as a fallback if the image can't be loaded for some reason.

Controlling list counting

Sometimes you might want to count differently on an ordered list — e.g. starting from a number other than 1, or counting backwards, or counting in steps of more than 1. HTML and CSS have some tools to help you here.

start

The start attribute allows you to start the list counting from a number other than 1. The following example:

<ol start="4">
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

Gives you this output:

reversed

The reversed attribute will start the list counting down instead of up. The following example:

<ol start="4" reversed>
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

Gives you this output:

value

The value attribute allows you to set your list items to specific numerical values. The following example:

<ol>
  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

Gives you this output:

Note: Even if you are using a non-number list-style-type, you still need to use the equivalent numerical values in the value attribute.

Active learning: Styling a nested list

In this active learning session, we want you to take what you've learnt above and have a go at styling a nested list. We've provided you with the HTML, and we want you to:

  1. Give the unordered list square bullets.
  2. Give the unordered list items and the ordered list items a line height of 1.5 of their font-size.
  3. Give the ordered list lower alphabetical bullets.
  4. Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

See also

CSS counters provide advanced tools for customizing list counting and styling, but they are quite complex. We recommend looking into these if you want to stretch yourself. See:

Summary

Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques.

 

In this module

 

Etiquetas y colaboradores del documento

Colaboradores en esta página: laatcode, jmcavanzo
Última actualización por: laatcode,