This translation is incomplete. Please help translate this article from English.

Quan una URL apunta a una peça específica d'un document, pot ser difícil per a l'usuari adonar-se. Esbrineu com podeu fer servir algun CSS senzill per cridar l'atenció sobre el destí d'una URL i millorar l'experiència de l'usuari.

Triar un destí

La pseudo-class :targets'utilitza per aplicar estil a l'element de destinació d'un URI que conté un identificador de fragment. Per exemple, l'URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#example conté el identificador de fragment #example. En HTML, els identificadors corresponent els valors dels atributs id o name, ja que tots dos comparteixen el mateix espai de noms. Per tant, l'URI d'exemple assenyalaria l'encapçalament "example" en aquest document.

Suposem que desitjeu donar estil a qualsevol element h2 que és el destí d'un URI, però no voleu que qualsevol altre tipus d'element aconsegueixi un estil de destinació. Això és bastant simple:

h2:target {font-weight: bold;}

També és possible crear estils que siguin específics d'un fragment en particular del document. Això es realitza utilitzant el mateix valor de la identificació que es troba en l'URI. Per tant, per afegir una vora al fragment #example, escriuríem:

#example:target {border: 1px solid black;}

Dirigit a tots els elements

Si la intenció és crear un estil "ampli" que s'apliqui a tots els elements seleccionats, llavors el selector universal, ve molt bé:

:target {color: red;}

Exemple

En el següent exemple, hi ha cinc enllaços que apunten a elements en el mateix document. En seleccionar l'enllaç "First", per exemple, farà que <h1 id = "one"> es converteixi en l'element de destinació. Recordeu que el document pot saltar a una nova posició de desplaçament, ja que els elements de destinació es col·loquen a la part superior de la finestra del navegador si és possible.

<h4 id="one">...</h4> <p id="two">...</p>
<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>

Conclusió

En els casos en què un identificador de fragment apunti a una part del document, els lectors poden arribar a confondre's sobre quina part del document se suposa que han d'estar llegint. El donar estil a la destinació d'un URI, podem reduïr o eliminar la confusió del lector.

Informació del document original

  • Autor(s): Eric Meyer, Standards Evangelist, Netscape Communications
  • Original Copyright Information: Copyright © 2001-2003 Netscape. Tots els drets reservats.
  • Nota: Aquest article reproduït és part de l'original del lloc DevEdge.

Document Tags and Contributors

Contributors to this page: Legioinvicta
Last updated by: Legioinvicta,