Llistes

Aquesta és la 10th secció del tutorial CSS Getting Started; descriu com es pot utilitzar CSS per especificar l'aspecte de les llistes. Heu de crear un nou document d'exemple que contindrà les llistes, i un nova fulla d'estil que és el estil de les llistes.

Informació: Llistes

Si vau aprendre el repte en l'última secció, llavors va veure com es podia afegir contingut abans de qualsevol element perquè aparegués com un element de la llista.

CSS proporciona propietats especials que estan dissenyades per a les llistes. En general, és convenient utilitzar aquestes propietats sempre que pugueu.

Per especificar l'estil a una llista, utilitzeu la propietat list-style per especificar el tipus de marcador.

El selector en la seva regla CSS pot seleccionar els elements de la llista d'elements (per exemple, <li> ) o es pot seleccionar l'element de la llista dels pares (per exemple, <ul>) de manera que els elements de la llista hereten l'estil.

Llistes no ordenades

En una llista no ordenada, cada element de la llista està marcat de la mateixa manera.

CSS té tres tipus de marcadors, i aquí es veu com el navegador els mostra:

  • disc
  • circle
  • square

També podeu especificar l'adreça URL d'una imatge.

Exemple

Aquestes regles especifiquen diferents marcadors per a diferents classes d'elements de la llista:

li.open {list-style: circle;}
li.closed {list-style: disc;}

Quan aquestes classes s'utilitzen en una llista, distingeix entre els elements oberts i tancats (per exemple, en una llista de tasques pendents):

<ul>
  <li class="open">Lorem ipsum</li>
  <li class="closed">Dolor sit</li>
  <li class="closed">Amet consectetuer</li>
  <li class="open">Magna aliquam</li>
  <li class="closed">Autem veleum</li>
</ul>

El resultat és el següent:

Llistes ordenades

En una llista ordenada, cada element de la llista es marca de manera diferent per mostrar la seva posició en la seqüència.

Utilitzeu la propietat list-style per especificar el tipus de marcador:

  • decimal
  • lower-roman
  • upper-roman
  • lower-latin
  • upper-latin
Exemple

Aquesta regla especifica que els elements en <ol>  amb la classe info, els elements s'identifiquen amb lletres majúscules.

<ol class="info">
  <li>Lorem ipsum</li>
  <li>Dolor sit</li>
  <li>Amet consectetuer</li>
  <li>Magna aliquam</li>
  <li>Autem veleum</li>
</ol>
ol.info {list-style: upper-latin;}

El elements <li> en la llista hereten aquest estil:

Més detalls

La propietat list-style és una propietat abreujada. En les fulles d'estil complexes és possible que preferiu utilitzar les propietats independents per establir els valors per separat. Per als enllaços a aquestes propietats separades, i més detalls de com CSS especifica les llistes, consulteu la pàgina de referència list-style.

Si utilitzeu un llenguatge de marques com l'HTML que proporciona marques convencionals per llistes no ordenades (<ul>) i llistes ordenades (<ol>), llavors és una bona pràctica utilitzar les etiquetes en la forma en què estan destinades. No obstant això, podeu utilitzar CSS per fer que <ul> aparegui ordenat i <ol> aparegui desordenat si ho desitjeu.

Els navegadors difereixen en la forma d'aplicar els estils de llistes. No espereu que la vostre fulla d'estil doni resultats idèntics en tots els navegadors.

Comptadors

Note:  Alguns navegadors no suporten comptadors. La pàgina continguts CSS i compatibilitat del navegador en el lloc Quirks Mode conté un gràfic detallat de la compatibilitat dels navegadors per això i altres característiques CSS. Pàgines individuals en la Referència CSS d'aquest lloc, també tenen taules de compatibilitat del navegador.

Podeu utilitzar comptadors per enumerar els elements, no només els elements de la llista. Per exemple, en alguns documents és possible que vulgueu numerar les capçaleres o paràgrafs.

Per especificar la numeració, es necessita un comptador amb un nom que definiu.

