Llistes d'estil

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 necessiteu saber i algunes de les millors pràctiques a tenir en compte. Aquest article ho explica tot.

Un exemple de llista senzill

Per començar, veieu un exemple de llista senzilla. Al llarg d'aquest article, veurem llistes desordenades, ordenades i de descripció: totes tenen característiques d'estil similar, i algunes que són particulars per al seu tipus de llista. L'exemple sense estil està disponible a Github (consulteu el codi font també).

El codi HTML del nostre exemple de llista es veu així:

<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 aneu a l'exemple en directe, ara, i investigueu els elements de la llista amb les eines del desenvolupador del navegador, us adonareu d'un parell d'estils per defecte:

• Els elements <ul> and <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 espaiar.
• L'element <dl> té un margin superior i inferior dede 16px (1em), però no hi ha un farciment (padding) establert.
• Els elements <dd> tenen un margin-left de 40px (2.5em.)
• Els elements <p> que hem inclòs per referència tenen un margin de 16px (1em), el mateix que els diferents tipus de llista.

Maneig de l'espaiat de la llista

Quan feu llistes d'estil, heu d'ajustar els seus estils perquè mantinguin el mateix espai vertical que els elements que l'envolten (com ara paràgrafs i imatges, de vegades anomenats ritme vertical), i el mateix espaiat horitzontal com l'altre (podeu veure l'exemple d'estil acabat a Github, i trobareu el codi font també).

El CSS utilitzat per a l'estil de 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 una font en tot el lloc i una mida de font de referència de 10px. Aquests són heretats per tot a la pàgina
• Les regles 2 i 3 estableixen mides relatives de fonts per als encapçalaments, diferents tipus de llista (els fills dels elements de la llista hereten aquests) i els paràgrafs. Això significa que cada paràgraf i llista tindrà la mateixa mida de font i l'espaiat superior i inferior, ajudant a mantenir el ritme vertical constant.
• La regla 4 estableix el mateix line-height en els paràgrafs i els elements de la llista, de manera que els paràgrafs i cada element de la llista individual tindran el mateix espaiat entre línies. Això també ajudarà a mantenir el ritme vertical constant.
• Les regles 5-7 s'apliquen a la llista de descripció: establim el mateix line-height en els termes i descripcions de la llista de descripció, com ho vam fer amb els paràgrafs i els elements de llista, i un margin-bottom de 1.5rem  - el mateix que els paràgrafs (p) i els elements de la llista (li) que tenim actualment. Una vegada més, la consistència és bona. També fem que els termes de la descripció tinguin una font en negreta, de manera que visualment destaquen més fàcilment. 

Estils específics de la llista

Ara hem examinat l'espaiat general de les llistes, anem explorar algunes propietats específiques de la llista. Hi ha tres propietats que heu de saber per començar, les quals es poden establir en els elements <ul> o <ol>:

• list-style-type: Estableix el tipus de vinyeta que s'utilitzarà per a la llista, per exemple vinyetes quadrades o circulars per a una llista desordenada, 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 fora d'ells, abans de l'inici de cada element.
• list-style-image: Permet utilitzar una imatge personalitzada per la vinyeta, en comptes d'un simple quadrat o cercle.

Estils de vinyeta

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

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

Això ens dóna el següent aspecte:

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

Posició de la vinyeta

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

Si estableix el valor a l'interior (inside), les vinyetes se situen dins de les línies :

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

Ús d'una imatge de vinyeta personalitzada

La propietat list-style-image us permet fer servir una imatge personalitzada per a la vostra 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 aprendreu molt més al mòdul de Caixes d'estil. De moment, aquí teniu un tast!

En el nostre exemple acabat, hem anomenat la llista desordenada com a tal (sobre el que ja heu vist anteriorment):

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:

• Establir el padding-left de <ul> disminuint el valor per defecte de 40px a 20px, i establint la mateixa quantitat en els elements de la llista. Això és així perqué, en general, els elements de la llista encara estan alineats amb els elements de la llista d'ordre i les descripcions de la llista de descripció, però els elements de la llista tenen algun farcit perquè les imatges de fons es puguin seure a l'interior. Si no ho féssim, les imatges de fons es superposarien amb el text de l'element de la llista, es veuria desordenat.
• Establir el list-style-type a  none, de manera que no aparegui cap vinyeta per defecte. Anem a utilitzar les propietats background per manejar les vinyetes en el seu lloc.
• S'ha inserit una vinyeta en cada element de la llista desordenada. Les propietats rellevants són les següents:
  • background-image: Fa referència a la ruta del fitxer d'imatge que voleu utilitzar com a vinyeta.
  • background-position: Defineix el fons de l'element seleccionat on apareixerà la imatge - en aquest cas estem dient 0 0, el que significa que la vinyeta apareixerà a la part superior esquerra de cada element de la 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). Estem utilitzant una mida de 1.6rem (16px), que s'adapta molt bé amb el farciment de 20px, que ha permès que la vinyeta s'assegui a l'interior - 16px més 4px d'espai entre la vinyeta i el text de l'element de la 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 ho fixem en un valor de no repetició (no-repeat).

Això ens dóna el següent resultat:

list-style abreujada

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

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

Podria ser reemplaçat per això:

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

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

Control de comptatge de llistes

De vegades, és possible que vulgueu comptar de manera diferent en una llista ordenada - p. ex. A partir d'un número diferent de 1, o bé comptant enrere, o comptant en passos o més d'1. L'HTML i el CSS tenen algunes eines per ajudar-vos aquí.

start

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

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

Dóna aquesta sortida:

reversed

L'atribut reversed iniciarà la llista comptant avall en comptes de cap amunt. 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>

Dóna aquesta sortida:

value

L'atribut value permet establir als elements de la llista, valors numèrics específics. El següent exemple:

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

Dóna aquesta sortida:

Aprenentatge actiu: Estilitzar una llista niada

En aquesta sessió d'aprenentatge actiu, volem que prengueu allò que heu après anteriorment i dissenyeu una llista niada. Us hem proporcionat l'HTML i volem que:

1. Doneu a la llista desordenada vinyetes quadrades.
2. Doneu els elements de llista desordenada i els elements de llista ordenada una alçada de línia d'1,5 de la seva mida de font
3. Doneu a la llista ordenada vinyetes alfabètiques inferiors.
4. No dubteu a jugar amb l'exemple de llista tant com vulgueu, experimentant amb tipus de vinyeta, espaiat o qualsevol altra cosa que trobeu.

Si cometeu un error, sempre podeu restablir-lo mitjançant el botó Reset. Si esteu realment atrapats, premeu el botó Show solution per veure una resposta potencial.

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

Vegeu també

Els comptadors CSS proporcionen eines avançades per personalitzar el recompte i l'estil de les llistes, però són bastant complexes. Recomanem fer-ne un cop d'ull si voleu esforçar-vos. Vegeu:

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

Resum

Les llistes són relativament fàcils d'aconseguir en dominar l'estil, una vegada que coneixeu alguns principis bàsics associats i propietats específiques. Al següent article, enllaçarem amb les tècniques d'estil.