Continguts:

1. Introducció
2. Els pseudo-elements :before i :after
3. La propietat 'content'
4. Interacció de :before i :after amb els elements 'compact' i 'run-in'
5. Marques de cita
5.1. Especificar cometes amb la propietat 'quotes'
5.2. Inserir cometes amb la propietat 'content'
6. Comptadors i numeració automàtica
6.1. Comptadors aniuats i abast
6.2. Estils de comptador
6.3. Comptadors en elements amb "display: none"
7. Marcadors i llistes
7.1. Marcadors: la propietat 'marker-offset'
7.2. Llistes: les propietats 'list-style-type', 'list-style-image', 'list-style-position' i 'list-style'
1. Introducció
En alguns casos, els autors poden voler que els agents d'usuari presentin contingut que no ve de l'arbre del document. Un exemple familiar d'això és una llista numerada; l'autor no vol llistar els números explícitament, sinó que desitja que l'agent d'usuari els generi automàticament. De manera similar, els autors poden voler que l'agent d'usuari insereixi la paraula "Figura" abans del títol d'una figura, o "Capítol 7" abans del títol del setè capítol. Per a l'audio i el braille, en particular, els agents d'usuari haurien de ser capaços d'inserir aquestes cadenes.

En CSS2 el contingut pot ser generat mitjançant diversos mecanismes:

2. Els pseudo-elements :before i :after
Els autors especifiquen l'estil i la localització de contingut generat amb els pseudo-elements :before i :after. Tal com els seus noms indiquen, els psedo-elements :before i :after especifiquen la localització del contingut abans i després, respectivament, del contingut (present en l'arbre del document) d'un element. La propietat content, en conjunció amb aquests pseudo-elements, especifica el què és inserit.

Per exemple, la següent regla insereix la cadena "Nota: " abans del contingut de cada element P l'atribut "class" del qual tingui el valor "nota":
	P.nota:before { content: "Nota: " }

Els objectes del formatat (per ex., les caixes) generats per un element inclouen el contingut generat. Per tant, per exemple, canviar l'anterior full d'estil per:
	P.nota:before { content: "Nota: " }
	P.nota { border: solid green }
donaria com a resultat una vora sòlida i verda que es presentaria al voltant de tot el paràgraf, incloent-hi la cadena inicial.

Els pseudo-elements :before i :after hereten qualsevol propietat heretable de l'element de l'arbre del document al qual estan associats.

Per exemple, les següents regles insereixen un signe d'obertura de cometes abans de cada element Q. El color del signe de cometes serà vermell, però la font serà la mateixa que la font de la resta de l'element Q:
	Q:before {
		content: open-quote;
		color: red;
	}
En la declaració d'un pseudo-element :before o :after, les propietats no heretades prenen els seus valors inicials.