En algun element abans que el recompte s'iniciï, reinicieu el comptador amb la propietat counter-reset i el nom del seu comptador. El pare dels elements que està comptant és un bon lloc per fer-ho, però podeu utilitzar qualsevol element que vingui abans que els elements de la llista.

Per cada element en el qual s'incrementa el comptador, utilitzeu la propietat counter-increment i el nom del seu comptador.

Per mostrar el comptador, afegiu ::before o ::after per al selector i l'ús de la propietat content (com ho va fer en la pàgina anterior, Content).

En el valor de la propietat content, especifiqueu counter() amb el nom del vostre comptador. També podeu indicar un tipus. Els tipus són els mateixos que en la secció anterior de llistes ordenades.

Normalment, l'element que mostra el comptador també l'incrementa.

Exemple

Aquesta regla inicialitza un comptador per a cada element <h3> amb la classe numbered:

h3.numbered {counter-reset: mynum;}

Aquesta regla mostra i incrementa el comptador per a cada element <p> amb la classe numbered:

<p class="numbered">Lorem ipsum</p>
<p class="numbered">Dolor sit</p>
<p class="numbered">Amet consectetuer</p>
<p class="numbered">Magna aliquam</p>
<p class="numbered">Autem veleum</p>

body {
   counter-reset: mynum;
}
p.numbered:before {
  content: counter(mynum) ": ";
  counter-increment: mynum;
  font-weight: bold;
}

El resultat és el següent:

Més detalls

No podeu utilitzar comptadors a menys que sàpigueu que tot el que llegeixi el document té un navegador compatible amb ells.

Si sou capaços d'utilitzar els comptadors, tenen l'avantatge que podeu donar estil els comptadors per separat dels elements de la llista. En l'exemple anterior, els comptadors estan en negreta, però els elements de la llista no ho estan.

També podeu utilitzar els comptadors en formes més complexes, per exemple, al nombre de seccions, títols, subtítols i paràgrafs en els documents formals. Per a més detalls, consulteu Comptadors i numeració automàtica en l'especificació CSS.

Acció: Llistes amb estil

Feu un nou document HTML, doc2.html. Copieu i enganxeu el contingut d'aquí:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sample document 2</title>
    <link rel="stylesheet" href="style2.css">
  </head>
  <body>

    <h3 id="oceans">The oceans</h3>
    <ul>
      <li>Arctic</li>
      <li>Atlantic</li>
      <li>Pacific</li>
      <li>Indian</li>
      <li>Southern</li>
    </ul>

    <h3 class="numbered">Numbered paragraphs</h3>
    <p class="numbered">Lorem ipsum</p>
    <p class="numbered">Dolor sit</p>
    <p class="numbered">Amet consectetuer</p>
    <p class="numbered">Magna aliquam</p>
    <p class="numbered">Autem veleum</p>

  </body>
</html>

Feu un nova fulla d'estil, style2.css. Copieu i enganxeu el contingut d'aquí:

/* numbered paragraphs */
h3.numbered {counter-reset: mynum;}

p.numbered:before {
  content: counter(mynum) ": ";
  counter-increment: mynum;
  font-weight: bold;
}

Si la disposició i el comentari no són del vostre gust, canvieu-los.

Obriu el document en el navegador. Si el navegador és compatible amb els comptadors, es veurà alguna cosa semblant com l'exemple a continuació. Si el vostre navegador no suporta comptadors, llavors no veureu els números (i probablement ni tan sols els dos punts):

Reptes

Afegiu una regla a la fulla d'estil, per numerar els oceans utilitzant nombres romans de l'I al V:

The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

 

Canvieu la fulla d'estil per identificar les capçaleres amb lletres majúscules i en parèntesi com aquest:

(A) The oceans

. . .

(B) Numbered paragraphs

. . .

Veure la solució per el repte.

I ara què?

Quan el navegador mostra el document d'exemple, es crea un espai al voltant dels elements quan els col·loca a la pàgina. La pàgina següent descriu com podeu utilitzar CSS per treballar amb les formes subjacents d'elements, caixes.