Estils de llistes

Les llistes es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que has de conèixer i algunes bones pràctiques que has de tenir en compte. Aquest article ho explica tot.

Per començar, observa un exemple senzill de llista. Al llarg d'aquest article, veurem llistes no ordenades, ordenades i de descripció: totes tenen característiques d'estil similars, i algunes que són particulars per al tipus de llista concret. Tens l'exemple sense estil disponible a GitHub (consulta també el codi d’origen).

El codi HTML del nostre exemple de llista té aquest aspecte:

<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 ara vas a l'exemple en directe i investigues els elements de la llista amb les eines de desenvolupador del navegador, t’adonaràs que hi ha un parell d'estils per defecte:

• Els elements <ul> i <ol> tenen un margin superior i inferior de 16px (1em) i un padding-left de 40px (2.5em).
• Els elements de llista (elements <li>) no tenen valors predeterminats establerts per a l’espaiat.
• L'element <dl> té un margin superior i inferior de 16px (1em), però no hi ha cap farciment (padding) establert.
• Els elements <dd> tenen un margin-left de 40px (2.5em).
• Els elements <p> que hem inclòs com a referència tenen un margin de 16px (1em), el mateix que els diferents tipus de llista.

Quan fas llistes d'estil, has d'ajustar-ne els estils perquè mantinguin el mateix espai vertical que els elements que l'envolten (com ara paràgrafs i imatges, que de vegades s’anomena ritme vertical), i el mateix espaiat horitzontal que la resta (observa l'exemple d'estil acabat a GitHub, i també el codi d’origen que hi trobaràs).

El CSS que s’utilitza per a aplicar l'estil al text i l'espaiat és el següent:

/* General styles */

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;
}

/* Description list styles */


dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}

• La primera regla estableix un tipus de lletra per a tot el lloc web i una mida de lletra de referència de 10 px, que hereta tota la pàgina web.
• Les regles 2 i 3 estableixen mides de lletra relatives per als títols d’encapçalament, els diferents tipus de llista (els fills dels elements de la llista els hereten) i els paràgrafs. Això significa que cada paràgraf i cada llista tindrà la mateixa mida de lletra i el mateix espaiat superior i inferior, que ajuden a mantenir un ritme vertical constant.
• La regla 4 estableix la mateixa line-height en els paràgrafs i els elements de llista, de manera que els paràgrafs i cada element de llista tindran el mateix espaiat entre línies. Això també ajuda a mantenir el ritme vertical consistent.
• Les regles 5-7 es refereixen a la llista de descripció: establim la mateixa line-height per als termes i les descripcions de terme de la llista de descripció que els que hem establert per als paràgrafs i els elements de llista, i un margin-bottom de 1.5rem, el mateix que hi ha per als paràgrafs (p) i els elements de la llista (li). Una vegada més, la coherència és bona. També establim els termes de descripció en negreta, de manera que destaquin més visualment.

Hem examinat l'espaiat general de les llistes, ara explorarem algunes propietats específiques de la llista. Per començar, hi ha tres propietats que has de conèixer, que es poden establir en els elements <ul> o <ol>:

• list-style-type: Estableix el tipus de vinyeta que s'utilitza per a la llista, per exemple vinyetes quadrades o circulars per a una llista no ordenada, números, lletres o números romans per a una llista ordenada.
• list-style-position: Estableix si les vinyetes apareixen dins dels elements de la llista, o a fora, abans de l'inici de cada element.
• list-style-image: Permet utilitzar una imatge personalitzada per a la vinyeta, en comptes d'un quadrat o cercle.

Com s'ha comentat, la propietat list-style-type permet establir quin tipus de vinyeta s'usa per als punts de vinyeta. En el nostre exemple, hem establert que la llista ordenada utilitzi números romans en majúscules, amb:

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

Això ens dona l’aspecte següent:

Podeu trobar moltes més opcions consultant la pàgina de referència list-style-type.

La propietat list-style-position estableix si les vinyetes apareixen dins dels elements de llista, o a fora, abans de l'inici de cada element. El valor predeterminat és outside (fora), que fa que les vinyetes se situïn fora dels elements de llista, tal com hem vist.

Si estableixes el valor inside (dins), les vinyetes se situen dins de les línies:

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

La propietat list-style-image et permet fer servir una imatge personalitzada per a la vinyeta. La sintaxi és bastant senzilla:

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

Tanmateix, aquesta propietat és una mica limitada en termes de control de la posició, la mida, etc., de les vinyetes. És millor utilitzar la família de propietats background, que aprendràs amb més detall en el mòdul de Aplicar estil a les caixes. De moment, aquí en tens un tast!

En el nostre exemple acabat, hem aplicat estil a la llista no ordenada d’aquesta manera (a sobre del que ja has vist abans):