Per tant, per exemple, com que el valor inicial de la propietat display és 'inline', la cita de l'exemple previ s'insereix com una caixa inline (és a dir, en la mateixa línia que el text del contingut inicial de l'element). El següent exemple fixa explícitament la propietat display a 'block', i per tant, el text inserit esdevé un bloc:
	BODY:after {
		content: "The End";
		display: block;
		margin-top: 2em;
		text-align: center;
	}

Cal observar que un agent d'usuari acústic recitaria les paraules "The End" després de presentar la resta del contingut de BODY.

Els agents d'usuari han d'ignorar les següents propietats amb els pseudo-elements :before i :after: position, float, propietats de llista i propietats de taula.

Els pseudo-elements :before i :after permeten els valors de la propietat display de la manera següent:


Nota. En futures versions de CSS és possible que es permetin altres valors.
3. La propietat 'content'
La propietat content s'utilitza amb els pseudo-elements :before i :after per a generar contingut en un document.

La propietat display controla si el contingut es situa dins una caixa de bloc, dins una caixa inline o bé dins una caixa de marcador.

Els autors haurien de posar les declaracions de content dins de regles @media quan el contingut sigui sensible al mitjà. Per exemple, el text literal pot utilitzar-se per a qualsevol grup de mitjans, però les imatges només s'apliquen als grups de mitjans visuals + bitmap, i els arxius de so només s'apliquen al grup de mitjans acústics.

La següent regla fa que un fixer de so es reprodueixi al final d'una cita (veieu el tema "Fulls d'estil audibles" per a mecanismes addicionals):
	@media aural {
         BLOCKQUOTE:after { content: url("musica.wav") }
	}

La propera regla insereix el text de l'atribut "alt" de l'HTML abans de la imatge. Si la imatge no es visualitza el lector continuarà veient el text de l'"alt":
	IMG:before {content: att(alt) }

Els autors poden incloure salts de línia en el contingut generat escrivint la seqüència d'escape "\A" en una de les cadenes després de la propietat content. Això insereix un trencament de línia forçat, similar al de l'element BR de l'HTML. Consulteu "Cadenes" i "Caràcters i case" del tema "Sintaxi i tipus bàsics de dades" per a més informació sobre la seqüència d'escape "\A".

El contingut generat no altera l'arbre del document. En particular, no genera informació per al processador del llenguatge del document (per ex., per a una reanàlisi gramatical).

Nota. En futurs nivells de CSS, la propietat content podrà acceptar valors addicionals, permetent que variï l'estil de part del contingut generat, però en CSS2 tot el contingut del pseudo-element :before o :after té el mateix estil.
4. Interacció de :before i :after amb els elements 'compact' i 'run-in'
Es poden donar els següents casos:

  1. Un element 'run-in' o 'compact' té un pseudo-element :before de tipus 'inline': el pseudo-element es té en compte quan la mida de la caixa de l'element es calcula (per a 'compact') i es presenta dins de la mateixa caixa de bloc que l'element.
  2. Un element 'run-in' o 'compact' té un pseudo-element :after de tipus 'inline': s'apliquen les regles del punt anterior.
  3. Un element 'run-in' o 'compact' té un pseudo-element :before de tipus 'block': el pseudo-element es formata com un bloc al capdemunt de l'element, i no pren part en els càlculs de la mida de l'element (per a 'compact').
  4. Un element 'run-in' o 'compact' té un pseudo-element :after de tipus 'block': tant l'element com el seu pseudo-element :after es formaten com a caixes de bloc. L'element no es formata com una caixa inline en el seu propi pseudo-element :after.
  5. L'element que segueix un element 'run-in' o 'compact' té un :before de tipus 'block': la decisió de com formatar l'element 'run-in'/'compact' es fa respecte la caixa de bloc que resulta del pseudo-element :before.
  6. L'element que segueix un element 'run-in' o 'compact' té un :before de tipus 'inline': la decisió de com formatar l'element 'run-in'/'compact' depèn del valor de display de l'element al qual està associat el :before.

El següent exemple és d'un títol 'run-in' amb un pseudo-element :after, seguit per un paràgraf amb un pseudo-element :before. Tots els pseudo-elements són inline (per defecte) en aquest exemple. Quan el full d'estil:
	H3 { display: run-in }
	H3:after { content: ": " }
	P:before { content: "... " }
s'aplica a aquest document font:
	<H3>Centaures</H3>
	<P>tenen urpes
	<P>tenen una cua
el formatat visual serà semblant a:
	Centaures: ... tenen urpes
	... tenen una cua
5. Marques de cita
En CSS2 els autors poden especificar, d'una manera sensible a l'estil i depenent del context, com els agents d'usuari haurien de presentar les marques de cita. La propietat quotes especifica les parelles de marques de cita per a cada nivell de citació inserit. La propietat content dóna accés a aquelles marques de cita i fa que s'insereixin abans i després d'una cita.
5.1. Especificar cometes amb la propietat 'quotes'
La propietat quotes especifica signes de cita per a qualsevol nombre de cites inserides.

Per més informació i exemples sobre el funcionament de la propietat quotes podeu consultar en aquest manual el llistat on es troben definides totes les propietats CSS2.

Nota. Mentre que els signes de cita especificats per a la propietat quotes es troben convenientment situats en el teclat dels ordinadors, una tipografia d'alta qualitat requerirà diferents caràcters de la ISO 10646. La següent taula informativa llista alguns dels caràcters de signes de cita de la ISO 10646:

Presentació aprox. codi ISO 10646 (hex) Descripció
" 0022 SIGNE DE COMETES [el signe ASCII de les cometes dobles]
' 0027 APÒSTROF [el signe ASCII de les cometes simples]
< 2039 MARCA DE CITA D'ANGLE "MENOR QUE" SIMPLE
> 203A MARCA DE CITA D'ANGLE "MAJOR QUE" SIMPLE
« 00AB MARCA DE CITA D'ANGLE "MENOR QUE" DOBLE
» 00BB MARCA DE CITA D'ANGLE "MAJOR QUE" DOBLE
` 2018 MARCA D'OBERTURA DE CITA SIMPLE [single high-6]
' 2019 MARCA DE TANCAMENT DE CITA SIMPLE [single high-9]
`` 201C MARCA D'OBERTURA DE CITA DOBLE [double high-6]
'' 201D MARCA DE TANCAMENT DE CITA DOBLE [double high-9]
,, 201E MARCA DE CITA LOW-9 DOBLE [double low-9]
5.2. Inserir cometes amb la propietat 'content'
Els signes de cita s'insereixen en els llocs apropiats d'un document amb els valors 'open-quote' i 'close-quote' de la propietat content. Cada ocurrència d''open-quote' o de 'close-quote' és reemplaçada amb una de les cadenes del valor de quotes, basant-se en la profunditat de l'aniuament.

'Open-quote' fa referència a la primera d'una parella de cometes, 'close-quote' fa referència a la segona. El nivell d'aniuament les cometes defineix quina parella de cometes s'utilitzarà: el nombre d'ocurrències d''open-quote' en tot el text generat abans de la ocurrència actual, menys el nombre d'ocurrències de 'close-quote'. Si la profunditat és 0, s'utilitza la primera parella, si la profunditat és 1 s'utilitza la segona parella, etc. Si la profunditat és més gran que el nombre de parelles, es repeteix l'última parella.

Cal observar que aquesta profunditat de citació és independent de l'aniuament del document font o de l'estructura de formatat.

Alguns estils tipogràfics requereixen que els signes d'obertura de cita es repeteixin abans de cada paràgraf d'una cita que s'expandeixi per diversos paràgrafs, però només l'últim paràgraf finalitza amb un signe de tancament de cita. En CSS això es pot aconseguir inserint unes cometes de tancament "fantasmes". La paraula clau 'no-close-quote' decrementa el nivell de citació, però no insereix cap signe de cita.

El següent full d'estil posa uns signes d'obertura de cita en cada paràgraf d'un BLOCKQUOTE, i insereix un sol signe de tancament de cita al final:
	BLOCKQUOTE P:before { content: open-quote }
	BLOCKQUOTE P:after { content: no-close-quote }
	BLOCKQUOTE P.ultim:after { content: close-quote }
Aquest codi es basa en la suposició que l'últim paràgraf estarà marcat amb una classe de nom "ultim", ja que no hi ha cap selector que unifiqui amb l'últim fill d'un element.

Per simetria, també hi ha una paraula clau 'no-open-quote', la qual no insereix res, però incrementa la profunditat de cita en u.

Nota. Si una cita es troba en un idioma diferent del text que l'envolta, és costum posar el text entre cometes amb els signes de cita de l'idioma del text del voltant, no de l'idioma de la cita en sí mateixa.

Per exemple, francès dins d'anglès:
  The device of the order of the garter is "Honi soit qui mal y pense".
Anglès dins de francès:
  Il disait: « Il faut mêttre l'action en ‹ fast forward ›. »

Un full d'estil com el següent inicialitzarà la propietat quotes per tal que 'open-quote' i 'close-quote' funcionin correctament en tots els elements. Aquestes regles són per a documents que contenen només anglès, francès o ambdós. Es necessita una regla per a cada idioma addicional. Cal observar l'ús del combinador de fill (">") per a fixar les cometes en els elements basant-se en l'idioma del text que ho envolta tot:
	[LANG | =fr ]  > *  { quotes: "«" "»" "\2039" "203A" }
	[LANG | =en ]  > *  { quotes: "\201C" "\201D" "\2018" "\2019" }
Els signes de cita per a l'anglès es mostren aquí en una forma que la majoria de gent serà capaç de teclejar. Si es poden teclejar directament, es veuran així:
	[LANG | =fr ]  > *  { quotes: "«" "»" "‹" "›" }
	[LANG | =en ]  > *  { quotes: "“" "”" "`" "´" }
6. Comptadors i numeració automàtica
La numeració automàtica en CSS2 es controla amb dues propietats: counter-increment i counter-reset. Els comptadors definits per aquestes propietats s'utilitzen amb les funcions counter() i counters() de la propietat content.

Aquest exemple mostra una manera de numerar els capítols i les seccions amb "Capítol 1", "1.1", "1.2", etc.:
	H1:before {
           content: "Capítol " counter(capitol) ". ";
           counter-increment: capitol;  /* Afegeix 1 a capitol */
           counter-reset: seccio;      /* Inicialitza la secció a 0 */
	}
	H2:before {
           content: counter(capitol) "." counter(seccio) " ";
           counter-increment: seccio;
	}

Per més informació sobre aquestes propietats consulteu en aquest manual el llistat on es troben definides totes les propietats CSS2.
6.1. Comptadors aniuats i abast
Els comptadors són "auto-aniuats", en el sentit que reutilitzar un comptador en un element fill crea automàticament una nova instància del comptador. Això és important per a situacions com les llistes en HTML, on els elements poden aniuar-se dins d'ells mateixos fins a una profunditat arbitrària. Seria impossible definir comptadors per a cada nivell amb noms únics.

D'aquesta manera l'exemple següent és suficient per enumerar ítems de llista aniuats. El resultat és molt similar a fixar "display: list-item" i "list-style: inside" en l'element LI:
  OL { counter-reset: item }
  LI { display: block }
  LI:before { content: counter(item) ". "; counter-increment: item }

L'auto-aniuament es basa en el principi que cada element que té un counter-reset per a un comptador X crea un nou comptador X, l'abast (el context) del qual és l'element, els seus germans precedents i tots els descendents de l'element i els seus germans precedents.

En l'exemple previ, un OL crearà un comptador, i tots els fills de l'OL faran referència a aquell comptador.

Si es denota amb item[n] l'enèssima instància del comptador "item", i amb "(" i ")" el començament i el final (respectivament) d'un abast, aleshores el següent fragment HTML utilitzarà els comptadors indicats. (Se suposa que el full d'estil és el que s'ha donat en l'exemple de més amunt):
<OL>               <!-- (inicialitza item[0] a 0    -->
  <LI>item         <!--  incrementa item[0] (= 1)   -->
  <LI>item         <!--  incrementa item[0] (= 2)   -->
    <OL>           <!--  (inicialitza item[1] to 0  -->
      <LI>item     <!--   incrementa item[1] (= 1)  -->
      <LI>item     <!--   incrementa item[1] (= 2)  -->
      <LI>item     <!--   incrementa item[1] (= 3)  -->
        <OL>       <!--   (inicialitza item[2] a 0 -->
          <LI>item <!--    incrementa item[2] (= 1) -->
        </OL>      <!--   )                         -->
        <OL>       <!--   (inicialitza item[3] a 0 -->
          <LI>     <!--    incrementa item[3] (= 1) -->
        </OL>      <!--   )                         -->
      <LI>item     <!--   incrementa item[1] (= 4)  -->
    </OL>          <!--  )                          -->
  <LI>item         <!--  incrementa item[0] (= 3)   -->
  <LI>item         <!--  incrementa item[0] (= 4)   -->
</OL>              <!-- )                           -->
<OL>               <!-- (reinicia item[4] a 0      -->
  <LI>item         <!--  incrementa item[4] (= 1)   -->
  <LI>item         <!--  incrementa item[4] (= 2)   -->
</OL>              <!-- )                           -->

La funció 'counters()' genera una cadena composada pels valors de tots els comptadors amb el mateix nom, separats per una cadena donada.

El següent full d'estil numera els ítems aniuats com a "1", "1.1", "1.1.1", etc.:
  OL { counter-reset: item }
  LI { display: block }
  LI:before { content: counters(item, "."); counter-increment: item }
6.2. Estils de comptadors
Per defecte, els comptadors estan formatats amb números decimals, però tots els estils que estan disponibles per a la propietat list-style-type també ho estan per als comptadors. La notació és:
	counter(nom)
per a l'estil per defecte, o bé:
	counter(nom, 'list-style-type')

Estan permesos tots els estils, incloent-hi 'disc', 'circle', 'square' i 'none':
	H1:before { content: counter(carnum, upper-latin) ". " }
	H2:before { content: counter(seccio, upper-roman) " - " }
	BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
	DIV.note:before { content: counter(notacmpt, disc) " " }
	P:before { content: counter(p, none) }
6.3. Comptadors en elements amb "display: none"
Un element que no estigui visualitzat (display inicialitzada a 'none') no pot incrementar o reiniciar un comptador.

Per exemple, amb el següent full d'estil, els H2 amb la classe "secret" no incrementaran 'compt2':
	H2.secret { counter-increment: compt2; display: none }

Els elements amb la propietat visibility incialitzada a 'hidden', per altra banda, sí que incrementen els comptadors.
7. Marcadors i llistes
La majoria dels elements block-level en CSS2 generen una caixa de bloc principal. En aquest apartat es discuteixen dos mecanismes de CSS que fan que un element generi dues caixes: una caixa per al bloc principal (per al contingut de l'element) i una caixa separada per al marcador (per a la decoració tal com una boleta, una imatge, un número). La caixa del marcador pot estar posicionada dins o fora de la caixa principal. A diferència del contingut de :before i :after, la caixa del marcador no afecta la posició de la caixa principal, sigui quin sigui l'esquema de posicionament.

El més general dels dos mecanismes és nou a CSS2 i s'anomena marcadors. El mecanisme més limitat implica les propietats de llista de CSS1. Les propietats de llista donen als autors uns resultats ràpids per a molts escenaris de llistes comunes ordenades i no ordenades. No obstant, els marcadors donen als autors un control precís sobre el contingut i la posició dels marcadors. Els marcadors poden utilitzar-se amb els comptadors per a crear nous estils de llista, per a numerar notes als marges, i per a molt més.

Per exemple, el següent exemple il·lustra com els marcadors poden utilitzar-se per a afegir punts després de cada ítem de la llista numerada. Aquest programa HTML i full d'estil:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Creació d'una llista amb marcadors</TITLE>
     <STYLE type="text/css">
	  LI:before { 
	      display: marker;
	      content: counter(elmeucomptador, lower-roman) ".";
	      counter-increment: elmeucomptador;
	  }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> Aquest és el primer ítem.
      <LI> Aquest és el segon ítem.
      <LI> Aquest és el tercer ítem.
    </OL>
  </BODY>
</HTML>

haurien de produir una cosa semblant a aquesta:
      i. Aquest és el primer ítem.
     ii. Aquest és el segon ítem.
    iii. Aquest és el tercer ítem.

Amb els selectors de descendent i els selectors de fill, és possible especificar diferents tipus de marcadors depenent de la profunditat de les llistes inserides.
7.1. Marcadors: la propietat 'marker-offset'
Els marcadors es creen fixant la propietat display a 'marker' dins un pseudo-element :before o :after. Mentre que el contingut 'block' i 'inline' de :before i :after és part de la caixa principal generada per l'element, el contingut 'marker' és formatat en una caixa de marcador independent, fora de la caixa principal. Les caixes de marcador estan formatades com una sola línia (és a dir, una caixa de línia), per tant no són tan flexibles com les floats. La caixa del marcador només es crea si la propietat content per al pseudo-element realment genera contingut.

Les caixes de marcador tenen farciment i vores, però no marges.

Per al pseudo-element :before, la línia base del text de dins de la caixa del marcador estarà alineada verticalment amb la línia base del text de la primera línia de contingut de la caixa principal. Si la caixa principal no conté text, el límit superior més exterior de la caixa del marcador s'alinearà amb el límit superior més exterior de la caixa principal. Per al pseudo-element :after, la línia base del text de dins de la caixa del marcador s'alinearà verticalment amb la línia base del text de l'última línia del contingut de la caixa principal. Si la caixa principal no conté text, el límit inferior més exterior de la caixa del marcador s'alinearà amb el límit inferior més exterior de la caixa principal.

L'alçada d'una caixa de marcador ve donada per la propietat line-height. La caixa de marcador :before (:after) participa en el càlcul de l'alçada de la primera (última) caixa de línia de la caixa principal. D'aquesta manera, els marcadors s'alinien amb la primera i l'última línia del contingut d'un element, encara que les caixes de marcador es trobin en caixes de línia diferents. Si no existeix cap caixa de línia primera o última dins una caixa principal, la caixa del marcador estableix sola la seva caixa de línia.

L'alineació vertical d'una caixa de marcador dins de la seva caixa de línia s'especifica amb la propietat vertical-align.

Si el valor de la propietat width és 'auto', l'amplada del contingut de la caixa del marcador és la mateixa que la del contingut, d'altra manera és el valor de width. Per a valors de width menors que l'amplada del contingut, la propietat overflow especifica el comportament del desbordament. Les caixes de marcador poden solapar les caixes principals. Per a valors de width més grans que l'amplada del contingut, la propietat text-align determina l'alineació horitzontal del contingut de la caixa del marcador.

La propietat marker-offset especifica la distància horitzontal entre una caixa de marcador i la caixa principal associada. La distància es mesura entre els límits de les seves vores més propers. Nota. Si un marcador es troba a la dreta d'un float en un context de formatat d'esquerra a dreta, la caixa principal es trobarà en el costat dret del float, però les caixes de marcador apareixeran a l'esquerra del float. Com que el límit de la vora esquerra de la caixa principal es troba a l'esquerra del float (veieu la descripció de floats) i les caixes de marcador es troben fora del límit de la vora de la caixa principal, el marcador també es trobarà a l'esquerra del float. Un comportament anàlog s'aplica per al formatat de dreta a esquerra quan un marcador es troba a l'esquerra d'un float.

Quan la propietat display té el valor 'marker' per al contingut generat per un element amb "display: list-item", una caixa de marcador generada per a ':before' reemplaça el marcador normal dels ítems de la llista.

En el següent exemple el contingut està centrat dins d'una caixa de marcador d'una amplada fixa. Aquest document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 <HTML>
    <HEAD>
      <TITLE>Alineació del contingut en la caixa de marcador</TITLE>
      <STYLE type="text/css">
           LI:before { 
               display: marker;
               content: "(" counter(comptador) ")";
               counter-increment: comptador;
               width: 6em;
               text-align: center;
           }
      </STYLE>
   </HEAD>
   <BODY>
     <OL>
       <LI> Aquest és el primer ítem.
       <LI> Aquest és el segon ítem.
       <LI> Aquest és el tercer ítem.
     </OL>
   </BODY>
 </HTML>
hauria de produir una cosa semblant a:
	(1)   Aquest és el
	      primer ítem.
	(2)   Aquest és el
	      segon ítem.
	(3)   Aquest és el
	      tercer ítem.

El següent exemple crea marcadors abans i després dels ítems d'una llista.
Aquest document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Marcadors abans i després dels ítems de llista</TITLE>
    <STYLE type="text/css">
      @media screen, print {
         LI:before { 
   	      display: marker;
	      content: url("smiley.gif");
         LI:after {
	      display: marker;
   	      content: url("sad.gif");
         }
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>el primer ítem de llista va primer
      <LI>el segon ítem de llista va segon
    </UL>
  </BODY>
</HTML>
hauria de produir alguna cosa semblant a això (l'art ascii s'utilitza aquí enlloc dels gifs "smiley") :
  :-) el primer ítem de llista 
      va primer                 :-(
  :-) el segon ítem de llista 
      va segon                  :-(

El següent exemple utilitza els marcadors per a numerar notes (paràgrafs).
El següent document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Marcadors per a crear notes numerades 4</TITLE>
    <STYLE type="text/css">
      P { margin-left: 12 em; }
      @media screen, print {
         P.Note:before { 
  	      display: marker;
	      content: url("nota.gif") 
                       "Nota " counter(comptador-notes) ":";
            counter-increment: comptador-notes;
            text-align: left;
            width: 10em;
         }
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Aquest és el primer paràgraf d'aquest document.</P>
    <P CLASS="Nota">Aquest és un document molt curt.</P>
    <P>Això és el final.</P>
  </BODY>
</HTML>
hauria de produir alguna cosa semblant a:



El següent exemple il·lustra com els marcadors poden utilitzar-se per a afegir punts després de cada ítem d'una llista numerada. Aquest programa HTML i full d'estil:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
    <HEAD>
      <TITLE>Exemple de marcadors 5</TITLE>
      <STYLE type="text/css">
           P { margin-left: 8em } /* Crea espai pels comptadors */
           LI:before { 
               display: marker;
               marker-offset: 3em;
               content: counter(elmeucomptador, lower-roman) ".";
               counter-increment: elmeucomptador;
           }   
      </STYLE>
   </HEAD>
   <BODY>
     <P> Això és un llarg paràgraf precedent ...
     <OL>
       <LI> Aquest és el primer ítem.
       <LI> Aquest és el segon ítem.
       <LI> Aquest és el tercer ítem.
     </OL>
     <P> Això és un llarg paràgraf conseqüent ...
   </BODY>
 </HTML>
hauria de produir una cosa semblant a :
        Això és un llarg paràgraf
        precedent ...
      
   i.   Aquest és el primer ítem.
  ii.   Aquest és el segon ítem.
 iii.   Aquest és el tercer ítem.

        Això és un llarg paràgraf
        conseqüent ...
7.2. Llistes: les propietats 'list-style-type', 'list-style-image', 'list-style-position' i 'list-style'
Les propietats de llista permeten un formatat visual bàsic per a les llistes. Tal com amb els marcadors més generals, un element amb "display: list-item" genera una caixa principal per al contingut de l'element i una caixa de marcador opcional. Les altres propietats de llista permeten als autors especificar el tipus de marcador (imatge, glyph o número) i la seva posició respecte la caixa principal (fora d'ella o dins d'ella abans del contingut). No permeten als autors especificar estils diferents (colors, fonts, alineació, etc.) per al marcador de la llista o ajustar la seva posició respecte la caixa principal.

A més, quan un marcador M (creat amb "display: marker") s'utilitza amb un ítem de llista creat per les propietats de llista, M reemplaça el marcador estàndard per als ítems de la llista.

Amb les propietats de llista, les propietats de fons s'apliquen només a la caixa principal; una caixa de marcador 'outside' és transparent. Els marcadors ofereixen més control sobre l'estil de les caixes de marcador.

La propietat list-style-type especifica l'aparença dels marcadors dels ítems de la llista si list-style-image té el valor 'none' o si la imatge apuntada per la URI no pot ser visualitzada.

La propietat list-style-image assigna la imatge que serà utilitzada com a marcador dels ítems de la llista. Quan la imatge estigui disponible reemplaçarà el marcador fixat amb el marcador de list-style-type.

La propietat list-style-position especifica la posició de la caixa de marcador en la caixa del bloc principal.

La propietat list-style és una notació drecera per a fixar les tres propietats list-style-type, list-style-image i list-style-position en el mateix lloc del full d'estil.

Encara que els autors poden especificar la informació de list-style directament en els elements d'ítems de llista (per ex., LI en HTML), haurien de fer-ho amb cura. Les següents regles semblen similars però la primera declara un selector de descendent i la segona un (més específic) selector de fill:
   /* Qualsevol LI descendent d'un OL */
	OL.alpha LI   { list-style: lower-alpha } 

   /* Qualsevol LI fill d'un OL */
	OL.alpha > LI { list-style: lower-alpha } 

Els autors que utilitzin només el selector de descendent pot ser que no assoleixin els resultats desitjats. Considereu les següents regles:
<HTML>
  <HEAD>
    <TITLE>ALARMA: Resultats inesperats deguts a l'efecte cascada</TITLE>
    <STYLE type="text/css">
      OL.alpha LI  { list-style: lower-alpha }
      UL LI        { list-style: disc }
    </STYLE>
  </HEAD>
  <BODY>
    <OL class="alpha">
      <LI>nivell 1
      <UL>
         <LI>nivell 2
      </UL>
    </OL>
  </BODY>
</HTML>
La presentació desitjada tindria ítems de nivell 1 amb les etiquetes 'lower-alpha' i els ítems de nivell 2 amb etiquetes 'disc'. No obstant, l'ordre de cascada causarà que la primera regla d'estil (la qual inclou informació específica de classe) enmascari la segona. Les següents regles resolen el problema tot utilitzant un selector de fill en el seu lloc:
	OL.alpha > LI  { list-style: lower-alpha }
	UL LI   { list-style: disc }
Una altra solució seria especificar la informació de list-style només en els elements de tipus de llista:
	OL.alpha  { list-style: lower-alpha }
	UL        { list-style: disc }
L'herència transferirà els valors de list-style dels elements OL i UL als elements LI. Aquesta és la manera recomanada per a especificar informació d'estil de llista.
Tancar
Pàgina Principal
Introducció al Manual d'HTML Dinàmic
Glossari
Referències























HTML 4.0
Introducció al manual d'HTML 4.0
Taules
Formularis
Objectes, imatges i applets
Scripts
Informació de l'idioma i sentit del text
Frames
Nous elements
Elements menyspreuats i obsolets
Fulls d'estil
Nous atributs de l'HTML 4.0
Índex d'atributs nous
Índex d'atributs menyspreuats
DTD
Annexe












Introducció als CSS
Introducció als CSS2 i al manual
Propietats CSS2
Fulls d'estil audibles
Model de caixa
Sintaxi i tipus bàsics de dades
Model de formatat visual
Detalls del model de formatat visual
Assignar valors de propietats, la cascada i l'herència
Interfície d'usuari
Efectes visuals
Text
Taules
Fonts
Contingut generat, numeració automàtica i llistes
Colors i fons
Selectors
Tipus de mitjans
Mitjans paginats
Suport de CSS2
Annexe




Introducció al DOM
DOM Nivell 1 - Nucli
DOM Nivell 1 - HTML
Articles sobre el DOM






















Programació en DHTML
Demos