Llistes
Go to Previous Section:
Contingut 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.
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
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:
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.
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:
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):
Afegiu una regla a la fulla d'estil, per numerar els oceans utilitzant nombres romans de l'I al V:
The oceans
|
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 . . . |
I ara què?
Go to Next Section:
CaixesQuan 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.