CSS/Training/links

From W3C Wiki
< CSS‎ | Training
Revision as of 16:08, 15 March 2011 by Hiroki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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.