CSS/Training/links

Link state

The link pseudo-classes

Web browsers commonly display unvisited links differently from previously visited ones.

[Syntax]

a:link{ Declarations }
a:visited{ Declarations }
  • a:link: applies for links that have not yet been visited.
  • a:visited: pplies once the link has been visited by the user.


The dynamic pseudo-classes

Interactive Web browsers sometimes change the rendering in response to user actions.

[Syntax]

a:hover{ Declarations }
a:active{ Declarations }
  • a:hover: applies while the user designates an element (with some pointing device), but does not activate it.
  • a:active: applies while an element is being activated by the user.


Example

[style.css]

a:link, a:visited{
  color: #ff0000;
  text-decoration: underline;
}
a:hover, a:active{
  color: #0000ff;
  text-decoration: none;
}

[index.html]

<p>Jump to <a href="http://www.google.com/">Google</a></p>
<p>Jump to <a href="http://www.yahoo.com/">Yahoo!</a>

Cssed links exam.png

Challenge

1. Changes the color of side navigation by link state.

[style.css]

nav ul li a:link, nav ul li a:visited{
  color: #333333;
  text-decoration: none;
}
nav ul li a:active, nav ul li a:hover{
  color: #990066;
  text-decoration: none;
}

Cssed links chall.png

In the next week, you will learn the Box model. It is very important in the study item of CSS.

Last modified on 19 November 2011, at 21:31