ul {
  padding-left: 2rem;
}

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

Aquí hem fet el següent:

• Hem reduït el valor per defecte del padding-left de <ul> de 40px a 20px, i establim la mateixa quantitat per als elements de llista. D’aquesta manera, en general, els elements de llista encara estan alineats amb els elements de llista ordenada i les descripcions de llista de descripció, però els elements de llista tenen un farciment per a poder-hi encabir imatges de fons. Si no ho féssim així, les imatges de fons es superposarien amb el text de l'element de la llista, i es veuria desordenat.
• Hem establert el list-style-type a none, de manera que no aparegui cap vinyeta per defecte. En lloc d’això, utilitzarem les propietats background per tractar les vinyetes.
• Hem inserit una vinyeta en cada element de llista no ordenada. Les propietats rellevants són les següents:
  • background-image: Especifica la ruta del fitxer d'imatge que vols utilitzar com a vinyeta.
  • background-position: Defineix en quin lloc del fons de l'element seleccionat apareix la imatge; en aquest cas, 0 0, que significa que la vinyeta apareix a la part superior esquerra de cada element de llista.
  • background-size: Estableix la mida de la imatge de fons. Idealment voldríem que les vinyetes tinguessin la mateixa mida que els elements de llista (o lleugerament més petits o més grans). Fem servir una mida de 1.6rem (16px), que s'adiu molt bé amb el farciment de 20px que hem establert per e encabir-hi la vinyeta; 16 px, més 4 px d'espai entre la vinyeta i el text de l'element de llista funciona bé.
  • background-repeat: Per defecte, les imatges de fons es repeteixen fins que omplen l'espai del fons disponible. Només volem que es faci una còpia de la imatge inserida en cada cas, de manera que el fixem en un valor de no-repetició (no-repeat).

Això ens dona el resultat següent:

Les tres propietats anteriors esmentades es poden configurar amb una única propietat abreujada, list-style. Per exemple, el CSS següent:

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

Podria reemplaçar-se per això:

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

Els valors es poden incloure en qualsevol ordre, i pots utilitzar-ne un, dos o els tres (els valors predeterminats que s’utilitzen per a les propietats que no s'inclouen són disc, none i outside). Si s'especifica un tipus i una imatge, el tipus s'utilitza com a alternativa si la imatge no es carrega per alguna raó.

De vegades pot ser que vulguis numerar de manera diferent una llista ordenada, per exemple, que comenci a partir d'un número diferent de 1, o bé que compti enrere, o que compti en passos de més d'1. L'HTML i el CSS disposen d’algunes eines que et poden ajudar amb això.

L'atribut start permet iniciar el recompte de la llista a partir d'un número diferent de 1. L’exemple següent:

<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>

Dona aquesta sortida:

L'atribut reversed inicia la llista comptant cap enrere en comptes de cap endavant. L'exemple següent

<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>

Dona aquesta sortida:

L'atribut value permet establir valors numèrics específics per a cada element de llista. L’exemple següent:

<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>

Dona aquesta sortida:

En aquesta sessió d'aprenentatge actiu, volem que prenguis allò que has après i dissenyis una llista imbricada. T’hem proporcionat un codi HTML, i volem que:

1. Apliquis vinyetes quadrades als elements de llista no ordenada.
2. Apliquis als elements de llista no ordenada i els elements de llista ordenada una alçada de línia d'1,5 respecte de la mida de la lletra.
3. Apliquis als elements de llista ordenada valors de lletra minúscula.
4. No dubtis de jugar amb l'exemple de llistes tant com vulguis, experimenta amb els tipus de vinyeta, l’espaiat o qualsevol altra cosa que hi trobis.

Si t’equivoques, sempre pots tornar a començar amb el botó Reinicia. Si t’encalles, prem el botó Mostra la solució per veure’n una resposta possible.

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul>
  <li>First, light the candle.</li>
  <li>Next, open the box.</li>
  <li>Finally, place the three magic items in the box, in this exact order, to complete the spell:
    <ol>
      <li>The book of spells</li>
      <li>The shiny rod</li>
      <li>The goblin statue</li>
    </ol>
  </li>
</ul></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li {\n  line-height: 1.5;\n}\n\nol li {\n  list-style-type: lower-alpha\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

Els comptadors CSS proporcionen eines avançades per a personalitzar el recompte i l'estil de les llistes, però són bastant complexos. Et recomanem que hi facis un cop d'ull si vols ampliar la informació. Vegeu:

• @counter-style
• counter-increment
• counter-reset

Resulta relativament fàcil de dominar l'aplicació d’estil a les llistes una vegada que en coneixes els principis bàsics associats i les propietats específiques. En l’article següent continuarem amb les tècniques d'estil.