viernes, 23 de noviembre de 2012

The link pseudo-class


The link pseudo-class
1. Functionality

To create links within a page, use a syntax like this:

<a href="#intro"> Go to introduction </ a>
With the new pseudo-class: target, you can highlight the links that visitors have already used.

2. Application

Consider a simple example: you have a very long document, which has been inserted in an index at the beginning of it, with links that point to different places in different parts of the page.

This would be the structure below:

<p> <a href="#intro"> Introduction </ a> | <a
href = "# results"> Results </ a> | <a
href = "# conclusion"> Conclusion </ a> </ p>
<h3> <a id="intro"> Introduction </ a> </ h3>
<p> Maecenas sed ... </ p>
...
<h3> <a id="resultados"> Results </ a> </ h3>
<p> sagittis Vivamus lacus ... </ p>
...
<h3> <a id="conclusion"> Conclusion </ a> </ h3>
<p> Donec ullamcorper nulla ... </ p>
...
And these are the CSS styles: when using a link in the index, you apply a background color to the element that golden point.

to {
     text-decoration: none;
}
a: target {
     background-color: gold;
}
3. Result

This page is displayed when the user has not taken any action:

No hay comentarios:

Publicar un comentario